q/app npm v7 compilation issue

mfinity168 commented 3 years ago

Hi! I found error. I created quasar v2 project step by step from quasar v2 docs Then "cd myproject" run command "quasar dev" wait for running Error message

Dev mode.......... spa Pkg quasar........ v2.0.0-beta.15 Pkg @quasar/app... v3.0.0-beta.20 Pkg webpack....... v5 Debugging......... enabled

Configured browser support (>= 87.68% of global marketshare): · Chrome for Android >= 90 · Firefox for Android >= 87 · Android >= 90 · Chrome >= 80 · Edge >= 87 · Firefox >= 79 · iOS >= 11.0-11.2 · Opera >= 71 · Safari >= 11.1

App • ⚠️ ️️Setting port to closest one available: 8081

App • Chaining "UI" Webpack config App • WAIT • Compiling of "UI" in progress... (node:3581) UnhandledPromiseRejectionWarning: TypeError: The 'compilation' argument must be an instance of Compilation

NormalModule.js:181 Function.getCompilationHooks [qs-v2-2]/[webpack]/lib/NormalModule.js:181:10
pluginWebpack5.js:37 [qs-v2-2]/[vue-loader]/dist/pluginWebpack5.js:37:26
Hook.js:14 Hook.CALL_DELEGATE [as _call] [qs-v2-2]/[tapable]/lib/Hook.js:14:14
Compiler.js:1017 Compiler.newCompilation [qs-v2-2]/[app]/[webpack]/lib/Compiler.js:1017:26
Compiler.js:1059 [qs-v2-2]/[app]/[webpack]/lib/Compiler.js:1059:29
Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync] [qs-v2-2]/[tapable]/lib/Hook.js:18:14
Compiler.js:1054 Compiler.compile [qs-v2-2]/[app]/[webpack]/lib/Compiler.js:1054:28
Watching.js:134 [qs-v2-2]/[app]/[webpack]/lib/Watching.js:134:19

(Use node --trace-warnings ... to show where the warning was created) (node:3581) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1) (node:3581) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Thanks

jonathanpmartins commented 3 years ago

I have an app that worked fine until I tried to update to last beta. It broke with this same error!

I think this problem was introduced in beta.16. Try to update you package.json file and force the 3.0.0-beta.15 version. Perhaps it will solve your problem!

Working:

"devDependencies": {
  "@quasar/app": "3.0.0-beta.15",
},

Not Working:

"devDependencies": {
  "@quasar/app": "3.0.0-beta.20",
},

M0nik commented 3 years ago

Faced the same problem. Using yarn helped. However, even when using it, this error sometimes occurs. It helps to run yarn upgrade again

metalsadman commented 3 years ago

always use yarn for local. and no, just tested not having that error.

$ quasar dev

 Dev mode.......... spa
 Pkg quasar........ v2.0.0-beta.15
 Pkg @quasar/app... v3.0.0-beta.20
 Pkg webpack....... v5
 Debugging......... enabled

 Configured browser support (>= 87.68% of global marketshare):
 · Chrome for Android >= 90
 · Firefox for Android >= 87
 · Android >= 90
 · Chrome >= 80
 · Edge >= 87
 · Firefox >= 79
 · iOS >= 11.0-11.2
 · Opera >= 71
 · Safari >= 11.1

 App • ⚠️  ️️Setting port to closest one available: 8081

 App • Chaining "UI" Webpack config
 App •  WAIT  • Compiling of "UI" in progress...
 App •  DONE  • "UI" compiled with success • 8060ms

 App •  READY  • Compiled: "UI"

 » App dir........... E:\BACKUP_D\web-samps\new-test
 » App URL........... http://192.168.254.102:8081
                      http://localhost:8081
 » Dev mode.......... spa
 » Pkg quasar........ v2.0.0-beta.15
 » Pkg @quasar/app... v3.0.0-beta.20
 » Transpiled JS..... yes (Babel)

also post your quasar info logs

$ quasar info

Operating System - Windows_NT(10.0.19041) - win32/x64
NodeJs - 12.22.1

Global packages
  NPM - 6.9.0
  yarn - 1.22.10
  @quasar/cli - 1.1.3
  @quasar/icongenie - Not installed
  cordova - 9.0.0 (cordova-lib@9.0.1)

Important local packages
  quasar - 2.0.0-beta.15 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app - 3.0.0-beta.20 -- Quasar Framework local CLI
  @quasar/extras - 1.10.4 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.0.11 -- vue
  vue-router - 4.0.5
  vuex - 4.0.0 -- state management for Vue.js
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.14.0 -- Babel compiler core.
  webpack - 5.35.0 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 4.0.0-beta.2 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 4.2.2 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

