I'm currently trying to implement this tutorial:
https://www.typescriptlang.org/docs/handbook/react-&-webpack.html
I'm supposed to install react
and react-dom
and also webpack
+ typescript
+ awesome-typescript-loader
+ source-map-loader
, and that's what I did. I also installed webpack-cli
accordingly to instructions that I got from the command line.
I installed all of them locally (the react
and react-dom
as PROD and the rest as DEV dependencies).Currently I don't have any packages installed globally.
After this, that's my package.json
file:
{
"name": "reactandwebpack-tutorial",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"awesome-typescript-loader": "^5.2.0",
"source-map-loader": "^0.2.3",
"typescript": "^2.7.2",
"webpack": "^4.16.4",
"webpack-cli": "^3.1.0"
},
"dependencies": {
"@types/react": "^16.4.7",
"@types/react-dom": "^16.0.6",
"react": "^16.4.2",
"react-dom": "^16.4.2"
}
}
At this point, when I run npm ls
I get a bunch of errors, because of some optional dependency of webpack that apparently is missing (all the errors in the tree are inside webpack
and below fsevents
as following):
webpack@4.16.4
(...)watchpack@1.6.0
(...)chokidar@2.0.4
(...)fsevents@1.2.4 -> UNMET OPTIONAL DEPENDENCY
And everything below fsevents is also marked with UNMET DEPENDENCY
And when I run webpack
command, I get a "webpack not recognized error".
Anyone can help? I've been trying to wrap my head around this for a while.
PS:
Npm -v 5.6.0
Node -v 8.11.3 //(that's what I get from the terminal,
//VSCode "About" tells me something different, I don't know why).
Using Visual Code
Version 1.24.0
Date 2018-06-06T17:35:40.560Z
Shell 1.7.12
Renderer 58.0.3029.110
Node 7.9.0
Architecture x64
The reason is because it was not linked to your env. When you install something globally, you have access to it everywhere, hence it works just by doing webpack
. Since you installed everything locally, the binaries are located inside node_modules/.bin
.
You have two options when you install something locallly.
./node_modules/.bin/moduleName --flags
It is easier to create a npm script and add all the commands there.