Cannot find module 'prettier' - node.js

I updated all packages but still getting this error after running npm run serve:
Module build failed (from ./node_modules/eslint-loader/index.js):
Error: Cannot find module 'prettier' Occurred while linting /home
My package.json
{
"name": "app",
"version": "0.1.0",
"private": false,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.2.1",
"firebase": "^7.0.0",
"material-icons": "^0.3.1",
"register-service-worker": "^1.6.2",
"vue": "^2.6.10",
"vue-flickity": "^1.2.1",
"vue-router": "^3.1.3",
"vuetify": "^2.0.19",
"vuex": "^3.1.1"
},
"devDependencies": {
"#mdi/font": "^4.4.95",
"#vue/cli-plugin-babel": "^3.11.0",
"#vue/cli-plugin-eslint": "^3.11.0",
"#vue/cli-plugin-pwa": "^3.11.0",
"#vue/cli-service": "^3.11.0",
"#vue/eslint-config-prettier": "^5.0.0",
"babel-eslint": "^10.0.3",
"eslint": "^6.4.0",
"eslint-plugin-vue": "^5.2.3",
"material-design-icons-iconfont": "^5.0.1",
"stylus": "^0.54.7",
"stylus-loader": "^3.0.2",
"uglifyjs-webpack-plugin": "^2.2.0",
"vue-cli-plugin-vuetify": "^0.6.3",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.3.0",
"webpack": "^4.41.0",
"webpack-cli": "^3.3.9"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"#vue/prettier"
],
"rules": {
"no-console": "off"
},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
**"#vue/eslint-config-prettier": "^5.0.0",** is listed in the dependencies. How to fix this issue? (I'm using VSCODE on Ubuntu)
I tried multiple times deleting package-lock.json and node_modules and running npm install afterwards. Nothing fixes it - even updating all packages globally.

Prettier is a peer dependency of
#vue/eslint-config-prettier so you need to add it to your own dependencies:
npm install --save-dev prettier

With NPM
npm install --save-dev prettier
With Yarn
yarn add --dev prettier

if you're using yarn 3, and yarn add --dev prettier doesn't solve your problem, try this:
cmd + shift + p
in the dropdown, search for preferences: open user settings (json)
add "prettier.prettierPath": ".yarn/sdks/prettier/index.js" to your json file.
This tells your editor to find the module in the path you added.

Related

Cannot get NodeJS Vue app to run on Windows due to Vue CLI Service

I cannot get a codebase to run on Windows 11. It works without any issues on MacOS and Ubuntu, as long as the Node version (14.15.5) is correct. Also works in production running on Heroku.
Judging by the console outputs, it seems the Node server starts successfully, connects to MongoDB, connects to Redis. So as far as I can tell, it's something to do with Vue or Vue CLI. The version of Vue in use is 2.6.12.
Error is triggered at vue cli service serve. Node version is correct. Tried to install Vue CLI globally too (using npm). What could be causing this?
Error logs:
Vue package.json:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"bundle-report": "webpack-bundle-analyzer --port 4200 dist/stats.json"
},
"dependencies": {
"#ckeditor/ckeditor5-build-decoupled-document": "^18.0.0",
"#ckeditor/ckeditor5-vue": "^1.0.3",
"#fingerprintjs/fingerprintjs": "^3.3.2",
"#fingerprintjs/fingerprintjs-pro": "^3.7.1",
"#johmun/vue-tags-input": "^2.1.0",
"#vue/composition-api": "^1.0.0-rc.3",
"autolinker": "^3.14.2",
"axios": "^0.21.1",
"core-js": "^3.8.2",
"date-fns": "^2.28.0",
"detectrtc": "^1.4.1",
"gsap": "^3.6.0",
"imagekit-javascript": "^1.5.2",
"imagekitio-vue": "^1.0.9",
"ismobilejs": "^1.1.1",
"just-detect-adblock": "^1.1.0",
"jwt-decode": "^2.2.0",
"maxlength-contenteditable": "^1.0.1",
"socket.io-client": "^4.5.2",
"timeme.js": "^2.1.0",
"twilio-video": "^2.18.3",
"v-hotkey": "^0.8.0",
"vue": "^2.6.12",
"vue-color": "^2.8.1",
"vue-gtag": "^1.16.1",
"vue-i18n": "^8.22.4",
"vue-infinite-loading": "^2.4.5",
"vue-router": "^3.4.9",
"vue-select": "^3.18.3",
"vue-smooth-dnd": "^0.8.1",
"vue-vimeo-player": "^0.2.2",
"vue-window-size": "^1.0.3",
"vue-youtube": "^1.4.0",
"vuejs-datepicker": "^1.6.2",
"vuex": "^3.6.0",
"webrtc-adapter-test": "^0.2.10"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.3.0",
"#vue/cli-plugin-eslint": "~4.3.0",
"#vue/cli-service": "~4.3.0",
"babel-eslint": "^10.1.0",
"dotenv-webpack": "^5.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"node-sass": "^4.14.1",
"sass-loader": "^9.0.3",
"vue-template-compiler": "^2.6.12",
"webpack-bundle-analyzer": "^4.4.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

process nodejs undefined into bindings.js with Electron project (and better-sqlite3)

I created a Electron.js project like that :
install node 14
install vue-cli
create template project vue with : vue create myproject
install electron wrapper like this : vue add electron builder
install better-sqlite3 library
And when I run this command : npm run electron:serve
I have an error into inspect of browser electron like this :
Uncaught TypeError: Cannot read property 'modules' of undefined
at Object.eval (bindings.js?dfc1:29)
at eval (bindings.js:223)
at Object../node_modules/bindings/bindings.js (chunk-vendors.js:142)
at __webpack_require__ (app.js:854)
at fn (app.js:151)
at eval (database.js?4c26:9)
at Object../node_modules/better-sqlite3/lib/database.js (chunk-vendors.js:59)
at __webpack_require__ (app.js:854)
at fn (app.js:151)
at eval (index.js?f4f1:2)
and if I enter into bindings.js code I can find where is the error :
nodePreGyp:
'node-v' +
process.versions.modules** +
The loader of this file don't know process env variable of nodejs.
Why node js doesn't knowing it's process variable, it's strange ?
If Electron to do well to start browser, the issue is around the renderer process ?
But it seems to be better-sqlite3 module is concerned because error start with loading this library with webpack ?
there is my package.json file :
{
"name": "electron-project",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"lint": "vue-cli-service lint",
"electron:build": "vue-cli-service electron:build",
"electron:serve": "vue-cli-service electron:serve",
"postinstall": "electron-builder install-app-deps",
"postuninstall": "electron-builder install-app-deps"
},
"main": "background.js",
"dependencies": {
"#types/better-sqlite3": "^5.4.1",
"better-sqlite3": "^7.1.1",
"core-js": "^3.6.5",
"node-sass": "4.14.1",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"#types/chai": "^4.2.11",
"#types/electron-devtools-installer": "^2.2.0",
"#types/mocha": "^5.2.4",
"#typescript-eslint/eslint-plugin": "^2.33.0",
"#typescript-eslint/parser": "^2.33.0",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-e2e-cypress": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-plugin-typescript": "~4.5.0",
"#vue/cli-plugin-unit-mocha": "~4.5.0",
"#vue/cli-plugin-vuex": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/eslint-config-typescript": "^5.0.2",
"#vue/test-utils": "^1.0.3",
"chai": "^4.1.2",
"chai-as-promised": "^7.1.1",
"electron": "^9.0.0",
"electron-devtools-installer": "^3.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"sass-loader": "^8.0.2",
"spectron": "11.0.0",
"typescript": "~3.9.3",
"vue-cli-plugin-electron-builder": "~2.0.0-rc.5",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended",
"#vue/typescript/recommended"
],
"parserOptions": {
"ecmaVersion": 2020
},
"rules": {},
"overrides": [
{
"files": [
"**/__tests__/*.{j,t}s?(x)",
"**/tests/unit/**/*.spec.{j,t}s?(x)"
],
"env": {
"mocha": true
}
}
]
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
If I comment code line with import better-sqlite3 I don't have the issue.
Can you tell me where is the problem or help me to more understand how fix this...
Thank you
This issue has an origin from webpack auto managed by vue cli.
If you want to use better-sqlite3 library (or for similar issue) with vue and loading your project with webpack WRAPPED by vue into vue-cli, you need to add this into the vue.config.js
configureWebpack: {
externals: {
'better-sqlite3': 'commonjs better-sqlite3'
},
},
WARNING : you can use vue-cli and webpack without this specific file into your project because vue-cli managed that for you. But if you want to more customize vue-cli you need to add manually this file (which merged with the base vue.config.js that hidden by vue-cli).

npm error during publish - incorrect version of babel-eslint

I have a .net core 3.1 with react application and i'm trying to publish it with Visual Studio 2019.
I am receiving the following error:
The react-scripts package provided by Create React App requires a
dependency: "babel-eslint": "10.1.0"
Don't try to install it manually: your package manager does it automatically. However, a different version of babel-eslint was
detected higher up in the tree:
C:\projects\node_modules\babel-eslint (version: 10.0.1)
I have no idea how babel-eslint version 10.0.1 is getting installed.
Running npm ls does not show any packages with a dependency of babel-eslint 10.0.1.
Here is the package.json file:
{
"private": true,
"dependencies": {
"axios": "^0.19.2",
"font-awesome": "^4.7.0",
"jquery": "^3.5.1",
"merge": "^1.2.1",
"oidc-client": "^1.9.0",
"react": "^16.0.0",
"react-bootstrap": "^1.3.0",
"react-bootstrap-table-next": "^4.0.3",
"react-bootstrap-table2-paginator": "^2.1.2",
"react-bootstrap-table2-toolkit": "^2.1.3",
"react-dom": "^16.0.0",
"react-router-bootstrap": "^0.25.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3",
"reactstrap": "^6.3.0",
"rimraf": "^2.6.2"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-eslint": "^10.1.0",
"eslint": "^7.10.0",
"cross-env": "^5.2.0",
"typescript": "^3.5.2"
},
"eslintConfig": {
"extends": "react-app"
},
"scripts": {
"start": "rimraf ./build && react-scripts start",
"build": "react-scripts build",
"test": "cross-env CI=true react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"lint": "eslint ./src/"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I do not see babel-eslint v10.0.1 in the package-lock.json file either.
Here are all of the references to babel-eslint in the package-lock.json file:
"babel-eslint": {
"version": "10.1.0",
"resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
"requires": {
"#babel/code-frame": "^7.0.0",
"#babel/parser": "^7.7.0",
"#babel/traverse": "^7.7.0",
"#babel/types": "^7.7.0",
"eslint-visitor-keys": "^1.0.0",
"resolve": "^1.12.0"
}
},
"react-scripts": {
"version": "3.4.3",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.3.tgz",
"requires": {
"#babel/core": "7.9.0",
"#svgr/webpack": "4.3.3",
"#typescript-eslint/eslint-plugin": "^2.10.0",
"#typescript-eslint/parser": "^2.10.0",
"babel-eslint": "10.1.0",
"babel-jest": "^24.9.0",
"babel-loader": "8.1.0",
"babel-plugin-named-asset-import": "^0.3.6",
"babel-preset-react-app": "^9.1.2",
}
I have tried uninstalling all version of babel-eslint (npm uninstall babel-eslint) but somehow the older version keeps getting installed every time i do an npm install
How can i stop the older version of babel-eslint from being installed?
After reviewing the packages being installed i was able to update the package.json file with compatible packages. Deleted package-lock.json and the node_modules directory then did npm install and it worked successfully

npm install - ERR! addLocal Could not install on Windows 10

I'm trying to install a new nodeJS project.
I set node and npm as environment variable
When I run command npm install, I got errors as below:
What is my wrong?
Update details of package.json
{
"name": "Project for myself",
"version": "2.0.0",
"private": true,
"scripts": {
"start": "node_modules/react-native/packager/packager.sh",
"test": "jest"
},
"dependencies": {
"firebase": "^3.6.4",
"lodash": "^4.17.2",
"moment": "^2.17.1",
"react": "15.4.2",
"react-addons-shallow-compare": "^15.3.2",
"react-immutable-component": "^0.0.1",
"react-native": "0.42.0-rc.3",
"react-native-admob": "git://github.com/minhcasi/react-native-admob.git",
"react-native-animatable": "0.*",
"react-native-drawer": "2.*",
"react-native-dropdownalert": "^2.3.0",
"react-native-fbsdk": "0.*",
"react-native-fence-html": "^1.0.6",
"react-native-global-props": "^1.1.1",
"react-native-invertible-scroll-view": "^1.0.0",
"react-native-linear-gradient": "2.*",
"react-native-localization": "0.*",
"react-native-modalbox": "1.*",
"react-native-onesignal": "^3.0.3",
"react-native-parallax-scroll-view": "0.*",
"react-native-router-flux": "3.*",
"react-native-scrollable-tab-view": "0.*",
"react-native-smart-splash-screen": "^2.2.1",
"react-native-snap-carousel": "^1.4.0",
"react-native-spinkit": "1.*",
"react-native-swiper": "1.*",
"react-native-timeago": "0.*",
"react-native-vector-icons": "4.*",
"react-timer-mixin": "^0.13.3",
"react-tween-state": "^0.1.5",
"readable-stream": "^2.2.2",
"safe-html": "^1.0.0",
"sanitize-html": "^1.13.0",
"urijs": "^1.18.4",
"url": "^0.11.0",
"util": "^0.10.3",
"wpapi": "^1.0.1"
},
"devDependencies": {
"babel-jest": "18.0.0",
"babel-preset-react-native": "1.9.1",
"jest": "18.1.0",
"react-test-renderer": "15.4.2"
},
"jest": {
"preset": "react-native"
}
}
The installing worked with this package.json content:
{
"name": "Project for myself",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.0.0-alpha.6",
"react-native": "0.43.4"
},
"devDependencies": {
"babel-jest": "19.0.0",
"babel-preset-react-native": "1.9.1",
"jest": "19.0.2",
"react-test-renderer": "16.0.0-alpha.6"
},
"jest": {
"preset": "react-native"
}
}
Issue is with the version of your application, to fix edit your package.json files version parameter to valid format
"version": "2.0.0"
For more information on node.js versioning refer the following documentation.
UPDATE
Try following and try again,
npm cache clear -f

reactJs Jest:`jsdom 4.x onward only works on io.js, not Node.jsT:

package.json:
{
"name": "flux-pricing",
"version": "0.0.1",
"description": "Pricing component with flux",
"main": "js/app.js",
"dependencies": {
"flux": "^2.0.0",
"jest-cli": "^0.5.0",
"jsdom": ">= 0.1.23 < 4.0.0",
"react": "^0.12.0",
"underscore": "^1.7.0"
},
"devDependencies": {
"browserify": "~6.2.0",
"envify": "~3.0.0",
"react": "^0.12.0",
"reactify": "^0.15",
"watchify": "~2.1.0",
"gulp": "~3.8.9",
"gulp-browserify": "~0.5.0",
"gulp-concat": "~2.4.1",
"node-jsx": "~0.2.0",
"express": "~4.0.0"
},
"scripts": {
"start": "watchify -o js/bundle.js -v -d .",
"build": "browserify . | uglifyjs -cm > js/bundle.min.js",
"test": "jest"
},
"jest": {
"rootDir": "./js"
},
"browserify": {
"transform": [
"reactify",
"envify"
]
}
}
after npm install when i try to do npm test
s\jsdom\lib\jsdom.js:3
`jsdom 4.x onward only works on io.js, not Node.jsT: https://github.com/tmpvar
^
Unexpected token ILLEGAL
how to resolve this issue?
I had the same problem. The solution is to switch to use Jest 0.4 instead.
Here's the issue from github.
https://github.com/facebook/jest/issues/469#issuecomment-133105627
I actually had to downgrade to Jest 0.3 and node 10.x to get the Jest React example working. Here's the reference
https://github.com/facebook/jest/issues/427

Resources