使用带反应的电子时'require is not defined`错误

问题描述：

我有一个基于React的web应用程序，我试图从中构建一个电子应用程序。我已经得到了很多，应用程序似乎加载，但之间的某处我得到一个错误说require is not defined。使用带反应的电子时'require is not defined`错误

这些工具的版本，我使用的是：

的WebPack 3.6
反应15.6.1
电子1.7.6

下面是该行的一个屏幕截图，其中发生错误：

请注意require是在控制台中定义 - 我在某处读到这可能是一个竞争条件，但即使是这样的话，我该怎么办呢？

这里是我的webpack.config.js（请注意，我用electron-renderer目标）：

var path = require('path'); 
var webpack = require('webpack'); 
var StatsPlugin = require('stats-webpack-plugin'); 
var devServerPort = 3808; 

var presets = ['es2015', 'react', 'stage-0']; 

var options = { 
    entry: { 
    'application': [ 
     'react-hot-loader/patch', 
     'app/application.jsx' 
    ] 
    }, 
    output: {path: __dirname, filename: 'js/bundle.js' }, 

    resolve: { 
    modules: [ 
     path.join(__dirname, 'node_modules/'), 
     path.join(__dirname, 'app/') 
    ], 
    extensions: ['.js', '.jsx'] 
    }, 

    node: { 
    __dirname: false, 
    __filename: false 
    }, 

    plugins: [ 
    // must match electron.webpack.manifest_filename 
    new StatsPlugin('manifest.json', { 
     // We only need assetsByChunkName 
     chunkModules: false, 
     source: false, 
     chunks: false, 
     modules: false, 
     assets: true 
    }), 
    new webpack.ProvidePlugin({ 
     "React": "react", 
    }), 
    new webpack.ProvidePlugin({ 
     "ReactDOM": "react-dom", 
    }), 
    new webpack.ProvidePlugin({ 
     $: "jquery", 
     jQuery: "jquery" 
    }), 
    new webpack.DefinePlugin({ 
     'process.env.NODE_ENV': JSON.stringify('development'), 
     'process.env.BASE_URL': JSON.stringify('localhost:3000'), 
     'global': {}, // bizarre lodash(?) webpack workaround 
     'global.GENTLY': false // superagent client fix 

    }) 
    ], 

    module: { 
    loaders: [ 
     { test: /\.js$/, exclude: /node_modules/, loaders: "babel-loader", query: { presets: ['react', 'es2015', 'stage-0'] }}, 
     { test: /\.jsx$/, exclude: /node_modules/, loaders: "babel-loader", query: { presets: presets }}, 
     { test: /\.css$/, loader: "style-loader!css-loader" }, 
     { test: /\.png$/, loader: "url-loader?limit=100000" }, 
     { test: /\.jpg$/, loader: "file-loader" }, 
     { test: /\.(png|)$/, loader: 'url-loader?limit=100000' }, 
     { 
      test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
      loader: "file-loader" 
     }, 
     { test: /\.scss$/, loaders: ["style-loader", "css-loader?sourceMap", "sass-loader?sourceMap"] }, 
     { 
     test: /\.json$/, 
     loaders: ['json-loader'] 
     } 
    ] 
    }, 
}; 

options.target = 'electron-renderer'; 

module.exports = options;

我甚至使用webpack-target-electron-renderer尝试，但它造成更多的问题。

答

我以前遇到过类似的问题，如果实际上是同样的问题，那么如何解决它。

的要求你证明是包装IIFE，这意味着this不是window，但内部的功能，也就是说，当你试图找到require它不在范围内。为了解决这个问题，你需要使用imports-loader。

在你的情况，module然后loaders下，添加：

{ 
    test: require.resolve("/*require/import path which requires the file where require("url") is*/"), 
    use: "imports-loader?this=>window" 
}

希望这能解决你的问题。

谢谢杰克。不知道要放什么而不是'/ * require/import路径，它需要require（“url”）是* /'的文件。 'require（“url”）'语句在bundle.js中（由webpack命令输出）。 – hammads

说'require（“url”）'在'src/js/url.js'中，并且你的'webpack.config.js'在'src /'中，那么你可以使用'require.resolve（'./ js/URL'）'。有关我发布的链接的更多信息。 – Jack

答

你需要使用类似browserify或babelify。

查看更多深入解释here。

我已经在使用webpack并使用'electron-renderer'目标应该足够了？ – hammads

使用带反应的电子时'require is not defined`错误

相关推荐