Yarn uses wrong dependecy - node.js

Since I've updated to yarn berry via: yarn set version berry I cannot run my project, the dependency tree is somehow broken. For ease I've provided examples for react-router but this happends with other packages too.
I have a monorepo with this structure:
/
|- .yarn
|- node_modules
|- common/
|- backoffice/
|- frontoffice/
|- test
|- .yarnrc.yml
|- package.json
|- lerna.json
frontoffice and backoffice are react apps. While common have the shared interfaces and components.
backoffice depends on react-router#5 and is writtenn in typescript while the frontoffice depends on react-router#6-beta and is ES5.
When I try to start the backoffice or the frontoffice I have the errors:
$ cd packages/frontoffice
$ yarn start
Failed to compile.
Attempted import error: 'Redirect' is not exported from 'react-router'.
In fact the backoffice is using react-router#v6 and frontoffice is using react-router#5
when I try to start the backoffice I get the error:
Type '{ path: any; render: (props: any) => Element; }' is not assignable to type 'IntrinsicAttributes & Pick<RouteProps, "path" | "children" | "caseSensitive" | "element"> & Pick<InferProps<{ caseSensitive: Requireable<boolean>; childr
en: Requireable<...>; element: Requireable<...>; path: Requireable<...>; }>, never> & Pick<...>'.
Property 'render' does not exist on type 'IntrinsicAttributes & Pick<RouteProps, "path" | "children" | "caseSensitive" | "element"> & Pick<InferProps<{ caseSensitive: Requireable<boolean>; children: Requireable<...>; element: Require
able<...>; path: Requireable<...>; }>, never> & Pick<...>'. TS2322
Also the IDE is highlighting the code, with errors everywhere on all packages.
I've run the lerna why command and to me everything seems fine:
$ yarn why react
├─ #mymonorepo/backoffice#workspace:packages/backoffice
│ └─ react#npm:17.0.1 (via npm:^17.0.1)
│
├─ #mymonorepo/test#workspace:packages/test
│ └─ react#npm:17.0.1 (via npm:^17.0.1)
│
├─ #mymonorepo/frontoffice#workspace:packages/frontoffice
│ └─ react#npm:17.0.1 (via npm:17.0.1)
│
└─ react-dragscroll#npm:2.0.1
└─ react#npm:16.14.0 (via npm:^16.1.1)
$ yarn why react-router
├─ #mymonorepo/backoffice#workspace:packages/backoffice
│ └─ react-router#npm:5.2.1 [1602b] (via npm:^5.2.0 [1602b])
│
├─ #mymonorepo/test#workspace:packages/test
│ └─ react-router#npm:5.2.1 [1602b] (via npm:^5.2.0 [1602b])
│
├─ #mymonorepo/frontoffice#workspace:packages/frontoffice
│ └─ react-router#npm:6.0.0-beta.0 [46813] (via npm:6.0.0-beta.0 [46813])
│
├─ react-router-dom#npm:5.3.0
│ └─ react-router#npm:5.2.1 (via npm:5.2.1)
│
├─ react-router-dom#npm:6.0.0-beta.0
│ └─ react-router#npm:6.0.0-beta.0 (via npm:6.0.0-beta.0)
│
├─ react-router-dom#npm:5.3.0 [1602b]
│ └─ react-router#npm:5.2.1 [1602b] (via npm:^5.2.0 [1602b])
│
└─ react-router-dom#npm:6.0.0-beta.0 [46813]
└─ react-router#npm:6.0.0-beta.0 [46813] (via npm:6.0.0-beta.0 [46813])
$ yarn why react-router-dom
├─ #mymonorepo/backoffice#workspace:packages/backoffice
│ └─ react-router-dom#npm:5.3.0 [1602b] (via npm:^5.2.0 [1602b])
│
├─ #mymonorepo/test#workspace:packages/test
│ └─ react-router-dom#npm:5.3.0 [1602b] (via npm:^5.2.0 [1602b])
│
└─ #mymonorepo/frontoffice#workspace:packages/frontoffice
└─ react-router-dom#npm:6.0.0-beta.0 [46813] (via npm:6.0.0-beta.0 [46813])
$
Did I forget something to configure? Is there a way to force the right version for each package?
the nodeLinker option in .yarnrc.yml is set to node-modules
the pakage.json are the following:
/package.json
{
"name": "mymonorepo",
"version": "0.1.0",
"license": "MIT",
"private": true,
"workspaces": {
"packages": [
"packages/*"
]
},
"resolutions": {
"graphql": "^15.3.0"
},
"devDependencies": {
"husky": "^4.3.8",
"lerna": "^3.22.1",
"lint-staged": "^10.5.3"
},
"packageManager": "yarn#3.2.0"
}
/backoffice/package.json
{
"name": "#mymonorepo/backoffice",
"version": "3.0.0",
"private": true,
"dependencies": {
"#apollo/client": "^3.5.8",
"#material-ui/core": "^4.12.1",
"#material-ui/icons": "^4.11.2",
...
"react": "^17.0.0",
"react-admin": "^3.19.7",
"react-app-polyfill": "^2.0.0",
"react-dom": "^17.0.0",
"react-redux": "^7.1.0",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.0",
"recharts": "^1.8.5",
"redux-saga": "^1.0.0"
},
"scripts": {
"analyze": "source-map-explorer 'build/static/js/*.js'",
"start": "react-scripts start",
"build": "node ./build.js",
"eject": "react-scripts test"
},
"homepage": ".",
"browserslist": [
">0.2%",
"not dead",
"not ie <= 10",
"not op_mini all"
],
"devDependencies": {
"#types/classnames": "^2.3.1",
"#types/fetch-mock": "^7.3.2",
"#types/jest": "^26.0.19",
"#types/node": "^12.12.14",
"#types/query-string": "5.1.0",
"#types/react": "^17.0.20",
"#types/react-dom": "^17.0.9",
"#types/react-router": "^5.2.0",
"#types/react-router-dom": "^5.2.0",
"rewire": "^5.0.0",
"source-map-explorer": "^2.0.0",
"typescript": "^4.4.0"
}
}
/frontoffice/package.json
{
"name": "#mymonorepo/frontoffice",
"version": "2.1.0",
"dependencies": {
"#apollo/client": "^3.1.3",
"#fortawesome/fontawesome-svg-core": "^1.2.35",
"#fortawesome/free-brands-svg-icons": "^5.15.4",
"#fortawesome/free-solid-svg-icons": "^5.15.4",
"#fortawesome/react-fontawesome": "^0.1.15",
...
"react": "17.0.1",
"react-compound-timer": "^1.1.15",
"react-content-loader": "^5.1.4",
"react-custom-scrollbars-2": "^4.3.0",
"react-detect-offline": "^2.4.0",
"react-device-detect": "^1.6.2",
"react-dom": "17.0.1",
"react-fullscreen-image": "^0.0.3",
"react-gtm-module": "^2.0.8",
"react-helmet": "^6.1.0",
"react-router": "6.0.0-beta.0",
"react-router-dom": "6.0.0-beta.0",
"react-router-hash-link": "^2.0.0",
"react-router-modal": "^2.0.0-rc3",
"react-scripts": "^4.0.1",
"react-scroll-trigger": "^0.6.6",
"react-share": "^4.2.1",
"react-show-more-text": "^1.4.6",
"react-ticker": "^1.2.2",
"react-use-dimensions": "^1.2.1",
"react-window": "^1.8.6",
...
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts --max_old_space_size=4096 build --silent",
"test": "react-scripts test",
"eject": "react-scripts eject",
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"depcheck": "^1.3.1",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-flowtype": "^5.2.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0"
}
}

