Create-react-app: TypeError: Cannot read property 'request' of undefined

Created on 24 May 2017  路  11Comments  路  Source: facebook/create-react-app

Hi. I 'm having problem running the create-react-app.

Here is the error I've got.
`
TypeError: Cannot read property 'request' of undefined

  • ExternalModuleFactoryPlugin.js:37 handleExternals
    [www-react-client]/[webpack]/lib/ExternalModuleFactoryPlugin.js:37:33
  • ExternalModuleFactoryPlugin.js:46 next
    [www-react-client]/[webpack]/lib/ExternalModuleFactoryPlugin.js:46:8

  • ExternalModuleFactoryPlugin.js:59 handleExternals
    [www-react-client]/[webpack]/lib/ExternalModuleFactoryPlugin.js:59:7

  • ExternalModuleFactoryPlugin.js:79 ExternalModuleFactoryPlugin.
    [www-react-client]/[webpack]/lib/ExternalModuleFactoryPlugin.js:79:5

  • NormalModuleFactory.js:246 applyPluginsAsyncWaterfall
    [www-react-client]/[react-scripts]/[webpack]/lib/NormalModuleFactory.js:246:4

  • Tapable.js:204
    [www-react-client]/[react-scripts]/[tapable]/lib/Tapable.js:204:11

  • IgnorePlugin.js:56 IgnorePlugin.checkIgnore
    [www-react-client]/[react-scripts]/[webpack]/lib/IgnorePlugin.js:56:10

  • Tapable.js:208 NormalModuleFactory.applyPluginsAsyncWaterfall
    [www-react-client]/[react-scripts]/[tapable]/lib/Tapable.js:208:13

  • NormalModuleFactory.js:230 NormalModuleFactory.create
    [www-react-client]/[react-scripts]/[webpack]/lib/NormalModuleFactory.js:230:8

  • Compilation.js:382 Compilation._addModuleChain
    [www-react-client]/[react-scripts]/[webpack]/lib/Compilation.js:382:17

  • Compilation.js:464 Compilation.addEntry
    [www-react-client]/[react-scripts]/[webpack]/lib/Compilation.js:464:8

  • SingleEntryPlugin.js:22 SingleEntryPlugin.
    [www-react-client]/[webpack]/lib/SingleEntryPlugin.js:22:15

  • Tapable.js:229 Compiler.applyPluginsParallel
    [www-react-client]/[react-scripts]/[tapable]/lib/Tapable.js:229:14

  • Compiler.js:488
    [www-react-client]/[react-scripts]/[webpack]/lib/Compiler.js:488:8

  • Tapable.js:131 Compiler.applyPluginsAsyncSeries
    [www-react-client]/[react-scripts]/[tapable]/lib/Tapable.js:131:46

  • Compiler.js:481 Compiler.compile
    [www-react-client]/[react-scripts]/[webpack]/lib/Compiler.js:481:7
    `

Thanks

Most helpful comment

OK - found the issue for me. I had a devDependency (an older version of kadira/storybook) that was depending on an old version of webpack 1.4.x - and that was what was being installed, not 2.5.x. I yarn removed the storybook package, yarn install and yarn start worked like a charm.

All 11 comments

I get this same error - after yarn start I get the following error in the terminal:

(node:88695) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.

Then that is removed and the above error displays in the terminal as well as the console/browser

OK - found the issue for me. I had a devDependency (an older version of kadira/storybook) that was depending on an old version of webpack 1.4.x - and that was what was being installed, not 2.5.x. I yarn removed the storybook package, yarn install and yarn start worked like a charm.

Seems like the order in package.json matters too. Putting storybook last in the dev dependencies seems to fix it for me.

For me, this was caused by an old version of html-webpack-plugin. Running yarn remove html-webpack-plugin and yarn add --dev html-webpack-plugin fixed it for me.

Note you shouldn't install any plugins directly if you don't eject.

@gaearon, is it possible to display more informative error messages instead of "Cannot read property 'request' of undefined"? There is plenty of the time required to find the issue when this happens.

How did you get this issue? From my understanding it only happens when you knowingly install tools like Webpack (or rather their incompatible versions) into a projected generated with Create React App. Which has always been unsupported.

Ideally we should do a preflight check and fail early with a meaningful message if we detect that installed Babel, Webpack, Jest etc manually. If you'd like to help implementing this there is an existing issue: https://github.com/facebookincubator/create-react-app/issues/1795.

I had to run eject to see a more understandable error.

If you see this error before ejecting something is wrong. But we can't figure out what if you don't provide a project reproducing this.

I'm locking this issue to prevent further drive-by comments.

+1s and "I have this too" are not helpful to diagnose the problem.

If you experience this problem please file a new bug report and fill all the fields including providing a project that reproduces this. You can either try to reproduce it on a new project, or delete as much as possible from your project until you find the bare minimum necessary to reproduce it. For this issue, reports without example projects are not helpful because this is almost certainly a problem with either the package manager you are using, or additional dependencies you installed manually.

To be clear, here's how you should generally solve this if you haven't ejected:

  • Delete package-lock.json and yarn.lock if you have them
  • Open your package.json
  • Verify you have react-scripts in it (if you don't, you ejected and this guide doesn't apply)
  • Verify you don't have webpack in it (if you do, remove it)
  • Run yarn (or npm install if you use npm)
Was this page helpful?
0 / 5 - 0 ratings

Related issues

fson picture fson  路  3Comments

adrice727 picture adrice727  路  3Comments

rdamian3 picture rdamian3  路  3Comments

AlexeyRyashencev picture AlexeyRyashencev  路  3Comments

Aranir picture Aranir  路  3Comments