I’m having some issues with this error that’s a pain in the, well. you know.
Module parse failed: Unexpected token (5:7)
File was processed with these loaders:
* ./node_modules/react-hot-loader/webpack.js
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| };
|
> export about from './about';
| export authenticator from './authenticator';
| export classroom from './classroom';
@ ./js/store/configure-store.development.js 20:0-42 36:60-68
@ ./js/store/configure-store.js 8:12-69
@ ./js/index.js 20:0-53 54:12-26
is my stack trace, I can’t figure out exactly what is wrong but it’s becoming tiresome I’m not sure at all where or what is going wrong here, below is my webpack config.
Maybe something stands out to you that doesn’t stand out to me.
I’m trying to port an webapp to the ~latest everything, or as closely as possible.
Why would I get the above error, I also have another post here with other errors that are somewhat releated, however I seem to have at least caused the error to stop popping up by removing the “require(“path/to/thing”)”…. which I’m sure is going to cause issues down the road.
// Load dependencies
const webpack = require('webpack');
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const mainPackageJson = require('./../package.json');
// File locations
const PATHS = {
js: path.resolve(__dirname, '../js'),
dist: path.resolve(__dirname, '../dist'),
modules: [
path.resolve(__dirname, '../node_modules/cleave.js')
]
};
exports = module.exports = {
mode: 'development',
entry: [
'babel-polyfill',
'webpack-dev-server/client?http://localhost:3457',
'webpack/hot/only-dev-server',
'./js/index'
],
output: {
path: PATHS.dist,
filename: '[name].js',
publicPath: '/dist'
},
resolve: {
extensions: ['.js', '.jsx']
},
devtool: 'eval-source-map',
optimization: {
runtimeChunk: "single",
splitChunks: {
cacheGroups: {
vendor: {
test: /[\/]node_modules[\/]/,
name: "vendor",
filename: "vendor.js",
chunks: "all"
}
}
}
},
plugins: [
// new config.optimization.splitChunks({name: 'vendor', filename: 'vendor.js'}),
// new webpack.HotModuleReplacementPlugin(),
// new webpack.NoEmitOnErrorsPlugin(),
new webpack.DefinePlugin({
__CONTENT__: JSON.stringify('#content'),
__DEV__: true,
__NOOP__: function () {
},
__VERSION__: JSON.stringify(mainPackageJson.version)
}),
new CopyPlugin({
patterns: [{
from: path.resolve(__dirname, '..', 'conf.js'),
to: 'conf.js'
}]
}
),
new MiniCssExtractPlugin({
filename: '[name].css'
})
],
module: {
noParse: /node_modules/quill/dist/quill.js/,
rules: [
{
test: /.gif$/,
loader: 'url-loader',
options: {
mimetype: 'image/png'
}
},
{
test: /.woff(2)?(?v=[0-9].[0-9].[0-9])?$/,
loader: 'url-loader',
options: {
mimetype: 'application/font-woff'
}
},
{
test: /.(ttf|eot|svg)(?v=[0-9].[0-9].[0-9])?$/,
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
},
{
test: /.s?css$/,
use: [MiniCssExtractPlugin.loader, "style-loader", "postcss-loader", "css-loader", "sass-loader",
// fallback: 'style-loader',
// use: ['css-loader', {
// loader: 'autoprefixer-loader',
// options: {
// browsers: 'last 3 version'
// }
// },
{
options: {
sassOptions: {
outputStyle: 'expanded',
includePaths: [
`${__dirname}/../node_modules`,
`${__dirname}/../scss`
]
}
}
}]
},
{
test: /.jsx?$/,
rules: [
{use: 'react-hot-loader/webpack'},
{
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {targets: "defaults"}]
]
}
}
}],
include: [
PATHS.js,
...PATHS.modules
]
}
]
},
devServer: {
static: path.resolve(__dirname, '..'),
historyApiFallback: true,
// hot: true,
host: 'localhost',
port: 3457
}
};
