Steps to reproduce Create a demo Flutter app using the lates

Hi <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="

Hi <a class="user-mention notranslate" data-hovercard-type="user" data-ho

If I trigger flutter run as <a class="user-mention no

Run flutter create bug Run <code class

Thank <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-ur

[web] JS formatter breaks the templates in the new load API. about flutter HOT 9 OPEN

prologikus commented on September 26, 2024 6

[web] JS formatter breaks the templates in the new load API.

from flutter.

Comments (9)

huycozy commented on September 26, 2024

Hi @prologikus
Please provide the output of flutter doctor -v which will include the exact version of master channel.

Create a demo Flutter app using the latest bootstrap, using the following flutter_bootstrap.js

Do you mean /build/web/flutter_bootstrap.js? If it is, I checked this issue on Channel master, 3.23.0-8.0.pre.8 but couldn't reproduce it.

from flutter.

prologikus commented on September 26, 2024

Hi @prologikus Please provide the output of flutter doctor -v which will include the exact version of master channel.

Create a demo Flutter app using the latest bootstrap, using the following flutter_bootstrap.js

Do you mean /build/web/flutter_bootstrap.js? If it is, I checked this issue on Channel master, 3.23.0-8.0.pre.8 but couldn't reproduce it.

I was on 3.23.0-8.0.pre.8 too

Did you observe the spacing added into the template ? (step 3 in bug report)

from flutter.

huycozy commented on September 26, 2024

Yes, if I format the code, space will be added as 3rd step above. Can you share a demo of the issue?

from flutter.

kencana16 commented on September 26, 2024

when there is space added. generated build/webflutter_bootstrap.js is look same as web/flutter_bootstrap.js

{ { flutter_js } }
{ { flutter_build_config } }

_flutter.loader.load();

from flutter.

Mr-Pepe commented on September 26, 2024

I can reproduce this on Flutter 3.22.2. The VS Code formatter adds spaces which seems to break the templating.

flutter doctor -v

[✓] Flutter (Channel stable, 3.22.2, on Arch Linux 6.9.1-arch1-2, locale en_US.UTF-8)
• Flutter version 3.22.2 on channel stable at /home/felipe/snap/flutter/common/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 761747b (7 days ago), 2024-06-05 22:15:13 +0200
• Engine revision edd8546116
• Dart version 3.4.3
• DevTools version 2.34.3

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
• Android SDK at /home/felipe/Android/Sdk/
• Platform android-34, build-tools 34.0.0
• Java binary at: /home/felipe/Applications/android-studio/jbr/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
• All Android licenses accepted.

[✓] Chrome - develop for the web
• CHROME_EXECUTABLE = chromium

[✓] Linux toolchain - develop for Linux desktop
• clang version 10.0.0-4ubuntu1
• cmake version 3.16.3
• ninja version 1.10.0
• pkg-config version 0.29.1

[✓] Android Studio (version 2022.2)
• Android Studio at /home/felipe/Applications/android-studio
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[✓] Connected device (2 available)
• Linux (desktop) • linux • linux-x64 • Arch Linux 6.9.1-arch1-2
• Chrome (web) • chrome • web-javascript • Chromium 125.0.6422.112 Arch Linux

[✓] Network resources
• All expected network resources are available.

• No issues found!

from flutter.

huycozy commented on September 26, 2024

If I trigger flutter run as @prologikus mentioned, the issue will not occur.

But if I host the built web locally (such as python3 -m http.server 8000), I can see the white screen. Checking the console window on browser, I see this error:

ReferenceError: flutter_js is not defined
    at flutter_bootstrap.js:1:5

@prologikus @Mr-Pepe Can you confirm these steps as I pointed out?

from flutter.

Mr-Pepe commented on September 26, 2024

Run flutter create bug
Run cd bug

Copy

{{flutter_js}}
{{flutter_build_config}}

_flutter.loader.load();

into web/flutter_bootstrap.js.

Auto-format the file

Run flutter run -d chrome

Chrome opens
The screen stays white

Console logs:

flutter_bootstrap.js:1 Uncaught 
ReferenceError: flutter_js is not defined
at flutter_bootstrap.js:1:5

Run flutter build web
Run python -m http.server -d build/web/

Open localhost:8000 in Chrome

The screen stays white

Console logs:

flutter_bootstrap.js:1 Uncaught 
ReferenceError: flutter_js is not defined
at flutter_bootstrap.js:1:5

flutter doctor -v

[✓] Flutter (Channel stable, 3.22.2, on Arch Linux 6.9.3-arch1-1, locale en_US.UTF-8)
• Flutter version 3.22.2 on channel stable at /home/felipe/snap/flutter/common/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 761747b (7 days ago), 2024-06-05 22:15:13 +0200
• Engine revision edd8546116
• Dart version 3.4.3
• DevTools version 2.34.3

[✓] Chrome - develop for the web
• CHROME_EXECUTABLE = chromium

[✓] Linux toolchain - develop for Linux desktop
• clang version 10.0.0-4ubuntu1
• cmake version 3.16.3
• ninja version 1.10.0
• pkg-config version 0.29.1

[✓] Connected device (2 available)
• Linux (desktop) • linux • linux-x64 • Arch Linux 6.9.3-arch1-1
• Chrome (web) • chrome • web-javascript • Chromium 126.0.6478.55 Arch Linux

[✓] Network resources
• All expected network resources are available.

• No issues found!

from flutter.

huycozy commented on September 26, 2024

Thank @Mr-Pepe. I also can reproduce this by following your detailed steps.

flutter doctor -v (stable and master)

[✓] Flutter (Channel stable, 3.22.2, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.22.2 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 761747bfc5 (31 hours ago), 2024-06-05 22:15:13 +0200
    • Engine revision edd8546116
    • Dart version 3.4.3
    • DevTools version 2.34.3

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode15.3.app/Contents/Developer
    • Build 15E204a
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160)

[✓] VS Code (version 1.89.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.90.0

[✓] Connected device (3 available)
    • iPhone (mobile) • d9a94afe2b649fef56ba0bfeb052f0f2a7dae95e • ios            • iOS 15.8 19H370
    • macOS (desktop) • macos                                    • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)    • chrome                                   • web-javascript • Google Chrome 125.0.6422.142

[✓] Network resources
    • All expected network resources are available.

• No issues found!

[!] Flutter (Channel master, 3.23.0-13.0.pre.212, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.23.0-13.0.pre.212 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 7b6d667701 (4 hours ago), 2024-06-12 19:34:52 -0400
    • Engine revision c7fcbfce60
    • Dart version 3.5.0 (build 3.5.0-250.0.dev)
    • DevTools version 2.36.0
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode15.3.app/Contents/Developer
    • Build 15E204a
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160)

[✓] VS Code (version 1.90.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.90.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 125.0.6422.142

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

from flutter.

kevmoo commented on September 26, 2024

Interesting. The problem: this file is a template file, even though the extension is .js.

Thoughts @eyebrowsoffire ?

from flutter.

[web] JS formatter breaks the templates in the new load API. about flutter HOT 9 OPEN

Comments (9)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent