I am encountering an issue with integrating an ES6 npm package, specifically one called gamesystem, into my project and building it with webpack (along with babel). For some reason, the build fails to process any ES6 code within the external dependency. However, when I have the same code as a dependency with a relative path, it works perfectly fine.
Here is an example of the app code:
'use strict';
import World from 'gamesystem'; // This line breaks
//import World from '../node_modules/gamesystem'; // Also breaks
//import World from '../gamesystem'; // This line works (I copied the same directory gamesystem outside the node_modules directory)
let world = new World();
Error message:
ERROR in ./~/gamesystem/World.js
Module parse failed: /home/user/project/node_modules/gamesystem/World.js Line 3: Unexpected token
You may need an appropriate loader to handle this file type.
| 'use strict';
|
| import System from './System';
|
| export default class World {
@ ./src/app.js 3:18-39
Here is a snippet of the webpack configuration:
'use strict';
// Required modules
let WebpackNotifierPlugin = require('webpack-notifier');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let config = {
entry: {
app: __dirname + '/../src/app.js'
},
devtool: 'source-map',
devServer: {
stats: {
modules: false,
cached: false,
colors: true,
chunk: false
},
proxy: require('./devProxy')
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/,
query: {
presets: ['es2015', 'stage-0']
}
},
{
test: /\.css$/,
loader: 'style!css'
},
{
test: /\.html$/,
loader: 'raw'
}]
},
plugins: [
new WebpackNotifierPlugin(),
new HtmlWebpackPlugin({
template: __dirname + '/../src/index.html',
inject: 'body',
minify: false
})
]
};
module.exports = config;