webpack:未捕获的ReferenceError:未定义要求 [英] webpack : Uncaught ReferenceError: require is not defined

问题描述

这个错误出现在 webpack target = node 但我已经完成了 target=web(default)

This error comes when in webpack target = node but i have done target=web(default)

我也没有在外部加载 reactjs

also i am not loading reactjs externally

在浏览器中加载应用时出现此错误

this error comes on loading app in browser

我做错了什么?

在控制台中

文件

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const nodeExternals = require('webpack-node-externals');

const config = {
    target: 'web',
    externals: [nodeExternals()],
    entry: './src/index.js',
    output: {
        filename: '[name].bundle.js',
        path: __dirname + '/build'
    },
    module: {
        rules: [
            {
                test: /.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            {
                test: /.(png|svg|jpe?g|gif)$/,
                use: [{
                        loader: 'file-loader',
                        options: {
                            name: '[path][name].[ext]'
                        }
                    }
                ]
            },
            {
                test: /.(woff|woff2|eot|ttf|otf)$/,
                use: ['file-loader']
            }
        ]
    },
    devtool: 'inline-source-map',
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Instarem.com'
        })
    ]
};

module.exports = config;

.babelrc 使用

{
    "presets": [
        "react",
        [
            "env",
            {
                "targets": {
                    "browsers": ["last 2 versions"]
                },
                "debug": true,
                "modules": "commonjs"
            }
        ]
    ],
    "plugins": [
        "transform-object-rest-spread",
        "transform-class-properties"
    ]
}

谢谢:)

我找到了线索

<小时>

在 facebook 的创建反应应用生成器捆绑它显示

module.exports = __webpack_require__(/*! ./lib/React */ "./node_modules/react/lib/React.js");

但就我而言，它只显示

module.exports = require("react");

推荐答案

你不应该使用

externals: [nodeExternals()],

在网络应用程序中.根据 https://github.com/liady/webpack-node-externals 是仅用于后端.由于您在 Web 应用程序中使用 nodeExternals，您将获得 CommonJS 模块，因此需要内置节点 require 函数.所以只需将其删除即可修复错误.

in web app. According to https://github.com/liady/webpack-node-externals it is only for backend. Since you use nodeExternals in web app you get CommonJS modules, that expects built in node require function. So just remove it to fix error.

这篇关于webpack:未捕获的ReferenceError:未定义要求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！