{"id":2867,"date":"2020-04-30T06:50:47","date_gmt":"2020-04-30T05:50:47","guid":{"rendered":"https:\/\/www.dpscomputing.com\/blog\/?p=2867"},"modified":"2021-03-01T21:23:40","modified_gmt":"2021-03-01T21:23:40","slug":"webpack-imported-module-error-during-redux-fundamentals","status":"publish","type":"post","link":"https:\/\/www.dpscomputing.com\/blog\/2020\/04\/30\/webpack-imported-module-error-during-redux-fundamentals\/","title":{"rendered":"Webpack Imported Module Error During Redux Fundamentals"},"content":{"rendered":"\n
\"React<\/figure><\/div>\n\n\n\n

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. <\/p>\n\n\n\n

A webpack imported module error:<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n
Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0_react___default.a.createContext is not a function\n    at Object.<anonymous> (Context.js:4)\n    at Object.<anonymous> (bundle.js:704)\n    at __webpack_require__ (bootstrap b78e52de2bfadc5fd934:19)\n    at Object.<anonymous> (react-is.production.min.js:15)\n    at Object.<anonymous> (bundle.js:24683)\n    at __webpack_require__ (bootstrap b78e52de2bfadc5fd934:19)\n    at Object.<anonymous> (bundle.js:25227)\n    at __webpack_require__ (bootstrap b78e52de2bfadc5fd934:19)\n    at Object.<anonymous> (main.js:3)\n    at __webpack_require__ (bootstrap b78e52de2bfadc5fd934:19)<\/code><\/pre>\n\n\n\n
This results in a sad page when you run npm start:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
The Solution<\/h2>\n\n\n\n
This is a known bug in the version of React (16.0.0) being used in the course. <\/p>\n\n\n\n
Updating React and React-Dom should resolve the error for you.  <\/p>\n\n\n\n
Head to package.json and you should find React and React DOM:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
    \"react\": \"16.0.0\",\n    \"react-dom\": \"16.0.0\",<\/code><\/pre>\n\n\n\n
Add a caret to the beginning of both of these dependencies to upgrade to the latest minor and patch versions:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
    \"react\": \"^16.0.0\",\n    \"react-dom\": \"^16.0.0\",<\/code><\/pre>\n\n\n\n
Now run the npm update command for these dependencies:<\/p>\n\n\n\n
npm update react react-dom<\/code><\/pre>\n\n\n\n
NPM will whirl away in the background and you’ll be updated to the latest minor and patch versions available.  <\/p>\n\n\n\n
    \"react\": \"^16.13.1\",\n    \"react-dom\": \"^16.13.1\",<\/code><\/pre>\n\n\n\n
Currently these are 16.13.1, but I don’t anticipate any issues upgrading to further 16.x versions of both dependencies.  <\/p>\n\n\n\n
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:<\/p>\n\n\n\n
    \"react\": \"16.13.1\",\n    \"react-dom\": \"16.13.1\",<\/code><\/pre>\n\n\n\n
Refresh now, and voil\u00e1!<\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
Still Not Working?  <\/h2>\n\n\n\n
After updating the React and React-Dom modules, if you see an error regarding module build failure such as this:<\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
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'\n    at Object.<anonymous> (utils.js:303)\n    at __webpack_require__ (bootstrap e17faa0726616b7a89b0:19)\n    at Object.<anonymous> (main.js:1)\n    at __webpack_require__ (bootstrap e17faa0726616b7a89b0:19)\n    at Object.<anonymous> (harmony-module.js:24)\n    at __webpack_require__ (bootstrap e17faa0726616b7a89b0:19)\n    at bootstrap e17faa0726616b7a89b0:65\n    at bootstrap e17faa0726616b7a89b0:65<\/code><\/pre>\n\n\n\n
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.  <\/p>\n","protected":false},"excerpt":{"rendered":"
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: This...<\/p>\n","protected":false},"author":1,"featured_media":2875,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"#Webpack Imported Module Error During #Redux Fundamentals\n\nFix by updating two #NPM modules!\n\n#DevelopmentIssues #React","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[2139],"tags":[2695,2704,2720,2719,2717,2718],"class_list":["post-2867","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development-issues","tag-react","tag-react-issues","tag-react-webpack-module-error","tag-redux","tag-webpack","tag-webpack-imported-module-error"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.dpscomputing.com\/blog\/wp-content\/uploads\/2020\/04\/react-and-webpack-logos.png","jetpack_shortlink":"https:\/\/wp.me\/p3nsfA-Kf","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/posts\/2867","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/comments?post=2867"}],"version-history":[{"count":2,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/posts\/2867\/revisions"}],"predecessor-version":[{"id":2994,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/posts\/2867\/revisions\/2994"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/media\/2875"}],"wp:attachment":[{"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/media?parent=2867"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/categories?post=2867"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/tags?post=2867"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}