JuniorTour / vue-template-babel-compiler

Enable Optional Chaining(?.), Nullish Coalescing(??) and many new ES syntax for Vue.js SFC based on Babel
https://www.npmjs.com/package/vue-template-babel-compiler
118 stars 9 forks source link

[Feature] NuxtJS server side rendering support #7

Closed eugen1j closed 2 years ago

eugen1j commented 2 years ago

Do you have any plans to add server side rendering support?

I've tried to change ssr: true for nuxt.config.js in Demo Nuxt.js project and got a compile error.

Error details ``` $> yarn build yarn run v1.22.10 $ nuxt build ℹ Production build 19:04:54 ℹ Bundling for server and client side 19:04:54 ℹ Target: static 19:04:54 ℹ Using components loader to optimize imports 19:04:54 ℹ Discovered Components: .nuxt/components/readme.md 19:04:54 ✔ Builder initialized 19:04:54 ✔ Nuxt files generated 19:04:54 ✔ Client Compiled successfully in 6.29s ✖ Server Compiled with some errors in 537.80ms Hash: 5ed4402cc1e1c388c3e0 Version: webpack 4.46.0 Time: 538ms Built at: 08/29/2021 7:05:02 PM Asset Size Chunks Chunk Names components/nuxt-logo.js 5.89 KiB 1 components/nuxt-logo components/tutorial.js 6.84 KiB 2 components/tutorial pages/index.js 8.53 KiB 3, 2 pages/index server.js 80.6 KiB 0 app + 4 hidden assets Entrypoint app = server.js server.js.map ERROR in ./components/Tutorial.vue?vue&type=template&id=54971afc& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./components/Tutorial.vue?vue&type=template&id=54971afc&) Module build failed (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): SyntaxError: Unexpected token (1:3663) at Parser.pp$4.raise (/Users/macbook/WebstormProjects/vue-template-babel-compiler-nuxt-project/node_modules/vue-template-es2015-compiler/buble.js:2757:13) at Parser.pp.unexpected (/Users/macbook/WebstormProjects/vue-template-babel-compiler-nuxt-project/node_modules/vue-template-es2015-compiler/buble.js:647:8) at Parser.pp$3.parseExprAtom (/Users/macbook/WebstormProjects/vue-template-babel-compiler-nuxt-project/node_modules/vue-template-es2015-compiler/buble.js:2196:10) at Parser. (/Users/macbook/WebstormProjects/vue-template-babel-compiler-nuxt-project/node_modules/vue-template-es2015-compiler/buble.js:6003:24) at Parser.parseExprAtom (/Users/macbook/WebstormProjects/vue-template-babel-compiler-nuxt-project/node_modules/vue-template-es2015-compiler/buble.js:6129:31) at Parser.pp$3.parseExprSubscripts (/Users/macbook/WebstormProjects/vue-template-babel-compiler-nuxt-project/node_modules/vue-template-es2015-compiler/buble.js:2047:19) at Parser.pp$3.parseMaybeUnary (/Users/macbook/WebstormProjects/vue-template-babel-compiler-nuxt-project/node_modules/vue-template-es2015-compiler/buble.js:2024:17) at Parser.pp$3.parseExprOps (/Users/macbook/WebstormProjects/vue-template-babel-compiler-nuxt-project/node_modules/vue-template-es2015-compiler/buble.js:1966:19) at Parser.pp$3.parseMaybeConditional (/Users/macbook/WebstormProjects/vue-template-babel-compiler-nuxt-project/node_modules/vue-template-es2015-compiler/buble.js:1949:19) at Parser.pp$3.parseMaybeAssign (/Users/macbook/WebstormProjects/vue-template-babel-compiler-nuxt-project/node_modules/vue-template-es2015-compiler/buble.js:1925:19) at Parser.pp$3.parseMaybeConditional (/Users/macbook/WebstormProjects/vue-template-babel-compiler-nuxt-project/node_modules/vue-template-es2015-compiler/buble.js:1954:28) at Parser.pp$3.parseMaybeAssign (/Users/macbook/WebstormProjects/vue-template-babel-compiler-nuxt-project/node_modules/vue-template-es2015-compiler/buble.js:1925:19) at Parser.pp$3.parseExprList (/Users/macbook/WebstormProjects/vue-template-babel-compiler-nuxt-project/node_modules/vue-template-es2015-compiler/buble.js:2663:20) at Parser.pp$3.parseSubscripts (/Users/macbook/WebstormProjects/vue-template-babel-compiler-nuxt-project/node_modules/vue-template-es2015-compiler/buble.js:2075:29) at Parser.pp$3.parseExprSubscripts (/Users/macbook/WebstormProjects/vue-template-babel-compiler-nuxt-project/node_modules/vue-template-es2015-compiler/buble.js:2050:21) at Parser.pp$3.parseMaybeUnary (/Users/macbook/WebstormProjects/vue-template-babel-compiler-nuxt-project/node_modules/vue-template-es2015-compiler/buble.js:2024:17) @ ./components/Tutorial.vue?vue&type=template&id=54971afc& 1:0-258 1:0-258 @ ./components/Tutorial.vue @ ./.nuxt/components/plugin.js @ ./.nuxt/index.js @ ./.nuxt/server.js @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/server.js Hash: 9418a4671194c9a47db9 Version: webpack 4.46.0 Time: 6288ms Built at: 08/29/2021 7:05:01 PM Asset Size Chunks Chunk Names ../server/client.manifest.json 8.37 KiB [emitted] 49aa76d.js 199 KiB 1 [emitted] [immutable] commons/app 5b69c18.js 2.32 KiB 5 [emitted] [immutable] runtime 643dd80.js 7.36 KiB 4, 3 [emitted] [immutable] pages/index 85598a0.js 57.2 KiB 0 [emitted] [immutable] app 9496627.js 7.1 KiB 3 [emitted] [immutable] components/tutorial LICENSES 407 bytes [emitted] aba0182.js 1.85 KiB 2 [emitted] [immutable] components/nuxt-logo + 2 hidden assets Entrypoint app = 5b69c18.js 49aa76d.js 85598a0.js FATAL Nuxt build error 19:05:02 at WebpackBundler.webpackCompile (node_modules/@nuxt/webpack/dist/webpack.js:2127:21) at processTicksAndRejections (node:internal/process/task_queues:96:5) at async WebpackBundler.build (node_modules/@nuxt/webpack/dist/webpack.js:2076:5) at async Builder.build (node_modules/@nuxt/builder/dist/builder.js:327:5) at async Object.run (node_modules/@nuxt/cli/dist/cli-build.js:110:7) at async NuxtCommand.run (node_modules/@nuxt/cli/dist/cli-index.js:413:7) ╭─────────────────────────────╮ │ │ │ ✖ Nuxt Fatal Error │ │ │ │ Error: Nuxt build error │ │ │ ╰─────────────────────────────╯ error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. ```
JuniorTour commented 2 years ago

It is a bug, I just published a new version 1.0.3 to fix.

You can try it by:

npm install vue-template-babel-compiler@1.0.3 -D
// or yarn
yarn add vue-template-babel-compiler@1.0.3 -D

Now this compiler will work for SSR too!

8b40e54c646984a92edb58ac2fcf7b4

I also update vue-template-babel-compiler-nuxt-project

Thank you for your feedback! :thumbsup:

eugen1j commented 2 years ago

It works, thank you 🎉