webentwicklung-frage-antwort-db.com.de

webpack: Uncaught ReferenceError: require ist nicht definiert

Dieser Fehler tritt auf, wenn in Webpack target = node, aber ich habe target=web (Standard)

auch ich lade nicht reactjs extern

dieser Fehler tritt beim Laden der App im Browser auf

was mache ich falsch?

In der Konsole

 enter image description here

Datei

 enter image description here  enter image description here

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 using

babel-preset-env

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

vielen Dank :)

Ich habe einen Hinweis gefunden

In FacebooksReaktions-App-Generator erstellenBundle, das es zeigt

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

aber in meinem Fall zeigt es nur

module.exports = require("react");
javascriptreactjswebpackecmascript-6babeljs
8
vijay

Sie sollten nicht verwenden 

externals: [nodeExternals()],

in der Web-App. Laut https://github.com/liady/webpack-node-externals ist es nur für das Backend. Da Sie nodeExternals in der Web-App verwenden, erhalten Sie CommonJS-Module, die die eingebaute Knotenfunktion require erwarten. Also einfach entfernen, um den Fehler zu beheben.

9
Maxim Kuzmin

Ich habe diese config lokal eingerichtet (abgesehen von den äußeren Dingen, die anscheinend spezifisch für Ihre Umgebung sind) und es hat funktioniert.

package.json 

{
  "name": "test-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-react": "^6.24.1",
    "webpack": "^3.5.5"
  },
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  }
}

.babelrc 

{
  "presets": [
    "react",
    [
      "env",
      {
        "targets": {
          "browsers": ["last 2 versions"]
        },
        "debug": true,
        "modules": "commonjs"
      }
    ]
  ]
}

webpack.config.js 

const config = {
  target: 'web',
  entry: './index.js',
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/build',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
    ],
  },
};
module.exports = config;

index.js 

import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<div>Hello</div>, document.getElementById('root'));

index.html 

<body>
    <div id="root" />
    <script src=" ./build/main.bundle.js "></script>
</body>

Beim Ausführen von npm start wurde das Bundle erstellt, und index.html führte die Reakt-App aus.

2
BoxerBucks