找不到模块：错误：无法解析“/Users/<用户名>/Documents/gift-test/client”中的“./node_modules/react”

Question

因此，对于我的项目（使用 React 和 Redux），我一直遇到“找不到模块”的错误。我已经在 google 和 stackoverflow 上搜索了几个解决方案，并且看到人们说我的 node_modules 出了问题，所以我删除了它们，并且还 npm install （重新安装）。错误仍然存​​在，我认为这与我的 webpack.config.js 文件有关......

\n

我只是希望构建能够正常工作并且反应元素和组件能够渲染。

\n

错误

\n

Module not found: Error: Can't resolve './node_modules/react' in '/Users/<user-name>/Documents/gift-test/client'\n\nERROR in ./client/index.js\nModule not found: Error: Can't resolve './node_modules/react' in '/Users/<user-name>/Documents/gift-test/client'\n @ ./client/index.js 1:0-41 15:21-26 17:16-21\n\nERROR in ./client/index.js\nModule not found: Error: Can't resolve './node_modules/react-dom' in '/Users/<user-name>/Documents/gift-test/client'\n @ ./client/index.js 2:0-50 15:0-6\n\nERROR in ./client/index.js\nModule not found: Error: Can't resolve './node_modules/react-redux' in '/Users/<user-name>/Documents/gift-test/client'\n @ ./client/index.js 3:0-54 15:41-49\n\nERROR in ./client/store.js\nModule not found: Error: Can't resolve './node_modules/redux' in '/Users/<user-name>/Documents/gift-test/client'\n @ ./client/store.js 1:0-68 7:12-23\n @ ./client/index.js\n\nERROR in ./client/store.js\nModule not found: Error: Can't resolve './node_modules/redux-devtools-extension' in '/Users/<user-name>/Documents/gift-test/client'\n @ ./client/store.js 2:0-78 7:34-53\n @ ./client/index.js\n

\n

webpack.config.js

\n

const path = require('path')\nconst HtmlWebpackPlugin = require('html-webpack-plugin')\n\nmodule.exports = {\n    //start at entry\n    entry: './client/index.js',\n    // devtool: "eval-source-map",\n    mode: process.env.NODE_ENV,\n    //Run these rules on it & go through the loaders\n    module: {\n        rules: [\n            { test: /\\.svg$/, use: 'svg-inline-loader' },\n            { test: /\\.css$/, use: [ 'style-loader', 'css-loader' ] },\n            { test: /\\.jsx?$/,\n                exclude: /(node_modules|bower_components)/,\n                use: {\n                    loader: 'babel-loader',\n                    options: {\n                        presets: ['@babel/preset-env', '@babel/preset-react'],\n                        // plugins: ['@babel/plugin-proposal-object-rest-spread']\n                    }\n                }\n            },\n        ]\n    }, \n    output: {\n        path: path.resolve(__dirname, 'dist'),\n        filename: 'bundle.js'\n    },\n        resolve: {\n        extensions: ['.js', '.jsx'],\n    },\n    plugins: [\n        new HtmlWebpackPlugin({\n            template: 'client/index.html'\n        })\n    ], \xc2\xa0\n    devServer: {\n        publicPath: "/build/",\n        proxy: {\n            'api':'http://localhost:3000',\n        },\n    },  \n    resolve: {\n        extensions: ['.js', '.jsx'],\n    },\n}\n

\n

package.json 的开始部分

\n

{\n  "name": "gift-test",\n  "version": "1.0.0",\n  "description": "",\n  "main": "index.js",\n  "scripts": {\n    "start": "cross-env NODE_ENV=production webpack-dev-server --open",\n    "build": "cross-env NODE_ENV=production webpack",\n    "dev": "cross-env NODE_ENV=development concurrently \\"nodemon server/server.js\\" \\"webpack-dev-server --open\\" "\n  },\n  "babel": {\n    "presets": [\n      "@babel/preset-env",\n      "@babel/preset-react"\n    ]\n  }\n

\n

索引.js

\n

import React from './node_modules/react';\nimport { render } from './node_modules/react-dom';\nimport { Provider } from './node_modules/react-redux';\nimport App from './App.jsx';\nimport store from './store.js';\n// import styles from './index.css'\n// import './index.css';\n\nrender(\n    <Provider store = {store}>\n        <App/>\n    </Provider>,\n    document.getElementById('app')\n);\n

\n

一般文件结构

\n

Client\n  -Actions\n    -actions.js\n  -Components\n    -component1\n    -component2\n    -component3\n  -Constants\n    -actionTypes.js\n  -Containers\n    -Container1\n    -Container2\n  -Reducers\n    -Reducers (Reducer Logic)\n    -Index.js(Combined Reducers)\n  \n  -App.jsx\n  -index.html\n  -index.css\n  -index.js (Provider & imported store).\n  -store.js\n  \n

\n

Answer 1

因为你需要安装react作为依赖。只需执行此命令即可安装npm i react

\n

答案：导入像这样反应\xc3\xacmport React from 'react';

\n