Module not found: Error: Can't resolve './node_modules/react' in '/Users/<user-name>/Documents/gift-test/client'
27,197
Because you need to install react as a dependency. To install just execute this command npm i react
ANSWER: import react like this ìmport React from 'react';
Author by
TheRoadLessTaken
Updated on July 09, 2022Comments
-
TheRoadLessTaken almost 2 years
So for my project (using React and Redux), I keep having errors of 'Module Not Found'. I've google'd & stackoverflow'd several solutions and have seen people say that there's something messed up with my node_modules so I've deleted them, and also npm install (reinstalled). The error still persists, and I think it has to do with my webpack.config.js file...
I simply just want the build to work properly and the react elements & components to render.
Errors
Module not found: Error: Can't resolve './node_modules/react' in '/Users/<user-name>/Documents/gift-test/client' ERROR in ./client/index.js Module not found: Error: Can't resolve './node_modules/react' in '/Users/<user-name>/Documents/gift-test/client' @ ./client/index.js 1:0-41 15:21-26 17:16-21 ERROR in ./client/index.js Module not found: Error: Can't resolve './node_modules/react-dom' in '/Users/<user-name>/Documents/gift-test/client' @ ./client/index.js 2:0-50 15:0-6 ERROR in ./client/index.js Module not found: Error: Can't resolve './node_modules/react-redux' in '/Users/<user-name>/Documents/gift-test/client' @ ./client/index.js 3:0-54 15:41-49 ERROR in ./client/store.js Module not found: Error: Can't resolve './node_modules/redux' in '/Users/<user-name>/Documents/gift-test/client' @ ./client/store.js 1:0-68 7:12-23 @ ./client/index.js ERROR in ./client/store.js Module not found: Error: Can't resolve './node_modules/redux-devtools-extension' in '/Users/<user-name>/Documents/gift-test/client' @ ./client/store.js 2:0-78 7:34-53 @ ./client/index.js
webpack.config.js
const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { //start at entry entry: './client/index.js', // devtool: "eval-source-map", mode: process.env.NODE_ENV, //Run these rules on it & go through the loaders module: { rules: [ { test: /\.svg$/, use: 'svg-inline-loader' }, { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/preset-react'], // plugins: ['@babel/plugin-proposal-object-rest-spread'] } } }, ] }, output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, resolve: { extensions: ['.js', '.jsx'], }, plugins: [ new HtmlWebpackPlugin({ template: 'client/index.html' }) ], devServer: { publicPath: "/build/", proxy: { 'api':'http://localhost:3000', }, }, resolve: { extensions: ['.js', '.jsx'], }, }
Beginning part of package.json
{ "name": "gift-test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "cross-env NODE_ENV=production webpack-dev-server --open", "build": "cross-env NODE_ENV=production webpack", "dev": "cross-env NODE_ENV=development concurrently \"nodemon server/server.js\" \"webpack-dev-server --open\" " }, "babel": { "presets": [ "@babel/preset-env", "@babel/preset-react" ] }
Index.js
import React from './node_modules/react'; import { render } from './node_modules/react-dom'; import { Provider } from './node_modules/react-redux'; import App from './App.jsx'; import store from './store.js'; // import styles from './index.css' // import './index.css'; render( <Provider store = {store}> <App/> </Provider>, document.getElementById('app') );
General File Structure
Client -Actions -actions.js -Components -component1 -component2 -component3 -Constants -actionTypes.js -Containers -Container1 -Container2 -Reducers -Reducers (Reducer Logic) -Index.js(Combined Reducers) -App.jsx -index.html -index.css -index.js (Provider & imported store). -store.js
-
mgm793 almost 4 yearstry this:
import React from 'react';
removing./node_modules
from the import -
TheRoadLessTaken almost 4 yearsIt worked tysm! I actually didn't even realize ./node_modules were there..... I swore I didnt add them there lol... what the heck.