Related

Vue packages version mismatch: why does #nuxt/vue-renderer 2.15.8 install vue-server-renderer#2.7.10?

I have a packages version mismatch that I don't understand how to fix.
When I do:
rm -rf node_modules package-lock.json
npm install
npm run dev
I'm getting the following error:
╭────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ ✖ Nuxt Fatal Error │
│ │
│ Error: │
│ │
│ Vue packages version mismatch: │
│ │
│ - vue#2.6.14 │
│ - vue-server-renderer#2.7.10 │
│ │
│ This may cause things to work incorrectly. Make sure to use the same version for both. │
│ │
│ │
╰────────────────────────────────────────────────────────────────────────────────────────────╯
So, I checked what was installing vue-server-renderer#2.7.10 using npm-tree, and I'm getting this dependencies tree:
├─┬ nuxt 2.15.8
│ └─┬ #nuxt/vue-renderer 2.15.8
│ ├── vue-server-renderer 2.7.10
Why would #nuxt/vue-renderer install vue-server-renderer 2.7.10 instead of 2.15.8 ?
And how can I fix it ?
package.json:
{
"name": "my project",
"version": "1.3.0",
"description": "my project description",
"author": "John",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
"lint": "npm run lint:js"
},
"dependencies": {
"#nuxtjs/auth-next": "^5.0.0-1648802546.c9880dc",
"#nuxtjs/axios": "^5.13.6",
"#nuxtjs/markdownit": "^2.0.0",
"#nuxtjs/proxy": "^2.1.0",
"core-js": "^3.25.2",
"echarts": "^5.3.3",
"jshint": "^2.13.5",
"lodash": "^4.17.21",
"nuxt": "^2.15.8",
"nuxt-highlightjs": "^1.0.3",
"nuxt-leaflet": "^0.0.27",
"vue-echarts": "^6.2.3",
"xlsx": "^0.18.5"
},
"devDependencies": {
"#nuxt/types": "^2.15.8",
"#nuxt/typescript-build": "^2.1.0",
"#nuxtjs/composition-api": "^0.32.0",
"#nuxtjs/date-fns": "^1.5.0",
"#nuxtjs/vuetify": "^1.12.3",
"eslint": "^8.23.1",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-nuxt": "4.0.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^9.5.1",
"prettier": "^2.7.1"
}
}

