create-react-app: Failed to compile.TypeError: Cannot read property '0' of undefined
Hi,
Today we forked one of our new projects and we began noticing that our npm start, which runs react-scripts start, started failing with:
Failed to compile. [255/255]
Error in TypeError: Cannot read property '0' of undefined
- ExternalModuleFactoryPlugin.js:19
[web]/[webpack]/lib/ExternalModuleFactoryPlugin.js:19:40
- NormalModuleFactory.js:159
[web]/[react-scripts]/[webpack]/lib/NormalModuleFactory.js:159:3
- Tapable.js:75 NormalModuleFactory.applyPluginsAsyncWaterfall
[web]/[react-scripts]/[tapable]/lib/Tapable.js:75:69
- NormalModuleFactory.js:144 NormalModuleFactory.create
[web]/[react-scripts]/[webpack]/lib/NormalModuleFactory.js:144:8
- Compilation.js:356 Compilation.process [as _addModuleChain]
[web]/[react-scripts]/[webpack]/lib/Compilation.js:356:16
- Compilation.js:424 Compilation.process [as addEntry]
[web]/[react-scripts]/[webpack]/lib/Compilation.js:424:7
- SingleEntryPlugin.js:24 Compiler.compiler.plugin
[web]/[webpack]/lib/SingleEntryPlugin.js:24:16
- Tapable.js:107 Compiler.applyPluginsParallel
[web]/[react-scripts]/[tapable]/lib/Tapable.js:107:14
- Compiler.js:394 Compiler.compile
[web]/[react-scripts]/[webpack]/lib/Compiler.js:394:7
- Compiler.js:203 Compiler.runAsChild
[web]/[react-scripts]/[webpack]/lib/Compiler.js:203:7
- compiler.js:70
[web]/[html-webpack-plugin]/lib/compiler.js:70:19
- compiler.js:69 Object.compileTemplate
[web]/[html-webpack-plugin]/lib/compiler.js:69:10
- index.js:47 Compiler.<anonymous>
[web]/[html-webpack-plugin]/index.js:47:40
We started ripping off parts of our project to perhaps spot what could be happening and we ended up with the following folder structure:
public/
index.html
src/
index.js
package.json
Where the file contents are:
public/index.html
<!doctype html>
<html lang="en">
<body>
<div id="root"></div>
</body>
</html>
src/index.js
import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(
document.getElementById('root')
)
package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"devDependencies": {
"babel-eslint": "^7.2.3",
"eslint": "^3.19.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-react": "^6.10.3",
"react-scripts": "0.9.5",
"webpack": "^2.4.1"
},
"scripts": {
"start": "react-scripts start"
}
}
The same error still happens.
I had to install stuff like webpack and eslint so it could let me run it, or at least try to. Just in case.
Remember that it happens when I try to npm start.
Can you reproduce the problem with latest npm?
Yes. I’m using npm 4.5.0
Environment
Run these commands in the project folder and fill in their results:
npm ls react-scripts(if you haven’t ejected):react-scripts@0.9.5node -v: v7.7.3npm -v: 4.5.0
Then, specify:
-
Operating system: No LSB modules are available. Distributor ID: Debian Description: Debian GNU/Linux 8.7 (jessie) Release: 8.7 Codename: jessie
-
Browser and version: Not reaching the browser at this point.
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Comments: 22 (9 by maintainers)
@ibmua unfortunately this is a bug of package managers, not Create React App. The proper solution here is to separate your CRA scaffolded application into a separate folder (see monorepo) until package managers can resolve their bugs.
If you are installing
webpackalongside ofreact-scripts, it is completely expected to not work as of now.Neat! I believe it was fixed in d6dbfc0353f5595b9bfd389a7694214744e1711a and 50aaae6c1c01ec078c2ef5205652c69a4d46aeb5. Yarn recently changed it’s package hoisting / etc so it probably caused this.
I’m removing webpack, removing node_modules and re-building. I’ll give an update in just a moment ✌️
That sounds like the root of the problem. (Installing webpack was a wrong solution to it.)
Can you please create a new project and provide me the error message that you thought means Webpack needs to be installed?