Vuesax 4 Error: Cannot find module 'chalk'

Question

I want to create a web app with Vue 3 and use UI Framework Vuesax version 4. I'm trying to use vuesax@next (4.x) with Vue 3 and when I execute

npm install vuesax@next

I got an error

npm ERR! code 1
npm ERR! path C:\Users\Game launcher\Documents\Krew\krew-app\node_modules\vuesax
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node scripts/postinstall.js
npm ERR! node:internal/modules/cjs/loader:936
npm ERR!   throw err;
npm ERR!   ^
npm ERR!
npm ERR! Error: Cannot find module 'chalk'
npm ERR! Require stack:
npm ERR! - C:\Users\Game launcher\Documents\Krew\krew-app\node_modules\vuesax\scripts\postinstall.jsnpm ERR!     at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
npm ERR!     at Function.Module._load (node:internal/modules/cjs/loader:778:27)
npm ERR!     at Module.require (node:internal/modules/cjs/loader:1005:19)
npm ERR!     at require (node:internal/modules/cjs/helpers:102:18)
npm ERR!     at Object.<anonymous> (C:\Users\Game launcher\Documents\Krew\krew-app\node_modules\vuesax\scripts\postinstall.js:2:15)
npm ERR!     at Module._compile (node:internal/modules/cjs/loader:1101:14)
npm ERR!     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
npm ERR!     at Module.load (node:internal/modules/cjs/loader:981:32)
npm ERR!     at Function.Module._load (node:internal/modules/cjs/loader:822:12)
npm ERR!     at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12) {npm ERR!   code: 'MODULE_NOT_FOUND',
npm ERR!   requireStack: [
npm ERR!     'C:\\Users\\Game launcher\\Documents\\Krew\\krew-app\\node_modules\\vuesax\\scripts\\postinstall.js'
npm ERR!   ]
npm ERR! }

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Game launcher\AppData\Local\npm-cache\_logs\2022-05-28T15_23_21_860Z-debug-0.log

And when chalk is installed I got this error

npm ERR! code 1
npm ERR! path C:\Users\Game launcher\Documents\Krew\krew-app\node_modules\vuesax
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node scripts/postinstall.js
npm ERR! C:\Users\Game launcher\Documents\Krew\krew-app\node_modules\vuesax\scripts\postinstall.js:2npm ERR! const chalk = require('chalk')
npm ERR!               ^
npm ERR!
npm ERR! Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\Game launcher\Documents\Krew\krew-app\node_modules\chalk\source\index.js from C:\Users\Game launcher\Documents\Krew\krew-app\node_modules\vuesax\scripts\postinstall.js not supported.
npm ERR! Instead change the require of index.js in C:\Users\Game launcher\Documents\Krew\krew-app\node_modules\vuesax\scripts\postinstall.js to a dynamic import() which is available in all CommonJS modules.
npm ERR!     at Object.<anonymous> (C:\Users\Game launcher\Documents\Krew\krew-app\node_modules\vuesax\scripts\postinstall.js:2:15) {
npm ERR!   code: 'ERR_REQUIRE_ESM'
npm ERR! }

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Game launcher\AppData\Local\npm-cache\_logs\2022-05-28T15_27_11_833Z-debug-0.log

For information: npm install -g chalk not working

How to fix this ?

Answer 1

the newest chalk requires using ESM.

try with older version:

npm i chalk@4

reference: https://github.com/lusaxweb/vuesax-next/issues/256

Answer 2

This still happens with Macbook M1 Pro in 2023 while using Vue.js. None of the solution, commands here or old Github dicussions was able to fix the issue. Seems like upgrading is not the solution. Only way is to downgrade like below:

nvm install v14.21.2
nvm use v14.21.2

And then this final touch command, otherwise you would need to define nvm use version every time again:

nvm alias default v14.21.2

Note: If you do not have nvm installed yet. You can install with this command:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash