[英]Unable to load stage-3 javascript file using babel-loader from webpack
Following the Auth0 documentation , they have a JavaScript file that has field variables (stage-3) . 根据Auth0文档 ,它们具有一个包含字段变量的JavaScript文件(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
. 在上方,意外令牌是
authenticated
之后的第一个=
符号。
Running the following command using babel-cli
parses the file successfully: 使用
babel-cli
运行以下命令成功解析文件:
$ 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. 仅当我运行应用程序时,才会引发错误,因此我怀疑webpack配置中有些混乱。
The following is my .babelrc
config: 以下是我的
.babelrc
配置:
{
"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: 我只包含了我的webpack配置的相关部分,但是可以在需要时提供完整的文件:
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'
}
// ...
The following are the babel/webpack dependency versions in my project: 以下是我项目中的babel / webpack依赖版本:
"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",
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
. 这很具体,但是很明显
babel
可以使用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. 在花了很多时间研究这个问题之后,尝试在webpack配置中使用不同的选项,使用
.babelrc
并强制webpack不使用它,使用stage-2
而不是stage-3
,我觉得我已经尝试了所有方法。
My configuration isn't much different than the one in Auth0's sample project. 我的配置与Auth0的示例项目中的配置没有太大不同。 Copying and pasting their
.babelrc
file into mine as well as their js
webpack rules didn't seem to have an effect either; 复制和粘贴其
.babelrc
文件到矿井以及他们js
的WebPack规则似乎没有一个可具有影响; I just can't get it to work with my project. 我只是无法使其与我的项目一起工作。
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. 我发现大多数有webpack问题的人(排除了加载程序问题后)都遇到了问题,因为webpack配置中存在一些错误的设置。
For my webpack config, I needed to change this: 对于我的webpack配置,我需要更改此设置:
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. 因为我的
webpack.config.js
文件存在于src
下,所以问题可能出在我的include
属性中的..
参数没有指向要在其中查找.js
文件的正确文件夹。
I needed to exclude node_modules
because it would otherwise try to parse files in that directory. 我需要排除
node_modules
因为否则它将尝试解析该目录中的文件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.