javascript - React webpack dev server works but when I create prod bundle I get reference error "require is not defined" -
i running react project , have no problem testing local dev server, make production webpack build , load page in browser white screen , in console see error saying "uncaught referenceerror: require not defined". when specific javascript starts around require("url"), don't have require("url") in of javascript source files, must module.
here part console points when throws error (cleaned best can)
function(e,t){e.exports=require("url")},function(e,t,n){"use strict";object.defineproperty(t,"__esmodule", {value:!0}),t.default=function(e){var t=[];return object.keys(e).foreach(function(n){return t.push(e[n])}),t}},function(e,t,n){"use strict";function a(e){return object.prototype.tostring.call(e).slice(8,-1)}function r(e) {return"number"===a(e)&&!isnan(e)&&e>0}function o(e){return e.isrequired=function(t,n,a){if(void 0===t[n])return new error("the prop "+n+" marked required in \n "+a+", value undefined.");e(t,n,a)},e}object.defineproperty(t,"__esmodule", {value:!0}),t.falseorelement=t.falseornumber=void 0,t.typeof=a,t.isvaliddelay=r;var i=n(0);t.falseornumber=o(function(e,t,n){var a=e[t];return!1===a||r(a)?null:new error(n+" expect "+t+" \n valid number > 0 or equal false. "+a+" given.")}),t.falseorelement=o(function(e,t,n){var a=e[t];return!1===a||(0,i.isvalidelement)(a)?null:new error(n+" expect "+t+" \n valid react element or equal false. "+a+" given.")})}
here webpack base/prod config:
//base config var path = require("path") var webpack = require('webpack') var bundletracker = require('webpack-bundle-tracker') module.exports = { context: __dirname, target: 'node', entry: './assets/js/index', output: { path: path.resolve('./assets/bundles/'), publicpath: '/static/bundles/', filename: "[name]-[hash].js" }, plugins: [ new webpack.provideplugin({ $: 'jquery', jquery: 'jquery', 'window.jquery': 'jquery' }), ], // add common plugins here module: { rules: [ /* { enforce: "pre", test: /\.js$/, loader: "eslint-loader", exclude: /node_modules/ },*/ {test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel-loader'], }, { test: /\.(scss|css)$/, loaders: ["style-loader", "css-loader", "sass-loader"] }, { test: /\.(jpg|png|gif)$/, loaders: ['url-loader?limit=25000'] }, { test: /\.(eot|svg|ttf|woff|woff2|otf)$/, loader: 'file-loader?name=public/fonts/[name].[ext]' }, ], }, resolve: { //tells webpack modules modules: [path.resolve(__dirname, "app"), "node_modules"], //extensions should used resolve modules extensions: ['.js', '.jsx'] } } //prod config var webpack = require('webpack') var bundletracker = require('webpack-bundle-tracker') var config = require('./webconfig.base.js') config.output.path = require('path').resolve('./assets/bundles') config.plugins = config.plugins.concat([ new bundletracker({filename: './webpack-stats-prod.json'}), // removes lot of debugging code in react new webpack.defineplugin({ 'process.env': { 'node_env': json.stringify('production') }}), // keeps hashes consistent between compilations new webpack.optimize.occurrenceorderplugin(), // minifies code new webpack.optimize.uglifyjsplugin({ minimize: true, compressor: { warnings: false } }) ]) module.exports = config
use target: 'web'
(or nothing), instead of target: node
Comments
Post a Comment