I am running a react project and have no problem testing with the local dev server, however as soon as I make a production webpack build and load the page in the browser I get a white screen and in console I see an error saying "Uncaught ReferenceError: require is not defined". When I look into the specific javascript it starts around require("url"), but I don't have any require("url") in any of my javascript source files, so it must be from a module.
Here is the part that the console points to when it throws the error (cleaned up as best as I 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+" is marked as required in \n "+a+", but its value is
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 to
be a valid Number > 0 or equal to 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 to be a valid react element or equal to false.
"+a+" given.")})}
Here is my 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 all 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 where to look for modules
modules: [path.resolve(__dirname, "app"), "node_modules"],
//extensions that should be used to 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 a 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 your code
new webpack.optimize.UglifyJsPlugin({
minimize: true,
compressor: {
warnings: false
}
})
])
module.exports = config
use target: 'web'
(or nothing), instead of target: node