mfinity168 commented 3 years ago

I have an app that worked fine until I tried to update to last beta. It broke with this same error!

I think this problem was introduced in beta.16. Try to update you package.json file and force the 3.0.0-beta.15 version. Perhaps it will solve your problem!

Working:
"devDependencies": {
  "@quasar/app": "3.0.0-beta.15",
},
Not Working:
"devDependencies": {
  "@quasar/app": "3.0.0-beta.20",
},

Thanks

jonathanpmartins commented 3 years ago

Yes, this error occurs when using NPM 7 to install node_modules.

always use yarn for local.

why?

If there is an option to use NPM on Quasar setup, shouldn't it work properly? Why should I be forced to pick Yarn? Is this just a temporary (beta) thing, or this recommendation will apply on v2 stable too?

I've been using NPM with Quasar in local development for a long time

Sacrekin commented 3 years ago

This is likely due to the migration to Webpack 5 in the latest release. The only way I could fix it is to create a new project with the updated version & move my code to this new project. Now everything works fine.

IlCallo commented 3 years ago

Can all of you upgrade t NPM 7.11.2, refresh node_modules and package lock and retry?

Smrtnyk commented 3 years ago

also after you upgrade to beta version that uses webpack 5 delete .quasar folder also

I am using npm with quasar whole time and never had a single issue with it

rstoenescu commented 3 years ago

Hi All,

Best practice (and sorry for the caps): ALWAYS READ THE RELEASE NOTES (especially while we're on beta).

I specifically wrote that you might need to delete node_modules and yarn.lock/package-lock.json files because of NPM/Yarn not correctly updating its cache. This is not a Quasar issue and you DON'T need to create a new project to port your current one over.

You're not forced to use Yarn, but from our own experience over the years, it manages the dependencies far better, which is why we recommend it. At the end of the day, NPM and Yarn are just tools to help you install the necessary packages being used by your app. Does a package manager really matter more than your productivity and your app's features?

It really saddens me to read about these problems caused by external tools and Quasar getting the hammer for them.

Please report back if deleting node_modules AND yarn.lock/package-lock.json THEN yarn/npm installing does not fixes the problem for you.

mfinity168 commented 3 years ago

Quasar v2-beta.15 create new project. It not work for NPM v7

I try to downgrade NPM v7 to NPM v6 and create new project

IT Work!

Thanks

jonathanpmartins commented 3 years ago

No problem to changes, in fact, I use Yarn all over the place. I just guess, when I create a new project, if there is and option to use NPM, it should work, otherwise why is it there?

I thought that this was the best time to report problems, the framework is upgrading, we are in beta stage...

I lifted the flag to QUASAR because the only thing that I changed to trigger this very same problem, was update from beta.15 to beta.16. Rolling it back solved the problem in my case. Again, we are in beta and I understand that this things happen. I'm not here to hammer my favorite framework, I was just trying to help. Aren't we all beta testers?

I understand that you guys are sick of non Quasar related issues, but this is the baggage that popular framework carry. Congratulations! heheheh

If I encounter a problem (quasar related or not), I should not say that it is a Quasar problem? Otherwise I'm hammering it? This seems to be a very stressed point of view! heheheh Again, I was just trying to help! If I'm wrong, please correct me, but don't get sad! Help me be a better community member!

"Use Yarn instead" does not solve the real problem, it pushes the developer to use a specific tool!

@rstoenescu I'm really sorry, I wasn't clear enough! The correct would be:

I have a v2 (beta) app that worked fine until I tried to update to last beta. It broke with this same error!

Let's see if I can be more clear about the problem that I'm facing. I'm not trying to update an old project, I'm trying to create a new one using CLI.

Globals

$ npm -v
7.11.2

$ node -v
v14.16.0

$ quasar -v
1.1.3

New Project

quasar create quasar-v2 --branch next

Project Options

? Project name (internal usage for dev) quasar-v2 ? Project product name (must start with letter if building mobile apps) Quasar App ? Project description A Quasar Framework app ? Author Jonathan Martins web@jonathanmartins.com.br ? Pick your CSS preprocessor: SCSS ? Check the features needed for your project: ESLint (recommended), Vuex, Axios, Vue-i18n ? Pick an ESLint preset: Airbnb ? Continue to install project dependencies after the project has been created? (recommended) NPM

Before the installation ends, it tries to run eslint --ext .js,.vue ./ "--fix" and got stuck in error, the result is the following:

  Quasar CLI · Generated "quasar-v2".

 [*] Installing project dependencies ...

added 1114 packages, and audited 1115 packages in 1m

131 packages are looking for funding
  run `npm fund` for details

6 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

 [*] Running eslint --fix to comply with chosen preset rules...

> quasar-v2@0.0.1 lint
> eslint --ext .js,.vue ./ "--fix"

~/quasar-v2/src/router/index.js
  17:25  error  Do not nest ternary expressions  no-nested-ternary

~/quasar-v2/src/store/module-example/state.js
  1:16  warning  Unexpected unnamed function  func-names

✖ 2 problems (1 error, 1 warning)

 npm install FAILED... Possible temporary npm registry issues?
 Please try again later...

Could this be related to the original problem? After the linter ignore lines were inserted, I try to run quasar dev:

 Dev mode.......... spa
 Pkg quasar........ v2.0.0-beta.15
 Pkg @quasar/app... v3.0.0-beta.20
 Pkg webpack....... v5
 Debugging......... enabled

 Configured browser support (>= 87.68% of global marketshare):
 · Chrome for Android >= 90
 · Firefox for Android >= 87
 · Android >= 90
 · Chrome >= 80
 · Edge >= 87
 · Firefox >= 79
 · iOS >= 11.0-11.2
 · Opera >= 71
 · Safari >= 11.1

 App • Chaining "UI" Webpack config
 App • ⚠️  'store' feature flag was missing and has been regenerated
 App •  WAIT  • Compiling of "UI" in progress...
(node:20227) UnhandledPromiseRejectionWarning:   TypeError: The 'compilation' argument must be an instance of Compilation

  - NormalModule.js:181 Function.getCompilationHooks
    [quasar-v2]/[webpack]/lib/NormalModule.js:181:10

  - pluginWebpack5.js:37 
    [quasar-v2]/[vue-loader]/dist/pluginWebpack5.js:37:26

  - Hook.js:14 Hook.CALL_DELEGATE [as _call]
    [quasar-v2]/[tapable]/lib/Hook.js:14:14

  - Compiler.js:1017 Compiler.newCompilation
    [quasar-v2]/[app]/[webpack]/lib/Compiler.js:1017:26

  - Compiler.js:1059 
    [quasar-v2]/[app]/[webpack]/lib/Compiler.js:1059:29

  - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
    [quasar-v2]/[tapable]/lib/Hook.js:18:14

  - Compiler.js:1054 Compiler.compile
    [quasar-v2]/[app]/[webpack]/lib/Compiler.js:1054:28

  - Watching.js:134 
    [quasar-v2]/[app]/[webpack]/lib/Watching.js:134:19

(Use `node --trace-warnings ...` to show where the warning was created)
(node:20227) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:20227) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

 • Compiling:
 └── UI ██                   9% setup compilation vue-loader-plugin

