search

flutter / flutter

Flutter makes it easy and fast to build beautiful apps for mobile and beyond
https://flutter.dev
BSD 3-Clause "New" or "Revised" License
162.18k stars 26.64k forks source link

canvaskit.js:97 Uncaught SyntaxError: Unexpected token ')' (at canvaskit.js:97:504) while using local canvaskit #147491

Open nimashahahmadian opened 2 weeks ago

nimashahahmadian commented 2 weeks ago

Steps to reproduce

1-flutter create test --platforms=web 2- add following script to index.html 

<script>
    window.flutterConfiguration = {
      canvasKitBaseUrl: "/canvaskit/"
    };
</script>

3- run build with the following code: flutter build web --no-web-resources-cdn --web-renderer canvaskit 4- open the builded test app on the served route

Expected results

flutter web app download canvaskit.js from local server instead of somewhere like gstatic.com and run normally without the need of internet.

Actual results

(canvaskit.js:97 Uncaught SyntaxError: Unexpected token ')' (at canvaskit.js:97:504)) makes the onEntryPointLoaded to crash and not run the test application

Code sample

Code sample ```dart [flutter initial test app] ```

Logs

Logs ```console [Uncaught SyntaxError: Unexpected token ')' (at canvaskit.js:97:504) main.dart.js:5869 Rejecting promise with error: NoSuchMethodError: method not found: 'CanvasKitInit' (self.window.CanvasKitInit is not a function) n @ main.dart.js:5869 $1 @ main.dart.js:19229 $1 @ main.dart.js:19608 So @ main.dart.js:25428 tW @ main.dart.js:25431 Pg @ main.dart.js:25056 $0 @ main.dart.js:25198 m5 @ main.dart.js:4206 du @ main.dart.js:25126 r3 @ main.dart.js:24856 N @ main.dart.js:4104 (anonymous) @ main.dart.js:17495 (anonymous) @ main.dart.js:4113 $2 @ main.dart.js:24865 $2 @ main.dart.js:24862 Sn @ main.dart.js:25432 BQ @ main.dart.js:25435 Pg @ main.dart.js:25055 $0 @ main.dart.js:25198 m5 @ main.dart.js:4206 du @ main.dart.js:25126 r3 @ main.dart.js:24856 N @ main.dart.js:4104 (anonymous) @ main.dart.js:27732 (anonymous) @ main.dart.js:4113 $2 @ main.dart.js:24865 $2 @ main.dart.js:24862 Sn @ main.dart.js:25432 BQ @ main.dart.js:25435 Pg @ main.dart.js:25055 $0 @ main.dart.js:25198 m5 @ main.dart.js:4206 du @ main.dart.js:25126 r3 @ main.dart.js:24856 N @ main.dart.js:4104 (anonymous) @ main.dart.js:737 (anonymous) @ main.dart.js:4113 $2 @ main.dart.js:24865 $2 @ main.dart.js:24862 Sn @ main.dart.js:25432 BQ @ main.dart.js:25435 Pg @ main.dart.js:25055 $0 @ main.dart.js:25198 m5 @ main.dart.js:4206 du @ main.dart.js:25126 $2 @ main.dart.js:25031 Sn @ main.dart.js:25432 BQ @ main.dart.js:25435 Pg @ main.dart.js:25055 $0 @ main.dart.js:25198 m5 @ main.dart.js:4206 du @ main.dart.js:25126 r3 @ main.dart.js:24856 N @ main.dart.js:4104 (anonymous) @ main.dart.js:781 (anonymous) @ main.dart.js:4113 $2 @ main.dart.js:24865 $2 @ main.dart.js:24862 Sn @ main.dart.js:25432 BQ @ main.dart.js:25435 Pg @ main.dart.js:25055 $0 @ main.dart.js:25198 m5 @ main.dart.js:4206 du @ main.dart.js:25126 r3 @ main.dart.js:24856 N @ main.dart.js:4104 (anonymous) @ main.dart.js:17878 (anonymous) @ main.dart.js:4113 $2 @ main.dart.js:24865 $2 @ main.dart.js:24862 Sn @ main.dart.js:25432 BQ @ main.dart.js:25435 Pg @ main.dart.js:25055 $0 @ main.dart.js:25198 m5 @ main.dart.js:4206 Yi @ main.dart.js:4169 $0 @ main.dart.js:25156 acL @ main.dart.js:4238 acU @ main.dart.js:4240 $1 @ main.dart.js:24818 childList (async) $1 @ main.dart.js:24825 a34 @ main.dart.js:4245 km @ main.dart.js:4302 Gu @ main.dart.js:25130 fU @ main.dart.js:25128 dF @ main.dart.js:25048 $1 @ main.dart.js:27249 Promise.then (async) ix @ main.dart.js:5882 (anonymous) @ main.dart.js:19261 (anonymous) @ main.dart.js:4113 $2 @ main.dart.js:24865 P @ main.dart.js:4099 j3 @ main.dart.js:19268 (anonymous) @ main.dart.js:17951 (anonymous) @ main.dart.js:4113 $2 @ main.dart.js:24865 $1 @ main.dart.js:24859 So @ main.dart.js:25428 tW @ main.dart.js:25431 $0 @ main.dart.js:25188 m5 @ main.dart.js:4206 ka @ main.dart.js:25123 dF @ main.dart.js:24854 O @ main.dart.js:4103 (anonymous) @ main.dart.js:593 (anonymous) @ main.dart.js:4113 $2 @ main.dart.js:24865 $1 @ main.dart.js:24859 So @ main.dart.js:25428 tW @ main.dart.js:25431 $0 @ main.dart.js:25188 m5 @ main.dart.js:4206 ka @ main.dart.js:25123 $0 @ main.dart.js:25159 acL @ main.dart.js:4238 acU @ main.dart.js:4240 $1 @ main.dart.js:24818 childList (async) $1 @ main.dart.js:24825 a34 @ main.dart.js:4245 km @ main.dart.js:4302 Gu @ main.dart.js:25130 fU @ main.dart.js:25128 dF @ main.dart.js:25048 $1 @ main.dart.js:27249 Promise.then (async) ix @ main.dart.js:5882 (anonymous) @ main.dart.js:577 (anonymous) @ main.dart.js:4113 $2 @ main.dart.js:24865 P @ main.dart.js:4099 ae0 @ main.dart.js:595 mE @ main.dart.js:572 (anonymous) @ main.dart.js:17945 (anonymous) @ main.dart.js:4113 $2 @ main.dart.js:24865 P @ main.dart.js:4099 HK @ main.dart.js:17974 iM @ main.dart.js:17939 (anonymous) @ main.dart.js:17887 (anonymous) @ main.dart.js:4113 $2 @ main.dart.js:24865 P @ main.dart.js:4099 QV @ main.dart.js:17933 lq @ main.dart.js:17876 (anonymous) @ main.dart.js:794 (anonymous) @ main.dart.js:4113 $2 @ main.dart.js:24865 $1 @ main.dart.js:24859 So @ main.dart.js:25428 tW @ main.dart.js:25431 $0 @ main.dart.js:25188 m5 @ main.dart.js:4206 ka @ main.dart.js:25123 dF @ main.dart.js:24854 O @ main.dart.js:4103 (anonymous) @ main.dart.js:733 (anonymous) @ main.dart.js:4113 $2 @ main.dart.js:24865 $1 @ main.dart.js:24859 So @ main.dart.js:25428 tW @ main.dart.js:25431 $0 @ main.dart.js:25188 m5 @ main.dart.js:4206 ka @ main.dart.js:25123 dF @ main.dart.js:24854 O @ main.dart.js:4103 (anonymous) @ main.dart.js:19256 (anonymous) @ main.dart.js:4113 $2 @ main.dart.js:24865 $1 @ main.dart.js:24859 So @ main.dart.js:25428 tW @ main.dart.js:25431 $0 @ main.dart.js:25188 m5 @ main.dart.js:4206 ka @ main.dart.js:25123 $0 @ main.dart.js:25159 acL @ main.dart.js:4238 acU @ main.dart.js:4240 $1 @ main.dart.js:24818 childList (async) $1 @ main.dart.js:24825 a34 @ main.dart.js:4245 km @ main.dart.js:4302 Gu @ main.dart.js:25130 fU @ main.dart.js:25128 dF @ main.dart.js:25048 $1 @ main.dart.js:27249 Promise.then (async) ix @ main.dart.js:5882 (anonymous) @ main.dart.js:19250 (anonymous) @ main.dart.js:4113 $2 @ main.dart.js:24865 $1 @ main.dart.js:24859 So @ main.dart.js:25428 tW @ main.dart.js:25431 $0 @ main.dart.js:25188 m5 @ main.dart.js:4206 ka @ main.dart.js:25123 $0 @ main.dart.js:25159 acL @ main.dart.js:4238 acU @ main.dart.js:4240 $1 @ main.dart.js:24818 childList (async) $1 @ main.dart.js:24825 a34 @ main.dart.js:4245 km @ main.dart.js:4302 Gu @ main.dart.js:25130 fU @ main.dart.js:25128 dF @ main.dart.js:25048 $1 @ main.dart.js:27249 Promise.then (async) ix @ main.dart.js:5882 (anonymous) @ main.dart.js:19250 (anonymous) @ main.dart.js:4113 $2 @ main.dart.js:24865 P @ main.dart.js:4099 om @ main.dart.js:19257 (anonymous) @ main.dart.js:725 (anonymous) @ main.dart.js:4113 $2 @ main.dart.js:24865 $1 @ main.dart.js:24859 So @ main.dart.js:25428 tW @ main.dart.js:25431 $0 @ main.dart.js:25188 m5 @ main.dart.js:4206 ka @ main.dart.js:25123 dF @ main.dart.js:24854 O @ main.dart.js:4103 (anonymous) @ main.dart.js:593 (anonymous) @ main.dart.js:4113 $2 @ main.dart.js:24865 $1 @ main.dart.js:24859 So @ main.dart.js:25428 tW @ main.dart.js:25431 $0 @ main.dart.js:25188 m5 @ main.dart.js:4206 ka @ main.dart.js:25123 $0 @ main.dart.js:25159 acL @ main.dart.js:4238 acU @ main.dart.js:4240 $1 @ main.dart.js:24818 childList (async) $1 @ main.dart.js:24825 a34 @ main.dart.js:4245 km @ main.dart.js:4302 Gu @ main.dart.js:25130 fU @ main.dart.js:25128 dF @ main.dart.js:25048 $1 @ main.dart.js:27249 Promise.then (async) ix @ main.dart.js:5882 (anonymous) @ main.dart.js:577 (anonymous) @ main.dart.js:4113 $2 @ main.dart.js:24865 P @ main.dart.js:4099 ae0 @ main.dart.js:595 mE @ main.dart.js:572 (anonymous) @ main.dart.js:716 (anonymous) @ main.dart.js:4113 $2 @ main.dart.js:24865 P @ main.dart.js:4099 adH @ main.dart.js:734 FG @ main.dart.js:710 (anonymous) @ main.dart.js:792 (anonymous) @ main.dart.js:4113 $2 @ main.dart.js:24865 P @ main.dart.js:4099 Fz @ main.dart.js:796 (anonymous) @ main.dart.js:752 (anonymous) @ main.dart.js:4113 $2 @ main.dart.js:24865 P @ main.dart.js:4099 ae6 @ main.dart.js:755 W7 @ main.dart.js:735 (anonymous) @ main.dart.js:27734 (anonymous) @ main.dart.js:4113 $2 @ main.dart.js:24865 P @ main.dart.js:4099 Cg @ main.dart.js:27736 $1 @ main.dart.js:27726 (anonymous) @ main.dart.js:17498 (anonymous) @ main.dart.js:4113 $2 @ main.dart.js:24865 P @ main.dart.js:4099 Cd @ main.dart.js:17503 $1 @ main.dart.js:17492 $1 @ main.dart.js:19585 a9e @ main.dart.js:2778 abY @ main.dart.js:5861 (anonymous) @ main.dart.js:5857 onEntrypointLoaded @ testweb/:61 didCreateEngineInitializer @ flutter.js:3 (anonymous) @ main.dart.js:6193 (anonymous) @ main.dart.js:4113 $2 @ main.dart.js:24865 P @ main.dart.js:4099 VL @ main.dart.js:6195 (anonymous) @ main.dart.js:17068 (anonymous) @ main.dart.js:4113 $2 @ main.dart.js:24865 P @ main.dart.js:4099 Wf @ main.dart.js:17070 (anonymous) @ main.dart.js:51780 (anonymous) @ main.dart.js:51776 dartProgram @ main.dart.js:51778 (anonymous) @ main.dart.js:51780 testweb/:1 Uncaught (in promise) null] ```