Jovo Could not resolve “vscode” error when I try to deploy

I’m trying to deploy my Jovo project to AWS Lambda using the command: “jovo deploy:code serverless” and I get “Could not resolve “vscode” error” at various locations in the node_modules folder.
Example:
X [ERROR] Could not resolve “vscode”`
node_modules/#alexa/acdl/dist/cjs/extension.js:30:27: 30 │ const vscode = require(“vscode”);
╵ ~~~~~~~~`
You can mark the path “vscode” as external to exclude it from the bundle, ``which will remove this error. You can also surround this “require” call with a try/catch block to handle this failure at run-time instead of bundle-time.`
X [ERROR] Could not resolve “vscode”`
node_modules/vscode-languageclient/lib/node/main.js:22:25: 22 │ const vscode_1 = require(“vscode”);
╵ ~~~~~~~~`
You can mark the path “vscode” as external to exclude it from the bundle, which will remove this error. You can also surround this “require” call with a try/catch block to handle this failure at run-time instead of `bundle-time.
I used “jovo build:serverless” to build the serverless.yaml file.
Any help is appreciated.
Thanks
Package.json file content:
{
"name": "voice-controller",
"private": true,
"description": "test",
"scripts": {
"build": "babel src --out-dir dist",
"start": "node dist/app.dev.js --jovo-webhook",
"start:dev": "nodemon --watch src --exec \"babel src --out-dir dist && node dist/app.dev.js --jovo-webhook\"",
"bundle:dev": "npm run bundle -- dist/app.dev.js",
"prebundle": "rimraf bundle && babel src --out-dir dist",
"bundle": "esbuild --bundle --outfile=bundle/index.js --sourcemap --minify --keep-names --platform=node --target=node16 --format=cjs --external:aws-sdk --external:#oclif/* --external:#jovotech/cli*",
"postbundle": "cd bundle && bestzip ../bundle.zip * && cd ..",
"eslint": "eslint src test --fix",
"test": "jest -c jest.config.js"
},
"author": "jovotech",
"license": "Apache-2.0",
"dependencies": {
"#alexa/acdl": "^0.1.12",
"#jovotech/db-dynamodb": "^4.2.13",
"#jovotech/db-filedb": "^4.0.0",
"#jovotech/framework": "^4.2.15",
"#jovotech/platform-alexa": "^4.2.15",
"#jovotech/platform-googleassistant": "^4.2.13",
"#jovotech/plugin-debugger": "^4.2.14",
"#jovotech/server-express": "^4.0.0",
"#jovotech/target-serverless": "^4.1.6",
"#types/vscode": "^1.67.0",
"async": "^3.2.3",
"esbuild-windows-64": "^0.14.40",
"jovo-db-dynamodb": "^3.6.1",
"jszip": "^3.10.0",
"node-fetch": "^2.6.7",
"vscode-languageclient": "^8.0.1",
"vscode-test": "^1.6.1"
},
"devDependencies": {
"#babel/cli": "^7.14.5",
"#babel/core": "^7.14.6",
"#babel/eslint-parser": "^7.16.3",
"#babel/plugin-proposal-decorators": "^7.14.5",
"#babel/plugin-transform-runtime": "^7.14.5",
"#babel/preset-env": "^7.14.7",
"#babel/register": "^7.14.5",
"#babel/runtime": "^7.14.6",
"#jovotech/cli-command-build": "^4.1.6",
"#jovotech/cli-command-deploy": "^4.1.6",
"#jovotech/cli-command-get": "^4.1.6",
"#jovotech/cli-command-new": "^4.1.6",
"#jovotech/cli-command-run": "^4.1.7",
"#jovotech/cli-core": "^4.0.0",
"#jovotech/filebuilder": "^0.0.1",
"babel-jest": "^27.0.6",
"bestzip": "^2.2.0",
"esbuild": "^0.14.2",
"eslint": "^7.32.0",
"eslint-config-prettier": "^7.1.0",
"eslint-plugin-prettier": "^3.3.1",
"jest": "^26.6.3",
"nodemon": "^2.0.10",
"prettier": "^2.2.1",
"rimraf": "^3.0.2"
},
"repository": {
"type": "git",
"url": "git+https://github.com/jovotech/jovo-framework.git"
},
"bugs": {
"url": "https://github.com/jovotech/jovo-framework"
},
"homepage": "https://github.com/jovotech/jovo-v4-template-js/issues#readme"
}

