Webpack Imported Module Error During Redux Fundamentals

There’s a great Redux Fundamentals course over on Pluralsight – but some (including myself) have probably encountered a frustrating error that doesn’t appear to happen in the course.

A webpack imported module error:

Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0_react___default.a.createContext is not a function
    at Object.<anonymous> (Context.js:4)
    at Object.<anonymous> (bundle.js:704)
    at __webpack_require__ (bootstrap b78e52de2bfadc5fd934:19)
    at Object.<anonymous> (react-is.production.min.js:15)
    at Object.<anonymous> (bundle.js:24683)
    at __webpack_require__ (bootstrap b78e52de2bfadc5fd934:19)
    at Object.<anonymous> (bundle.js:25227)
    at __webpack_require__ (bootstrap b78e52de2bfadc5fd934:19)
    at Object.<anonymous> (main.js:3)
    at __webpack_require__ (bootstrap b78e52de2bfadc5fd934:19)

This results in a sad page when you run npm start:

The Solution

This is a known bug in the version of React (16.0.0) being used in the course.

Updating React and React-Dom should resolve the error for you.

Head to package.json and you should find React and React DOM:

    "react": "16.0.0",
    "react-dom": "16.0.0",

Add a caret to the beginning of both of these dependencies to upgrade to the latest minor and patch versions:

    "react": "^16.0.0",
    "react-dom": "^16.0.0",

Now run the npm update command for these dependencies:

npm update react react-dom

NPM will whirl away in the background and you’ll be updated to the latest minor and patch versions available.

    "react": "^16.13.1",
    "react-dom": "^16.13.1",

Currently these are 16.13.1, but I don’t anticipate any issues upgrading to further 16.x versions of both dependencies.

If you are encountering any issues, I have tested with the versions above and you can update your package.json to use these exact versions which will solve the problem:

    "react": "16.13.1",
    "react-dom": "16.13.1",

Refresh now, and voilá!

Still Not Working?

After updating the React and React-Dom modules, if you see an error regarding module build failure such as this:

utils.js:303 Uncaught Error: Module build failed: Error: ENOENT: no such file or directory, open 'C:\ps-redux-funamentals\node_modules\react\index.js'
    at Object.<anonymous> (utils.js:303)
    at __webpack_require__ (bootstrap e17faa0726616b7a89b0:19)
    at Object.<anonymous> (main.js:1)
    at __webpack_require__ (bootstrap e17faa0726616b7a89b0:19)
    at Object.<anonymous> (harmony-module.js:24)
    at __webpack_require__ (bootstrap e17faa0726616b7a89b0:19)
    at bootstrap e17faa0726616b7a89b0:65
    at bootstrap e17faa0726616b7a89b0:65

It’s likely you’ve not restarted after upgrading the modules. Kill your current localhost server/npm start command and retry npm start in the terminal window.