Flutter Doctor output

Doctor output ```console [flutter doctor Doctor summary (to see all details, run flutter doctor -v): [√] Flutter (Channel stable, 3.19.6, on Microsoft Windows [Version 10.0.19044.4046], locale en-US) [√] Windows Version (Installed version of Windows is version 10 or higher) [!] Android toolchain - develop for Android devices (Android SDK version 34.0.0) X cmdline-tools component is missing Run `path/to/sdkmanager --install "cmdline-tools;latest"` See https://developer.android.com/studio/command-line for more details. X Android license status unknown. Run `flutter doctor --android-licenses` to accept the SDK licenses. See https://flutter.dev/docs/get-started/install/windows#android-setup for more details. [√] Chrome - develop for the web [!] Visual Studio - develop Windows apps (Visual Studio Build Tools 2019 16.11.34) X The current Visual Studio installation is incomplete. Please use Visual Studio Installer to complete the installation or reinstall Visual Studio. [√] Android Studio (version 2023.1) [√] VS Code (version 1.88.1) [√] Connected device (4 available) [!] Network resources X A network error occurred while checking "https://maven.google.com/": The semaphore timeout period has expired. ! Doctor found issues in 3 categories.] ```
huycozy commented 2 weeks ago

Hi @nimashahahmadian I can't reproduce the issue on my end. The built web can run normally without error above. Could you share your sample code so I can try it? And which browser are you using?

nimashahahmadian commented 1 week ago

My sample code is flutter's original start project. the way to reproduce it is using build with the following commands:

flutter build web --no-web-resources-cdn --web-renderer canvaskit

I tried serving the build with local npm serve method and with apache on a remote server. when serving local with npm serve. some errors happen which I can not understand what it is but the app works through to my login page.

on remote server app won't even start. and crash with mentioned logs and errors.

what is the best practice to serve flutter web app using canvaskit build and not using any cdn?

huycozy commented 1 week ago

I hosted the build in local with Python, it works as expected:

Screenshot 2024-05-07 at 11 55 38

when serving local with npm serve. some errors happen which I can not understand what it is but the app works through to my login page.

It seems you are testing your production project. Please retry on a new Flutter project.

Could you try switching to Network tab on your browser and check the request URLs as in my screenshot?