^C^C

This process get stuck and I cannot exit with Ctrl+C. I need to close the terminal and reopen it.

Lets gather more information with quasar info:

Operating System - Linux(5.4.0-67-generic) - linux/x64
NodeJs - 14.16.0

Global packages
  NPM - 7.11.2
  yarn - 1.22.5
  @quasar/cli - 1.1.3
  @quasar/icongenie - 2.3.3
  cordova - Not installed

Important local packages
  quasar - 2.0.0-beta.15 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app - 3.0.0-beta.20 -- Quasar Framework local CLI
  @quasar/extras - 1.10.4 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.0.11 -- vue
  vue-router - 4.0.5
  vuex - 4.0.0 -- state management for Vue.js
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.14.0 -- Babel compiler core.
  webpack - 5.36.2 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 4.0.0-beta.2 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 4.2.2 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

The installed @quasar/app is v3.0.0-beta.20. Lets try to donwgrade it to v3.0.0-beta.15:

"devDependencies": {
  "@quasar/app": "3.0.0-beta.15"
},

$ npm update

$ quasar dev

 Dev mode.......... spa
 Pkg quasar........ v2.0.0-beta.15
 Pkg @quasar/app... v3.0.0-beta.15
 Debugging......... enabled

 Configured browser support (at least 87.68% of global marketshare):
 · Chrome for Android >= 90
 · Firefox for Android >= 87
 · Android >= 90
 · Chrome >= 80
 · Edge >= 87
 · Firefox >= 79
 · iOS >= 11.0-11.2
 · Opera >= 71
 · Safari >= 11.1

 App · Reading quasar.conf.js
 App · Checking listening address availability (0.0.0.0:8080)...
 App · Transpiling JS (Babel active)
 App · Chaining SPA Webpack config
 App · Generating Webpack entry point
 App · Booting up...

 • Compiling:
 └── SPA ████████████████████ 100% done in 6017 ms

 DONE  Compiled successfully in 6077ms                                                                                                          12:45:46 AM

 N  App dir........... ~/quasar-v2
    App URL........... http://localhost:8080
    Dev mode.......... spa
    Pkg quasar........ v2.0.0-beta.15
    Pkg @quasar/app... v3.0.0-beta.15
    Transpiled JS..... yes (Babel)

