无法读取未定义的属性'thisCompilation' - react-scripts-ts

Question

I created a new project, totally blank using these instructions: https://developer.microsoft.com/en-us/fabric#/get-started Follow steps 1-4

The application works fine.

Once I run npm i webpack

Then I get this error

my package.json

{
"name": "lulo",
"version": "0.1.0",
"private": true,
"dependencies": {
"office-ui-fabric-react": "^6.157.0",
"react": "^16.8.4",
"react-adal": "^0.4.22",
"react-dom": "^16.8.4",
"react-scripts-ts": "3.1.0",
"redux": "^4.0.1"
},
"scripts": {
"start": "react-scripts-ts start",
"build": "react-scripts-ts build",
"test": "react-scripts-ts test --env=jsdom",
"eject": "react-scripts-ts eject"
},
"devDependencies": {
"@types/jest": "^24.0.11",
"@types/node": "^11.11.3",
"@types/react": "^16.8.8",
"@types/react-adal": "^0.4.1",
"@types/react-dom": "^16.8.2",
"typescript": "^3.3.3333",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0"
}
}

the error is this:

  Creating an optimized production build...
Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
Failed to compile.

Cannot read property 'thisCompilation' of undefined


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! lulo@0.1.0 build: `react-scripts-ts build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the lulo@0.1.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!     /Users/luisvalencia/.npm/_logs/2019-03-19T21_18_01_997Z-debug.log

and the log file has this

0 info it worked if it ends with ok
1 verbose cli [ '/Users/x/.nvm/versions/node/v10.0.0/bin/node',
1 verbose cli   '/Users/x/.nvm/versions/node/v10.0.0/bin/npm',
1 verbose cli   'run-script',
1 verbose cli   'build' ]
2 info using npm@5.6.0
3 info using node@v10.0.0
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle lulo@0.1.0~prebuild: lulo@0.1.0
6 info lifecycle lulo@0.1.0~build: lulo@0.1.0
7 verbose lifecycle lulo@0.1.0~build: unsafe-perm in lifecycle true
8 verbose lifecycle lulo@0.1.0~build: PATH: /Users/x/.nvm/versions/node/v10.0.0/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/x/Lulo/lulo/node_modules/.bin:/Users/x/.nvm/versions/node/v10.0.0/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
9 verbose lifecycle lulo@0.1.0~build: CWD: /Users/x/Lulo/lulo
10 silly lifecycle lulo@0.1.0~build: Args: [ '-c', 'react-scripts-ts build' ]
11 silly lifecycle lulo@0.1.0~build: Returned: code: 1  signal: null
12 info lifecycle lulo@0.1.0~build: Failed to exec build script
13 verbose stack Error: lulo@0.1.0 build: `react-scripts-ts build`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/Users/x/.nvm/versions/node/v10.0.0/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:285:16)
13 verbose stack     at EventEmitter.emit (events.js:182:13)
13 verbose stack     at ChildProcess.<anonymous> (/Users/x/.nvm/versions/node/v10.0.0/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:182:13)
13 verbose stack     at maybeClose (internal/child_process.js:947:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:236:5)
14 verbose pkgid lulo@0.1.0
15 verbose cwd /Users/luisvalencia/Lulo/lulo
16 verbose Darwin 18.0.0
17 verbose argv "/Users/x/.nvm/versions/node/v10.0.0/bin/node" "/Users/x/.nvm/versions/node/v10.0.0/bin/npm" "run-script" "build"
18 verbose node v10.0.0
19 verbose npm  v5.6.0
20 error code ELIFECYCLE
21 error errno 1
22 error lulo@0.1.0 build: `react-scripts-ts build`
22 error Exit status 1
23 error Failed at the lulo@0.1.0 build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Answer 1

This thread has the answer:

https://github.com/facebook/create-react-app/issues/4076

Basically, delete node_modules and remove webpack from package.json dependencies, then npm install . Some people resolved by using yarn instead of npm.

Answer 2

I too struggled to resolve this error for quite sometime. The problem in my case was due to transitive dependency. Although, "webpack" was not explicitly mentioned as dependency in my project package.json, I found 2 versions of "webpack" in package-lock.json. One was used by "react-scripts" and other by "react-nbsp", which I had mentioned as dependency in package.json, and was using it to get non breaking space in React JSX.

I removed "react-nbsp" from package.json, deleted node-modules, package-lock.json and ran the application. It started without error and worked fine.