Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Failed to compile.TypeError: Cannot read property '0' of undefined

See original GitHub issue

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.5
node -v: v7.7.3
npm -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.

Issue Analytics

State:
Created 6 years ago
Comments:22 (9 by maintainers)

Top GitHub Comments

1reaction

Timercommented, Jul 24, 2017

@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 webpack alongside of react-scripts, it is completely expected to not work as of now.

1reaction

Timercommented, May 17, 2017

Neat! I believe it was fixed in d6dbfc0353f5595b9bfd389a7694214744e1711a and 50aaae6c1c01ec078c2ef5205652c69a4d46aeb5. Yarn recently changed it’s package hoisting / etc so it probably caused this.