Reputation: 67

Uncaught ReferenceError: exports is not defined

I am trying to use webpack to babel and package my web-app (React + ES6). However whenever I run the webpack-dev-server and hit the page I get bundle.js:1 Uncaught ReferenceError: exports is not defined What am I doing wrong?

Here is my webpack configuration:

var webpack = require('webpack');

module.exports = {
    entry : [
        './lib/index.js'
    ],
    output : {
        path : __dirname + '/dist/',
        libraryTarget: 'commonjs',
        filename : 'bundle.js'
    },
    plugins : [
        new webpack.NoErrorsPlugin()
    ],
    devtool: 'eval',
    module : {
        loaders : [
            {
                test : /\.js$/,
                loaders : [
                    'react-hot',
                    'babel'
                ],
                exclude : /node_modules/
            },
            {
                test : /\.(jpe?g|png|gif|svg)$/i,
                loaders : [
                    'url?limit=8192',
                    'img'
                ]
            },
            {
                test : /\.scss$/,
                include : /styles/,
                loaders : [
                    'style',
                    'css',
                    'sass'
                ]
            }
        ]
    },
    resolve : {
        extensions : ['', '.js', '.json']
    },
    externals : ['request']
};

Here is my package.json

{
...
"dependencies": {
  "babel-core": ": ^6.0.0",
  "lodash": ": ^4.6.0",
  "react-dom": ": ^0.14.0",
  "react-redux": ": ^4.0.0",
  "react": ": ^0.14.0",
  "redux-devtools": ": ^2.1.5",
  "redux-thunk": ": ^1.0.0",
  "redux": ": ^3.0.4",
  "request": ": ^2.69.0"
},
"devDependencies": {
  "babel-loader": ": ^6.1.0",
  "babel-preset-es2015": ": ^6.6.0",
  "babel-preset-react": ": ^6.5.0",
  "css-loader": ": ^0.23.0",
  "file-loader": ": ^0.8.4",
  "gulp": "^3.9.1",
  "gulp-babel": "^6.1.2",
  "img-loader": ": ^1.2.0",
  "node-sass": ": ^3.2.0",
  "react-hot-loader": ": ^1.3.0",
  "sass-loader": ": ^3.1.2",
  "style-loader": ": ^0.13.0",
  "webpack": ": ^1.12.9",
  "webpack-dev-server": ": ^1.14.1"
},
...
}

webpack-dev-server

var webpack = require('webpack'),
    WebpackDevServer = require('webpack-dev-server'),
    config = require('../webpack.config.js');

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  historyApiFallback: true
}).listen(8081, 'localhost', function (err, result) {
    if (err) {
      console.log(err);
    }

    console.log('Listening at localhost:8081');
});

.babelrc

{
   "presets": ["es2015", "react"]
}

gulpfile

var gulp = require('gulp'),
    babel = require('gulp-babel');

gulp.task('babel', function () {
    return gulp.src('src/**/*.js').pipe(babel({
        presets : ['es2015', 'react']
    })).pipe(gulp.dest('lib'));
});

gulp.task('default', ['babel']);

Upvotes: 4

Answers (3)

Joshua Wolff

Reputation: 3342

Changing the mode to production and the target to web fixed it for me.

 const clientConfig = {
        mode: 'production',
        target: 'web',
        ...
      }

  module.exports = [clientConfig]

Upvotes: 0

HerrPfister

Reputation: 67

I figured it out after starting from scratch again. I removed everything dealing with gulp, and just did everything through loaders. In addition, it seems that request just doesn't like to play along with webpack so I removed that dependency all together. I also adjusted my paths. It now works!

Here is my webpack:

var webpack = require('webpack'),
    path = require('path');

module.exports = {
    entry : {
        'name' : './src/index.js'
    },
    output : {
        path : path.join(__dirname, 'dist'),
        publicPath : '/assets/',
        filename : '[name].bundle.js'
    },
    plugins : [
        new webpack.NoErrorsPlugin()
    ],
    devtool : 'source-map',
    module : {
        loaders : [
            {
                test : /\.js$/,
                loaders : [
                    'react-hot',
                    'babel'
                ],
                include : path.join(__dirname, 'src')
            },
            {
                test : /\.(jpe?g|png|gif|svg)$/i,
                loaders : [
                    'url?limit=8192',
                    'img'
                ]
            },
            {
                test : /\.scss$/,
                include : path.join(__dirname, 'styles'),
                loaders : [
                    'style',
                    'css',
                    'sass'
                ]
            }
        ]
    },
    resolve : {
        extensions : [
            '',
            '.js',
            '.json',
            '.sass'
        ]
    }
};

here is my server

var webpack = require('webpack'),
    WebpackDevServer = require('webpack-dev-server'),
    config = require('../webpack.config.js');

new WebpackDevServer(webpack(config), {
    publicPath : config.output.publicPath,
    inline : true,
    hot : true,
    historyApiFallback : true
}).listen(8081, 'localhost', function (err, result) {
    if (err) {
        console.log(err);
    }

    console.log('Webpack-dev-server started successfully!');
    console.log('----------------------------------------');
    console.log('Listening at localhost: 8081\n');
});

here is my babelrc

{
    "presets": ["es2015", "react"]
}

Upvotes: 1

Frederick Mfinanga

Reputation: 1155

There's no webpack-dev-server on your scripts or dependencies. if you are serving your files with Node, and it depends on the build "start": "npm run build & npm run server" will run the commands concurrently, and something tells me that your app is served before the build finish. do this instead "start": "npm run build && npm run server"

also, not sure if hot: true should be in your output object on webpack config.

Upvotes: 1

Uncaught ReferenceError: exports is not defined

Answers (3)

Related Questions