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

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

php - How can i create a user dashboard -

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -