未找到模块：错误：无法解析“反应”答案

【问题标题】：Module not found: Error: Can't resolve 'react'未找到模块：错误：无法解析“反应”
【发布时间】：2020-01-07 04:20:10
【问题描述】：

我正在尝试使用 webpack 添加对现有项目的反应。之后

npm i react --save

我已经添加了

import React from 'react';
import ReactDOM from 'react-dom';

到包含所有导入的 webpack app.js

但是当我运行时

npm run build

我有一个错误

./Project.Web/webpack/app.js 中的错误

Module not found: Error: Can't resolve 'react' in 'C:\source\Project.Web\webpack'
 @ ./Project.Web/webpack/app.js 330:0-26

所以我猜一个原因可能是在 webpack 配置中在项目中有 webpack.common.config.js。我是 webpack 的新手，但我很惊讶 node_modules 没有任何参考。那么它应该是怎样的呢？

var path = require("path");
var webpack = require("webpack");

module.exports = {
    resolve: {
        alias: {
            React: path.resolve(__dirname, '../node_modules')
            jquery: path.resolve(__dirname, '../Project.Web/SharedComponents/Components/jquery/jquery-1.11.3'),
            d3: path.resolve(__dirname, "../Project.WebU/SharedComponents/Components/d3/d3.js"),
            d3Tip: path.resolve(__dirname, "../Project.Web/SharedComponents/Components/d3/d3.tip.v0.6.3.js"),
            underscore: path.resolve(__dirname, "../Project.Web/SharedComponents/Components/underscore/underscore.js"),
            hb: path.resolve(__dirname, "../Project.Web/SharedComponents/Components/handlebars/handlebars-v4.0.11.js"),
        },
        modules: [
            path.resolve(__dirname, "../Project.Web"),
            path.resolve(__dirname, "../Project.Web/SharedComponents"),
            path.resolve(__dirname, "./")
        ],
        extensions: ['.js']
    },

    module: {
        rules: [{
                test: require.resolve('../Project.Web/SharedComponents/Components/jquery/jquery-1.11.3'),
                use: [{
                        loader: 'expose-loader',
                        options: '$'
                    },
                    {
                        loader: 'expose-loader',
                        options: 'jQuery'
                    }
                ]
            },
            {
                test: require.resolve("../Project.Web/SharedComponents/Components/d3/d3.js"),
                use: [{
                    loader: 'expose-loader',
                    options: 'd3'
                }]
            }
        ]
    },


    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jquery: "jquery",
            jQuery: "jquery",
            "window.jquery": "jquery",
            "window.jQuery": "jquery",
            "window.$": "jquery",
            "d3": "d3",
            "d3.tip": "d3Tip",
            "_": "underscore",
            "Handlebars": "hb",
            "PubSub": "PubSub",
            "bootbox": "bootbox",
            "Mprogress": "Mprogress",
            "zxcvbn": "zxcvbn",

        })
    ]
};

【问题讨论】：

import React from 'react'; 定位在哪里？
@TonyNgo 有一个文件 /webpack/app.js 用于所有导入

标签： javascript reactjs webpack

【解决方案1】：

您可以使用这个 webpack 设置来响应我的 github 中的内容： https://github.com/behnamshateri/webpack-setup-for-react

【讨论】：