使用帶反應的電子時'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嘗試，但它造成更多的問題。

來源

2017-10-15 hammads

我以前遇到過類似的問題，如果實際上是同樣的問題，那麼如何解決它。

的要求你證明是包裝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" 
}

希望這能解決你的問題。

來源

2017-10-15 19:27:33 Jack

謝謝傑克。不知道要放什麼而不是'/ * 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。

來源

2017-10-15 23:48:09 Cain

我已經在使用webpack並使用'electron-renderer'目標應該足夠了？ – hammads

使用帶反應的電子時'require is not defined`錯誤

回答

相關問題