ERROR(vue-tsc) 'with' statements are not allowed in strict mode.
fengjac opened this issue · comments
What happened?
PS D:\workspace\quasar-ssr-test> quasar dev -m ssr
.d88888b.
d88P" "Y88b
888 888
888 888 888 888 8888b. .d8888b 8888b. 888d888
888 888 888 888 "88b 88K "88b 888P"
888 Y8b 888 888 888 .d888888 "Y8888b. .d888888 888
Y88b.Y8b88P Y88b 888 888 888 X88 888 888 888
"Y888888" "Y88888 "Y888888 88888P' "Y888888 888
Y8b
The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
App • WAIT • Compiling of SSR Webserver with Esbuild in progress...
App • DONE • SSR Webserver compiled with success • 55ms
App • WAIT • Warming up...
[ESLint] Found 0 error and 0 warning
App • DONE • Warmed up • 9974ms
App • WAIT • Starting webserver...
App • DONE • Webserver is ready • 30ms
» Reported at............ 2024/3/13 16:45:20
» App dir................ D:\workspace\quasar-ssr-test
» App URL................ http://localhost:9100/
» Dev mode............... ssr
» Pkg quasar............. v2.15.0
» Pkg @quasar/app-vite... v1.8.0
» Browser target......... es2019|edge88|firefox78|chrome87|safari13.1
» Node target............ node20
App • Opening default browser at http://localhost:9100/
ERROR(vue-tsc) 'with' statements are not allowed in strict mode.
FILE D:/workspace/quasar-ssr-test/dist/ssr/render-template.js:4:1
2 | obj || (obj = {});
3 | var __t, __p = '';
> 4 | with (obj) {
| ^^^^
5 | __p += '<!DOCTYPE html><html ' +
6 | ((__t = ( _meta.htmlAttrs )) == null ? '' : __t) +
7 | '><head>' +
[vue-tsc] Found 1 error. Watching for file changes.
What did you expect to happen?
No error
Reproduction URL
https://github.com/fengjac/quasar-ssr-test
How to reproduce?
-
Create a new project:
$ pnpm create quasar √ What would you like to build? » App with Quasar CLI, let's go! √ Project folder: ... quasar-project √ Pick Quasar version: » Quasar v2 (Vue 3 | latest and greatest) √ Pick script type: » Typescript √ Pick Quasar App CLI variant: » Quasar App CLI with Vite 2 (stable | v1) √ Package name: ... quasar-project √ Project product name: (must start with letter if building mobile apps) ... Quasar App √ Project description: ... A Quasar Project √ Author: ... fengjac <fengjac@esquel.com> √ Pick a Vue component style: » Composition API with <script setup> √ Pick your CSS preprocessor: » Sass with SCSS syntax √ Check the features needed for your project: » Linting (vite-plugin-checker + ESLint + vue-tsc) √ Pick an ESLint preset: » Prettier -
$ quasar build -m ssr
-
$ quasar dev -m ssr
Flavour
Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)
Areas
SSR Mode
Platforms/Browsers
Chrome
Quasar info output
Operating System - Windows_NT(10.0.19041) - win32/x64
NodeJs - 18.17.1
Global packages
NPM - 9.6.7
yarn - 1.22.19
@quasar/cli - 2.4.0
@quasar/icongenie - Not installed
cordova - Not installed
Important local packages
quasar - 2.15.0 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
@quasar/app-vite - 1.8.0 -- Quasar Framework App CLI with Vite
@quasar/extras - 1.16.9 -- Quasar Framework fonts, icons and animations
eslint-plugin-quasar - Not installed
vue - 3.4.21 -- The progressive JavaScript framework for building modern web UI.
vue-router - 4.3.0
pinia - Not installed
vuex - Not installed
vite - 2.9.17 -- Native-ESM powered web dev build tool
eslint - 8.57.0 -- An AST-based pattern checker for JavaScript.
electron - Not installed
electron-packager - Not installed
electron-builder - Not installed
register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
@capacitor/core - Not installed
@capacitor/cli - Not installed
@capacitor/android - Not installed
@capacitor/ios - Not installed
Quasar App Extensions
*None installed*Relevant log output
No response
Additional context
No response
Just dropping a note: this has been fixed for the q/app-vite beta (v2) and q/app-webpack beta (v5) (the "other" sibling options when asked about the "Pick Quasar App CLI variant"), which we'll soon start to recommend over the current q/app-vite & q/app-webpack versions.
One more thing until I figure out what can be done, should someone still go ahead with TS and current stable versions of q/app-* --> you will need to manually delete the dist/ssr/render-template.js file (or run "quasar clean" before "quasar dev") so that vue-tsc won't pick it up.
There is no chance the superior implementation from the q/app-* betas to get implemented in the current stable versions because this will introduce a breaking change. So looking for alternatives.
Seems like the exclude option supplied by q/app-* is not correctly interpreted, though it should.
Final solution for anyone reading: add the following to your /tsconfig.json:
{
//....
"exclude": ["./dist", "./.quasar", "./node_modules"]
}
Fixed it like this in create-quasar (the script that scaffolds the project folder).
Update with the full list of exclusions:
"exclude": [
"./dist",
"./.quasar",
"./node_modules",
"./src-capacitor",
"./src-cordova",
"./quasar.config.*.temporary.compiled*"
]