npm ls minimist#0.2.1 invalid extraneous

Unable to update minimist dependency to secure version. I am trying to update package minimist to 0.2.1 and I did following changes :
"resolutions": {
"minimist": "~0.2.1"
}
"scripts":{
"preinstall": "npx npm-force-resolutions"
}
npm install works fine , but npm ls minimist shows:
myapp % npm ls minimist
├─┬ babel-cli#6.26.0
│ └─┬ chokidar#1.7.0
│ └─┬ fsevents#1.1.3
│ ├── minimist#1.2.6 extraneous
│ └─┬ node-pre-gyp#0.6.39
│ ├─┬ mkdirp#0.5.1
│ │ └── minimist#1.2.6 invalid
│ └─┬ rc#1.2.1
│ └── minimist#1.2.6
├─┬ babel-loader#7.1.5
│ └─┬ mkdirp#0.5.1
│ └── minimist#1.2.6 invalid
├─┬ grunt#1.0.1
│ ├─┬ dateformat#1.0.12
│ │ └─┬ meow#3.7.0
│ │ └── minimist#1.2.6
│ └── minimist#1.2.6 extraneous
├─┬ karma#1.5.0
│ └─┬ optimist#0.6.1
│ └── minimist#1.2.6 invalid
├─┬ karma-mocha#1.3.0
│ └── minimist#1.2.6 invalid
├── minimist#1.2.6
├─┬ phantomjs-prebuilt#2.1.16
│ ├─┬ extract-zip#1.6.6
│ │ └─┬ mkdirp#0.5.0
│ │ └── minimist#1.2.6 invalid
│ └── minimist#1.2.6 extraneous
├─┬ UNMET PEER DEPENDENCY webpack#3.12.0
│ └─┬ watchpack#1.6.0
│ └─┬ chokidar#2.0.4
│ └─┬ fsevents#1.2.4
│ ├── minimist#1.2.6 extraneous
│ └─┬ node-pre-gyp#0.10.0
│ ├─┬ mkdirp#0.5.1
│ │ └── minimist#1.2.6 invalid
│ └─┬ rc#1.2.7
│ └── minimist#1.2.6
└─┬ webpack-dev-server#2.9.7
└─┬ internal-ip#1.2.0
└─┬ meow#3.7.0
└── minimist#1.2.6
npm ERR! invalid: minimist#1.2.6/Users/......./../.../node_modules/json5/node_modules/minimist
npm ERR! invalid: minimist#1.2.6 /Users/node_modules/minimist
npm ERR! invalid: minimist#1.2.6/Users/node_modules/tsconfig-paths/node_modules/minimist
npm ERR! invalid: minimist#1.2.6 /Users/node_modules/meow/node_modules/minimist
npm ERR! invalid: minimist#1.2.6/Users/node_modules/optimist/node_modules/minimist
npm ERR! invalid: minimist#1.2.6 /Users/node_modules/karma-mocha/node_modules/minimist
npm ERR! extraneous: minimist#1.2.6 /Users/node_modules/mocha/node_modules/minimist
............
............
Is it not possible to update dependency of dependency like this?What is the way to get this done?
Edit:
Package.json
{
"name": "myapp",
"version": "0.0.1",
"description": "DESC",
"main": "index.js",
"scripts": {
"build": "grunt build",
"preinstall": "npx npm-force-resolutions"
},
"repository": {
"type": "git",
"url": "articatroy.url"
},
"keywords": [],
"author": "",
"babel": {
"presets": [
"env",
"react",
"stage-2"
]
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.3",
"babel-loader": "^7.1.4",
"babel-plugin-inline-json-import": "^0.2.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-airbnb": "^2.4.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-mobx": "^1.0.2",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"bundle-loader": "~0.5.5",
"chai": "~3.5.0",
"css-loader": "^0.28.11",
"enzyme": "^3.3.0",
"minimist": "^1.2.3",
"enzyme-adapter-react-16": "^1.1.1",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-loader": "^2.0.0",
"eslint-plugin-babel": "^4.1.2",
"eslint-plugin-import": "^2.11.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.7.0",
"fetch-mock": "^6.4.2",
"file-loader": "~1.1.5",
"grunt": "~1.0.1",
"grunt-contrib-clean": "~1.0.0",
"grunt-contrib-copy": "~1.0.0",
"grunt-env": "~0.4.4",
"grunt-karma": "~2.0.0",
"grunt-webpack": "~2.0.1",
"sonarqube-scanner": "2.5.0",
"karma": "~1.5.0",
"karma-chrome-launcher": "^2.2.0",
"karma-mocha": "~1.3.0",
"karma-mocha-reporter": "~2.2.3",
"karma-phantomjs-launcher": "~1.0.4",
"karma-safari-launcher": "~1.0.0",
"karma-sourcemap-loader": "~0.3.7",
"karma-webpack": "2.0.3",
"load-grunt-tasks": "~3.5.2",
"mocha": "~3.2.0",
"phantomjs-prebuilt": "~2.1.14",
"sinon": "^5.0.10",
"style-loader": "^0.21.0",
"webpack": "^3.8.1",
"webpack-dev-server": "~2.9.3",
"uuid": "^3.3.2"
},
"dependencies": {
"#react/react-spectrum": "^2.21.0",
"axios": "^0.18.0",
"babel-polyfill": "^6.23.0",
"build-url": "^1.2.0",
"classnames": "^2.2.5",
"es6-promise": "~4.1.0",
"isomorphic-fetch": "^2.2.1",
"jquery": "~3.1.1",
"less": "^3.0.4",
"less-loader": "^4.1.0",
"loglevel": "^1.6.1",
"mobx": "^4.2.0",
"mobx-react": "^5.1.2",
"moment": "^2.24.0",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-router-dom": "^4.2.2",
"style-loader": "^0.21.0",
"underscore": "^1.8.3",
"url-parse": "^1.4.0",
"uuid": "^3.3.2",
"minimist": "^1.2.3"
},
"resolutions": {
"minimist": "^1.2.3"
}
}
resolutions is when using ymal.
for npm you should use overrides
https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides
notice you will need npm version 8.3 at least

