flutter [web] JS格式化程序破坏了新加载API中的模板,

xdnvmnnf  于 2个月前  发布在  Flutter
关注(0)|答案(9)|浏览(36)

重现步骤

  1. 使用最新的bootstrap创建一个demo Flutter应用，使用以下flutter_bootstrap.js
{{flutter_js}}
{{flutter_build_config}}

_flutter.loader.load();
  1. 使用VS-Code、Javascript或其他js格式化工具自动格式化代码
  2. 观察添加的空格
{ { flutter_js } }
{ { flutter_build_config } }

_flutter.loader.load();
  1. 尝试运行flutter
  2. 观察白屏现象

预期结果

即使格式化工具添加了空格，模板也应该被替换。文档中至少应该有一个警告，告知模板不能以某种方式被格式化。

实际结果

应用是空白的，因为模板没有被替换。

代码示例

(已包含在上方)

截图或视频

无

日志

无

Flutter Doctor输出

这个复现出现在最新的master版本中，可能从我们引入新的load API以来就一直存在。

flutter

9条答案

按热度按时间
bakd9h0s

bakd9h0s1#

你好@prologikus
请提供flutter doctor -v的输出，其中包括主通道的确切版本。
使用最新的bootstrap创建一个Flutter演示应用程序，使用以下flutter_bootstrap.js。
你是说/build/web/flutter_bootstrap.js吗？如果是，我在Channel master, 3.23.0-8.0.pre.8上检查了这个问题，但无法重现它。

赞(0）分享  回复(0）举报  2个月前
brgchamk

brgchamk2#

请提供 flutter doctor -v 的输出，其中包括主通道的确切版本。
使用最新的 bootstrap 创建一个演示版 Flutter 应用，使用以下 flutter_bootstrap.js。
你是说 /build/web/flutter_bootstrap.js 吗？如果是的话，我在 Channel master, 3.23.0-8.0.pre.8 上检查了这个问题，但无法重现。
我也在 3.23.0-8.0.pre.8 上。
你注意到模板中添加的间距了吗？(bug 报告中的第 3 步)

赞(0）分享  回复(0）举报  2个月前
kgsdhlau

kgsdhlau3#

是的，如果我格式化代码，上面第三步会添加空格。你能分享一个问题的演示吗？

赞(0）分享  回复(0）举报  2个月前
eagi6jfj

eagi6jfj4#

当有空间被添加时，生成的 build/webflutter_bootstrap.js 看起来与 web/flutter_bootstrap.js 相同。

赞(0）分享  回复(0）举报  2个月前
esyap4oy

esyap4oy5#

在Flutter 3.22.2上，VS Code格式化工具会添加空格，这似乎破坏了模板。

运行以下命令检查Flutter版本：

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](https://github.com/flutter/flutter.git) 
 • Framework revision  [761747b](https://github.com/flutter/flutter/commit/761747bfc538b5af34aa0d3fac380f1bc331ec49)  (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](https://plugins.jetbrains.com/plugin/9212-flutter) 
 • Dart plugin can be installed from:
 🔨  [https://plugins.jetbrains.com/plugin/6351-dart](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!
赞(0）分享  回复(0）举报  2个月前
cx6n0qe3

cx6n0qe36#

如果我触发 flutter run(如 @prologikus 提到的),问题将不会发生。但是，如果我在本地托管构建的 Web(例如 python3 -m http.server 8000),我可以看到白屏。检查浏览器上的控制台窗口，我看到这个错误：

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

@prologikus@Mr-Pepe,你能确认我指出的这些步骤吗？

赞(0）分享  回复(0）举报  2个月前
a7qyws3x

a7qyws3x7#

  1. 运行 flutter create bug
  2. 运行 cd bug
  3. 复制
{{flutter_js}}
{{flutter_build_config}}

_flutter.loader.load();

到 web/flutter_bootstrap.js 。

  1. 自动格式化文件
  • 运行 flutter run -d chrome
  • Chrome 打开
  • 屏幕保持白色
  • 控制台日志：
flutter_bootstrap.js:1 Uncaught 
ReferenceError: flutter_js is not defined
at flutter_bootstrap.js:1:5
  • 运行 flutter build web
  • 运行 python -m http.server -d build/web/
  • 在 Chrome 中打开 localhost:8000
  • 屏幕保持白色
  • 控制台日志：
flutter_bootstrap.js:1 Uncaught 
ReferenceError: flutter_js is not defined
at flutter_bootstrap.js:1:5

flutter doctor -v
[✓] Flutter (稳定频道，3.22.2,在 Arch Linux 6.9.3-arch1-1,区域设置 en_US.UTF-8)
• Flutter 版本 3.22.2 在稳定频道的 /home/felipe/snap/flutter/common/flutter 上
• 上游仓库 https://github.com/flutter/flutter.git
• 框架修订 761747b (7天前),2024-06-05 22:15:13 +0200
• 引擎修订 edd8546116
• Dart 版本 3.4.3
• DevTools 版本 2.34.3
[✓] Android 工具链 - 为 Android 设备开发(Android SDK 版本 34.0.0)
• Android SDK 位于 /home/felipe/Android/Sdk/
• 平台 android-34,构建工具 34.0.0
• Java 二进制位于：/home/felipe/Applications/android-studio/jbr/bin/java
• Java 版本 OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
• 已接受所有 Android 许可。
[✓] Chrome - 为 Web 开发
• CHROME_EXECUTABLE = chromium
[✓] Linux 工具链 - 为 Linux 桌面开发
• clang 版本 10.0.0-4ubuntu1
• cmake 版本 3.16.3
• ninja 版本 1.10.0
• pkg-config 版本 0.29.1
[✓] Android Studio (版本 2022.2)
• Android Studio 位于 /home/felipe/Applications/android-studio
• Flutter 插件可以从：
https://plugins.jetbrains.com/plugin/9212-flutter 安装。
• Dart 插件可以从：
https://plugins.jetbrains.com/plugin/6351-dart 安装。
• Java 版本 OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

赞(0）分享  回复(0）举报  2个月前
c7rzv4ha

c7rzv4ha8#

感谢@Mr-Pepe。我也可以通过遵循您的详细步骤来复现这个问题。

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.

赞(0）分享  回复(0）举报  2个月前
vlju58qv

vlju58qv9#

有趣的问题：这个文件是一个模板文件，尽管扩展名是 .js 。
@eyebrowsoffire 你有什么想法吗？

赞(0）分享  回复(0）举报  2个月前
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com