adding "type":"module" or "type":"commonjs" breaks the build - npm

When I deleted this "type", everything was building okey but my site got an error
Uncaught SyntaxError: Cannot use import statement outside a module (at index.js:1:1)
So I added "type":"module" to package.json but then I cannot build anymore, the error:
npm run build
> NewsJS#1.0.0 build C:\Users\ola12\Documents\git\news-JS\news-JS
> webpack --config ./webpack.config.js --env mode=prod
[webpack-cli] Failed to load 'C:\Users\ola12\Documents\git\news-JS\news-JS\webpack.config.js' config
[webpack-cli] ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and 'C:\Users\ola12\Documents\git\news-JS\news-JS\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
at file:///C:/Users/ola12/Documents/git/news-JS/news-JS/webpack.config.js:1:14
at ModuleJob.run (internal/modules/esm/module_job.js:169:25)
at async Loader.import (internal/modules/esm/loader.js:177:24)
at async WebpackCLI.tryRequireThenImport (C:\Users\ola12\Documents\git\news-JS\news-JS\node_modules\webpack-cli\lib\webpack-cli.js:254:18)
at async loadConfigByPath (C:\Users\ola12\Documents\git\news-JS\news-JS\node_modules\webpack-cli\lib\webpack-cli.js:1710:19)
at async Promise.all (index 0)
at async WebpackCLI.loadConfig (C:\Users\ola12\Documents\git\news-JS\news-JS\node_modules\webpack-cli\lib\webpack-cli.js:1763:29)
at async WebpackCLI.createCompiler (C:\Users\ola12\Documents\git\news-JS\news-JS\node_modules\webpack-cli\lib\webpack-cli.js:2185:18)
at async WebpackCLI.runWebpack (C:\Users\ola12\Documents\git\news-JS\news-JS\node_modules\webpack-cli\lib\webpack-cli.js:2321:16)
at async Command.<anonymous> (C:\Users\ola12\Documents\git\news-JS\news-JS\node_modules\webpack-cli\lib\webpack-cli.js:1058:13)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! NewsJS#1.0.0 build: `webpack --config ./webpack.config.js --env mode=prod`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the NewsJS#1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\ola12\AppData\Roaming\npm-cache\_logs\2023-02-14T10_34_55_775Z-debug.log

Related

"It is likely you do not have the permissions" when trying to launch the development server for WebAssembly + Vite + Vue

When I run yarn dev I get the following output:
yarn run v1.22.10
warning package.json: No license field
$ vite
πŸ¦€πŸ¦€πŸ¦€πŸ¦€πŸ¦€πŸ¦€πŸ¦€πŸ¦€πŸ¦€πŸ¦€πŸ¦€πŸ¦€πŸ¦€πŸ¦€πŸ¦€πŸ¦€πŸ¦€πŸ¦€πŸ¦€
⚑️⚑️ Hello RSW! ⚑️⚑️
⚑️⚑️ Vite + Rust πŸ’– WebAssembly ⚑️⚑️
πŸ¦€πŸ¦€πŸ¦€πŸ¦€πŸ¦€πŸ¦€πŸ¦€πŸ¦€πŸ¦€πŸ¦€πŸ¦€πŸ¦€πŸ¦€πŸ¦€πŸ¦€πŸ¦€πŸ¦€πŸ¦€πŸ¦€
vite-plugin-rsw (1.8.0)
[rsw::deploy] https://github.com/lencx/rsw-node
[rsw::optimized] wasm-pack build wasm.
up to date, audited 241 packages in 3s
7 packages are looking for funding
run `npm fund` for details
4 moderate severity vulnerabilities
To address all issues, run:
npm audit fix
Run `npm audit` for details.
npm ERR! code EACCES
npm ERR! syscall symlink
npm ERR! path ../../../home/isaachmi/projects/my-blackspace/wasm/pkg
npm ERR! dest /usr/lib/node_modules/wasm
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, symlink '../../../home/isaachmi/projects/my-blackspace/wasm/pkg' -> '/usr/lib/node_modules/wasm'
npm ERR! [Error: EACCES: permission denied, symlink '../../../home/isaachmi/projects/my-blackspace/wasm/pkg' -> '/usr/lib/node_modules/wasm'] {
npm ERR! errno: -13,
npm ERR! code: 'EACCES',
npm ERR! syscall: 'symlink',
npm ERR! path: '../../../home/isaachmi/projects/my-blackspace/wasm/pkg',
npm ERR! dest: '/usr/lib/node_modules/wasm'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/isaachmi/.npm/_logs/2021-07-21T14_44_01_966Z-debug.log
[rsw::npm::link]
↳ wasm /home/isaachmi/projects/my-blackspace/wasm/pkg
error when starting dev server:
Error: The following dependencies are imported but could not be resolved:
wasm (imported by /home/isaachmi/projects/my-blackspace/src/components/HelloWorld.vue)
Are they installed?
at optimizeDeps (/home/isaachmi/projects/my-blackspace/node_modules/vite/dist/node/chunks/dep-f2b4ca46.js:73091:15)
at runMicrotasks (<anonymous>)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async runOptimize (/home/isaachmi/projects/my-blackspace/node_modules/vite/dist/node/chunks/dep-f2b4ca46.js:73765:48)
at async Server.httpServer.listen (/home/isaachmi/projects/my-blackspace/node_modules/vite/dist/node/chunks/dep-f2b4ca46.js:73779:17)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
My WebAssembly package is called wasm and this is my vite configuration:
import { defineConfig } from "vite";
import vue from "#vitejs/plugin-vue";
import ViteRsw from "vite-plugin-rsw";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
ViteRsw({
crates: ["wasm"],
}),
],
});
I'm using a plugin for vite to use Rust and WebAssembly. I followed the example that they have with Vue3 but using my package. Am I doing something wrong?

