问题
Overview
Following the Auth0 documentation, they have a JavaScript file that has field variables (stage-3). When running my app, I get the following error:
ERROR in ./src/auth/AuthService.js
Module parse failed: Unexpected token (7:16)
You may need an appropriate loader to handle this file type.
|
| export default class AuthService {
| authenticated = this.isAuthenticated();
| authNotifier = new EventEmitter();
|
Above, the unexpected token is the first =
sign after authenticated
.
Diagnosing the Error
- Downloading and running the sample project from Auth0's Github works successfully.
Running the following command using
babel-cli
parses the file successfully:$ node node_modules\babel-cli\bin\babel.js src\auth\AuthService.js --presets stage-3
It is only when I run the application that the error is thrown, so I suspect there's something fishy in the webpack config.
My Configuration
The following is my .babelrc
config:
{
"presets": [
["env", { "modules": false }],
"stage-3"
],
"plugins": ["transform-runtime"]
}
I've only included the relevant parts of my webpack config, but can provide the full file if necessary:
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
// ...
{
test: /\.js$/,
loader: 'babel-loader',
include: [path.join(__dirname, '..', 'src')],
},
// ...
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json'],
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
// ...
Dependencies Info
The following are the babel/webpack dependency versions in my project:
"babel-core": "^6.26.0",
"babel-eslint": "^8.2.2",
"babel-loader": "^7.1.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"webpack": "^3.6.0",
With All That Said
How can I further figure out what is causing the error to be thrown? It's pretty specific, but it's clear that babel
can process the file just fine using the babel-cli
. After spending many hours researching this issue, trying different options in the webpack config, using .babelrc
and forcing webpack to not use it, using stage-2
instead of stage-3
, I feel like I've tried everything.
My configuration isn't much different than the one in Auth0's sample project. Copying and pasting their .babelrc
file into mine as well as their js
webpack rules didn't seem to have an effect either; I just can't get it to work with my project.
回答1:
I've found that most people that have had webpack problems (after ruling out the loader issue) have the issue because there is something incorrect setup in your webpack config.
For my webpack config, I needed to change this:
module: {
rules: [
// ...
{
test: /\.js$/,
loader: 'babel-loader',
include: [path.join(__dirname, '..', 'src')],
},
// ...
]
},
to this:
module: {
rules: [
// ...
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
// ...
]
},
Because my webpack.config.js
file existed under src
, so the issue might've been that the ..
argument in my include
property wasn't pointing to the right folder to look for .js
files in.
I needed to exclude node_modules
because it would otherwise try to parse files in that directory.
来源:https://stackoverflow.com/questions/49728054/unable-to-load-stage-3-javascript-file-using-babel-loader-from-webpack