ℹ ｢wds｣: Project is running at http://0.0.0.0:8080/
ℹ ｢wds｣: webpack output is served from 
 App · The devserver is ready to be used
 App · Opening default browser at http://localhost:8080

It works... Lets run quasar info again:

Operating System - Linux(5.4.0-67-generic) - linux/x64
NodeJs - 14.16.0

Global packages
  NPM - 7.11.2
  yarn - 1.22.5
  @quasar/cli - 1.1.3
  @quasar/icongenie - 2.3.3
  cordova - Not installed

Important local packages
  quasar - 2.0.0-beta.15 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app - 3.0.0-beta.15 -- Quasar Framework local CLI
  @quasar/extras - 1.10.4 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.0.11 -- vue
  vue-router - 4.0.5
  vuex - 4.0.0 -- state management for Vue.js
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.14.0 -- Babel compiler core.
  webpack - 4.44.1 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 3.11.2 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 4.2.2 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Now its the time to upgrade to v3.0.0-beta.16:

"devDependencies": {
  "@quasar/app": "3.0.0-beta.16"
},

$ npm update

$ quasar dev

 Dev mode.......... spa
 Pkg quasar........ v2.0.0-beta.15
 Pkg @quasar/app... v3.0.0-beta.16
 Pkg webpack....... v5
 Debugging......... enabled

 Configured browser support (at least 87.68% of global marketshare):
 · Chrome for Android >= 90
 · Firefox for Android >= 87
 · Android >= 90
 · Chrome >= 80
 · Edge >= 87
 · Firefox >= 79
 · iOS >= 11.0-11.2
 · Opera >= 71
 · Safari >= 11.1

 App • ⚠️  ️️Setting port to closest one available: 8081

 App • Chaining "UI" Webpack config
 App •  WAIT  • Compiling of "UI" in progress...
(node:23016) UnhandledPromiseRejectionWarning:   TypeError: The 'compilation' argument must be an instance of Compilation

  - NormalModule.js:181 Function.getCompilationHooks
    [quasar-v2]/[webpack]/lib/NormalModule.js:181:10

  - pluginWebpack5.js:37 
    [quasar-v2]/[vue-loader]/dist/pluginWebpack5.js:37:26

  - Hook.js:14 Hook.CALL_DELEGATE [as _call]
    [quasar-v2]/[tapable]/lib/Hook.js:14:14

  - Compiler.js:1017 Compiler.newCompilation
    [quasar-v2]/[app]/[webpack]/lib/Compiler.js:1017:26

  - Compiler.js:1059 
    [quasar-v2]/[app]/[webpack]/lib/Compiler.js:1059:29

  - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
    [quasar-v2]/[tapable]/lib/Hook.js:18:14

  - Compiler.js:1054 Compiler.compile
    [quasar-v2]/[app]/[webpack]/lib/Compiler.js:1054:28

  - Watching.js:134 
    [quasar-v2]/[app]/[webpack]/lib/Watching.js:134:19

(Use `node --trace-warnings ...` to show where the warning was created)
(node:23016) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:23016) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

 • Compiling:
 └── UI ██                   9% setup compilation vue-loader-plugin

And I'm stuck again!

This is the reason that I thought it was probably related to a change made in beta.16. At this point I'm not sure what happened, probably something related to the upgrade to webpack 5...

But the feeling is: - "better not post anything here anymore"! hehehe

IlCallo commented 3 years ago

But the feeling is: - "better not post anything here anymore"! hehehe

Please don't follow this feeling :) Actually, a clean and precise description as you provided in the last post is really valuable to us to understand where the problem lies.

I'll reopen the issue, as this seems a bug with latest Node + NPM versions and some strange interaction with ESLint at some point. Right now our priority is to ship Quasar v2 as stable, we'll try to make it work with latest Node and NPM versions soon after that.

In the meantime we can just suggest you to downgrade NPM to v6 or use yarn

therealcoder1337 commented 3 years ago

(imo) duplicate of: https://github.com/quasarframework/quasar/issues/9092 you should be able to use npm 6 or yarn as a workaround, until this is fixed.

rstoenescu commented 3 years ago

Pushed a workaround for an issue in npm v7. Available in "@quasar/app" v3.0.0-beta.21 (just released it now).

quasarframework / quasar