Requiring external babel register error during npm start

I started angular Application via npm start with gulp/babel enabled.
After starting, the browser page keeps loading and is throwing an error "requiring external babel register".
given below logs from terminal:
[19:52:47] Requiring external module #babel/register
[19:52:53] Using gulpfile ~\WebstormProjects\agent-dealer-portal-frontend\portals-integration\front\gulpfile.babel.js
[19:52:53] Starting 'default'...
babel-register is listed properly in the terminal.
C:\Users\vramanathan\WebstormProjects\agent-dealer-portal-frontend\portals-integration\front>npm list babel-register
#globant/cna_national_portal#0.35.0 C:\Users\vramanathan\WebstormProjects\agent-dealer-portal-frontend\portals-integration\front
`-- babel-cli#6.26.0
+-- babel-core#6.26.3
| `-- babel-register#6.26.0 deduped
`-- babel-register#6.26.0
.babelrc file contents:
{
"presets": [
"es2015"
]
}
Package.json:
{
"main": "gulpfile.babel.js",
"name": "#globant/cna_national_portal",
"version": "00.35.00",
"babel": {
"presets": [
"#babel/env"
],
"compact": false
},
......
"devDependencies": {
"#babel/core": "^7.5.5",
"#babel/preset-env": "^7.5.5",
"#babel/register": "^7.5.5",
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.18.0",
"del": "^3.0.0",
"eslint": "^5.0.1",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^3.1.1",
"gulp-babel": "^6.1.2",
"gulp-cli": "^1.4.0",
"gulp-concat": "^2.6.1",
"gulp-cssnano": "^2.1.2",
"gulp-eslint": "^4.0.2",
"gulp-header": "^1.8.9",
"gulp-if": "^2.0.2",
"gulp-imagemin": "^2.4.0",
"gulp-load-plugins": "^1.4.0",
"gulp-ng-annotate": "^2.0.0",
"gulp-rev": "^8.1.1",
"gulp-rev-replace": "^0.4.4",
"gulp-sass": "^3.1.0",
"gulp-sass-glob": "^1.0.8",
"gulp-sourcemaps": "^1.11.0",
"gulp-uglify": "^1.5.4",
"gulp-uncss": "^1.0.6",
},
"private": true,
"scripts": {
"start": "gulp",
"build": "gulp build --production",
"test": "gulp test",
"test:watch": "gulp test:watch",
"eslint": "gulp eslint"
}
}
The following may be useful: there is some incompatibilities between certain versions of Node / gulp when that arise when using different OSs (I'm on Chromebook for my work).
For me, downgrading to Node 10 solved my issue (via command): nvm use 10

node can not find webpack module on windows 10

I have installed webpack both globally (first) and for a certain project also (PC, windows 10). Seems that the project dir contains all the folders that it needed:
c:\Users\srgg6701\Documents\Projects\Compilers\Webpack\try>npm install webpack --save-dev
npm WARN optional dep failed, continuing fsevents#1.0.5
webpack#1.12.9 node_modules\webpack
├── interpret#0.6.6
├── clone#1.0.2
├── tapable#0.1.10
├── async#1.5.0
├── esprima#2.7.0
├── enhanced-resolve#0.9.1 (graceful-fs#4.1.2, memory-fs#0.2.0)
├── supports-color#3.1.2 (has-flag#1.0.0)
├── mkdirp#0.5.1 (minimist#0.0.8)
├── optimist#0.6.1 (wordwrap#0.0.3, minimist#0.0.10)
├── memory-fs#0.3.0 (errno#0.1.4, readable-stream#2.0.4)
├── webpack-core#0.6.8 (source-list-map#0.1.5, source-map#0.4.4)
├── loader-utils#0.2.12 (big.js#3.1.3, json5#0.4.0)
├── uglify-js#2.6.1 (async#0.2.10, uglify-to-browserify#1.0.2, source-map#0.5.3, yargs#3.10.0)
├── node-libs-browser#0.5.3 (tty-browserify#0.0.0, https-browserify#0.0.0, path-browserify#0.0.0, constants-browserify#0.0.1, punycode#1.3.2, string_decoder#0.10.31, os-browserify#0.1.2, process#0.11.2, domain-browser#1.1.4, assert#1.3.0, querystring-es3#0.2.1, timers-browserify#1.4.1, stream-browserify#1.0.0, events#1.1.0, readable-stream#1.1.13, util#0.10.3, console-browserify#1.1.0, url#0.10.3, vm-browserify#0.0.4, http-browserify#1.7.0, browserify-zlib#0.1.4, buffer#3.5.4, crypto-browserify#3.2.8)
└── watchpack#0.2.9 (graceful-fs#4.1.2, async#0.9.2, chokidar#1.4.0)
But when I run the command in the project dir:
c:\Users\srgg6701\Documents\Projects\Compilers\Webpack\try>node webpack ./app.js bundle.js
It reveals an error:
module.js:338
throw err;
^
Error: Cannot find module 'c:\Users\srgg6701\Documents\Projects\Compilers\Webpack\try\webpack'
at Function.Module._resolveFilename (module.js:336:15)
at Function.Module._load (module.js:286:25)
at Function.Module.runMain (module.js:475:10)
at startup (node.js:117:18)
at node.js:951:3
Then I check installed package for node:
c:\Users\srgg6701\Documents\Projects\Compilers\Webpack\try>npm ls --depth=0
It says that's OK (?):
c:\Users\srgg6701\Documents\Projects\Compilers\Webpack\try
└── webpack#1.12.9
Nevertheless, the error remains.
Pls, tell me, can it be fixed and how?!
Just in case, here is the content of the node_modules/webpack/package.json file:
{
"name": "webpack",
"version": "1.12.9",
"author": {
"name": "Tobias Koppers #sokra"
},
"description": "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, jade, coffee, css, less, ... and your custom stuff.",
"dependencies": {
"async": "^1.3.0",
"clone": "^1.0.2",
"enhanced-resolve": "~0.9.0",
"esprima": "^2.5.0",
"interpret": "^0.6.4",
"loader-utils": "^0.2.11",
"memory-fs": "~0.3.0",
"mkdirp": "~0.5.0",
"node-libs-browser": ">= 0.4.0 <=0.6.0",
"optimist": "~0.6.0",
"supports-color": "^3.1.0",
"tapable": "~0.1.8",
"uglify-js": "~2.6.0",
"watchpack": "^0.2.1",
"webpack-core": "~0.6.0"
},
"license": "MIT",
"devDependencies": {
"benchmark": "^1.0.0",
"bundle-loader": "~0.5.0",
"codecov.io": "^0.1.2",
"coffee-loader": "~0.7.1",
"coffee-script": "^1.10.0",
"component-webpack-plugin": "~0.2.0",
"coveralls": "^2.11.2",
"css-loader": "~0.15.0",
"diff": "^2.0.2",
"eslint": "^1.1.0",
"eslint-plugin-nodeca": "^1.0.3",
"express": "~4.13.1",
"extract-text-webpack-plugin": "~0.8.0",
"file-loader": "~0.8.0",
"glob": "^5.0.14",
"i18n-webpack-plugin": "~0.2.0",
"istanbul": "^0.3.13",
"jade": "^1.11.0",
"jade-loader": "~0.7.0",
"js-beautify": "^1.5.10",
"json-loader": "~0.5.1",
"less": "^2.5.1",
"less-loader": "^2.0.0",
"mocha": "~2.2.0",
"mocha-lcov-reporter": "0.0.2",
"raw-loader": "~0.5.0",
"script-loader": "~0.6.0",
"should": "^7.0.2",
"style-loader": "~0.12.0",
"url-loader": "~0.5.0",
"val-loader": "~0.5.0",
"vm-browserify": "~0.0.0",
"webpack-dev-middleware": "^1.0.0",
"worker-loader": "~0.6.0"
},
"engines": {
"node": ">=0.6"
},
"repository": {
"type": "git",
"url": "git+https://github.com/webpack/webpack.git"
},
"homepage": "https://github.com/webpack/webpack",
"main": "lib/webpack.js",
"web": "lib/webpack.web.js",
"bin": {
"webpack": "./bin/webpack.js"
},
"files": [
"lib/",
"bin/",
"buildin/",
"hot/",
"web_modules/"
],
"scripts": {
"pretest": "npm run lint && npm run beautify-lint",
"test": "mocha",
"travis": "npm run cover -- --report lcovonly",
"lint": "eslint lib bin hot scripts",
"beautify-lint": "node ./scripts/beautify-check",
"beautify": "node ./scripts/beautify-rewrite",
"precover": "npm run lint && npm run beautify-lint",
"cover": "istanbul cover -x *.runtime.js node_modules/mocha/bin/_mocha",
"publish-patch": "npm run lint && npm run beautify-lint && mocha && npm version patch && git push && git push --tags && npm publish"
},
"gitHead": "9766f2bde3c3f3e7b3b0e914c9cb81ea3a12e823",
"bugs": {
"url": "https://github.com/webpack/webpack/issues"
},
"_id": "webpack#1.12.9",
"_shasum": "2a031d66189839cc5cbf2c68f80566da2e14ff4e",
"_from": "webpack#*",
"_npmVersion": "2.10.1",
"_nodeVersion": "0.12.4",
"_npmUser": {
"name": "sokra",
"email": "tobias.koppers#googlemail.com"
},
"maintainers": [
{
"name": "sokra",
"email": "tobias.koppers#googlemail.com"
}
],
"dist": {
"shasum": "2a031d66189839cc5cbf2c68f80566da2e14ff4e",
"tarball": "http://registry.npmjs.org/webpack/-/webpack-1.12.9.tgz"
},
"directories": {},
"_resolved": "https://registry.npmjs.org/webpack/-/webpack-1.12.9.tgz",
"readme": "ERROR: No README data found!"
}
When you install a module globally npm install -g webpack (as is required by webpack), it actually becomes available on your command line. So you just need to run:
webpack ./app.js bundle.js
As for the error which you were getting when running:
node webpack ./app.js bundle.js
that's because when you run node webpack you're actually (supposedly) passing the file webpack.js (or webpack/index.js) to node, hence the "Cannot find module" error.

Resources