web-dev-qa-db-fra.com

webpack: Uncaught ReferenceError: require n'est pas défini

Cette erreur survient dans webpack target = node mais que j’ai fait target=web (par défaut)

aussi je ne charge pas reactjs en externe 

cette erreur survient lors du chargement de l'application dans le navigateur

Qu'est ce que je fais mal ?

En console

 enter image description here

Fichier

 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 en utilisant 

babel-preset-env

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

merci :)

J'ai trouvé Clue

Dans facebook créer un générateur d'application de réaction bundle, cela s'affiche}

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

_ {mais dans mon cas, cela ne montre que)

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

Vous ne devriez pas utiliser 

externals: [nodeExternals()],

dans l'application web. Selon https://github.com/liady/webpack-node-externals ce n'est que pour le backend. Puisque vous utilisez nodeExternals dans une application Web, vous obtenez des modules CommonJS, ce qui attend la fonction de noeud require intégrée. Alors, supprimez-le pour corriger l'erreur.

9
Maxim Kuzmin

J'ai mis cette configuration (moins les choses superflues qui semblent être spécifiques à votre env) localement et cela a fonctionné.

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>

L'exécution de npm start a créé le bundle et l'exécution de index.html a exécuté l'application react.

2
BoxerBucks