Unexpected Token Import, babel-loader not working?
Question
ERROR in ./app/main.js Module parse failed: /Users/dz2048/myapplication/app/main.js Line 1: Unexpected token You may need an appropriate loader to handle this file type. | import React from 'react';
I cannot figure out why I'm getting this error when i run webpack-dev-server. I see a lot of people have gotten this error, but for different reasons. I suspect that babel-loader is completely skipping and not transpiling my main.js file. First time setting this up on my own and I thought I followed the webpack docs well, but I guess not.
dependencies:
"dependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"prop-types": "^15.6.0",
"react": "^16.2.0",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"seamless-immutable": "^7.1.2"
},
"devDependencies": {
"babel-preset-env": "^1.6.1",
"webpack": "^3.10.0"
}
webpack.config.dev.js:
const path = require('path');
module.exports = {
entry: {
main: './app/main.js'
},
output: {
filename: 'bundle.js',
path: path.join(__dirname, '../public')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
};
script from package.json
"scripts": {
"web-dev": "webpack-dev-server --config web/webpack/webpack.config.dev.js --colors"
},
and lastly, my file structure:
myapplication/
app/
main.js
node_modules/
web/
public/
webpack/
webpack.config.dev.js
package.json
web/public/index.html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
2 answers
solution1
0 2017-12-25 21:44:11
I discovered the issue. My script in package.json was using webpack-dev-server instead of webpack . Serves me right for copying code from an example project I did not fully understand.
solution2
0 2017-12-26 02:55:16
change the loader part to this
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
and I think u missed this part
resolve: {
alias: {
'react$': 'your react location',
...
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.