I can't run vue project with Nuxt Fatal Error

When I run npm start I am getting an error.
FATAL No build files found in ..\client\.nuxt\dist\server. Use either `nuxt build` or `builder.build()` or start nuxt in development mode.
Use either `nuxt build` or `builder.build()` or start nuxt in development mode.
at VueRenderer._ready (node_modules\#nuxt\vue-renderer\dist\vue-renderer.js:758:13)
at async Server.ready (node_modules\#nuxt\server\dist\server.js:637:5)
at async Nuxt._init (node_modules\#nuxt\core\dist\core.js:482:7)
Nuxt Fatal Error
Error: No build files found in ..\client\.nuxt\dist\server.
Use either `nuxt build` or `builder.build()` or start nuxt in development mode.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! client#1.0.0 start: `nuxt start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the client#1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Vue version is #vue/cli 4.5.13.
I am vue.js beginner. What is reason? How can I fix it?
Thank you.
try npm run build after that you can use npm start.
alternatively, if you are developing and are not in production use npm run dev.

Vue: npm run serve crashes when a broken link is added

I have just started using Vue 3.
The npm run serve command works normally. However, once a broken link is added to the folder that npm is tracking, the npm run serve command crashes completely. It used to show any errors in the compiled Vue code and still keep running.
After removing the link, the npm run serve command can be run again to compile a working Vue project.
The crash log is as follows:
node:internal/process/promises:225
triggerUncaughtException(err, true /* fromPromise */);
^
[Error: ENOENT: no such file or directory, stat '/home/brandsma/main/work/projects/vue/portfolio_main/portfolio/src/components/.#navigation.vue'] {
errno: -2,
code: 'ENOENT',
syscall: 'stat',
path: '/home/brandsma/main/work/projects/vue/portfolio_main/portfolio/src/components/.#navigation.vue'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! portfolio#0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the portfolio#0.1.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/brandsma/.npm/_logs/2020-12-25T13_56_54_511Z-debug.log
It seems to be a problem with the stat command crashing after automatically trying to follow the broken link: .#navigation.vue.
.#{filename}.vue is a link/file created by spacemacs whenever a file is edited.
npm version:
6.14.10
Vue version:
#vue/cli 4.5.9
Anyone have any ideas how to fix this?
You can configure Webpack's dev server to ignore these files:
// vue.config.js
module.exports = {
devServer: {
watchOptions: {
ignored: ['**/.#*.vue', 'node_modules/**']
}
}
}

Prestashop classic theme _dev npm run watch say error

i'm new to prestashop theme development.
i try to setup the classic theme from prestashop github repo.
i go into _dev and run "npm install"
after that i run "npm run watch" but i get the following error:
npm run watch
> prestashop-classic-dev-tools#1.0.0 watch C:\laragon\www\PrestaShopDev\themes\prodet\_dev
> webpack --progress --colors --debug --display-chunks --watch
10% building modules 1/1 modules 0 active
webpack is watching the files…
(node:9136) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(Use `node --trace-deprecation ...` to show where the warning was created)
77% module and chunk tree optimization bound C:\laragon\www\PrestaShopDev\themes\node_modules\webpack\lib\Chunk.js:824
throw new Error(
^
Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
at Chunk.get (C:\laragon\www\PrestaShopDev\themes\node_modules\webpack\lib\Chunk.js:824:9)
at C:\laragon\www\PrestaShopDev\themes\prodet\_dev\node_modules\extract-text-webpack-plugin\index.js:260:40
at Array.forEach (<anonymous>)
at ExtractTextPlugin.<anonymous> (C:\laragon\www\PrestaShopDev\themes\prodet\_dev\node_modules\extract-text-webpack-plugin\index.js:255:11)
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\laragon\www\PrestaShopDev\themes\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:12:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (C:\laragon\www\PrestaShopDev\themes\node_modules\tapable\lib\Hook.js:35:21)
at Compilation.seal (C:\laragon\www\PrestaShopDev\themes\node_modules\webpack\lib\Compilation.js:1213:27)
at C:\laragon\www\PrestaShopDev\themes\node_modules\webpack\lib\Compiler.js:547:17
at eval (eval at create (C:\laragon\www\PrestaShopDev\themes\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:11:1)
at C:\laragon\www\PrestaShopDev\themes\node_modules\webpack\lib\Compilation.js:1064:12
at C:\laragon\www\PrestaShopDev\themes\node_modules\webpack\lib\Compilation.js:980:9
at processTicksAndRejections (internal/process/task_queues.js:75:11)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! prestashop-classic-dev-tools#1.0.0 watch: `webpack --progress --colors --debug --display-chunks --watch`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the prestashop-classic-dev-tools#1.0.0 watch script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\ADMIN\AppData\Roaming\npm-cache\_logs\2020-12-09T10_24_12_727Z-debug.log
how can i fix this?

ERROR Error: Using removed Babel 5 option:

I am working on Vue project. So far It was working for me.
After I install some packages, it doesn't work.
error is like :
ERROR Error: Using removed Babel 5 option: .modules - Use the corresponding module transform plugin in the `plugins` option. Check out http://babeljs.io/docs/plugins/#modules
Error: Using removed Babel 5 option: .modules - Use the corresponding module transform plugin in the `plugins` option. Check out http://babeljs.io/docs/plugins/#modules
at throwUnknownError (E:\booking_room\node_modules\#babel\core\lib\config\validation\options.js:121:11)
at Object.keys.forEach.key (E:\booking_room\node_modules\#babel\core\lib\config\validation\options.js:108:5)
at Array.forEach (<anonymous>)
at validateNested
(E:\booking_room\node_modules\#babel\core\lib\config\validation\options.js:84:21)
at validate
(E:\booking_room\node_modules\#babel\core\lib\config\validation\options.js:75:10)
at file
(E:\booking_room\node_modules\#babel\core\lib\config\config-chain.js:169:34)
at cachedFunction
(E:\booking_room\node_modules\#babel\core\lib\config\caching.js:62:27)
at cachedFunction.next (<anonymous>)
at evaluateSync
(E:\booking_room\node_modules\gensync\index.js:244:28)
at syn
(E:\booking_room\node_modules\gensync\index.js:84:14)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! booking_room#0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the booking_room#0.1.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\ASSASSIN\AppData\Roaming\npm-cache\_logs\2020-05-20T13_19_18_381Z-debug.log
babel.config.js:
module.exports = {
presets: [
'#vue/cli-plugin-babel/preset'
],
modules: ['bootstrap-vue/nuxt'],
bootstrapVue: {
bootstrapCSS: false,
bootstrapVueCSS: false
}
}
I am not sure what is the problem. please any suggestions.
I found the solution.
Because I used modules that removed Babel 5.
So I replaced plugins instead of modules.
it works for me.