我遇到Illegal import declaration
错误。当我尝试将反应js repo与webpack集成时
我从https://github.com/dptoot/react-event-calendar/blob/master/example/src/example.js
迁移了原始源代码如何解决Illegal import declaration
错误?
我认为import
语法仅适用于某些js lib?
ERROR in ./app/main.js
Module build failed: Error: Parse Error: Line 2: Illegal import declaration
at throwError (/Users/poc/sandbox/ha/node_modules/jsx-loader/node_modules/jstransform/node_modules/esprima-fb/esprima.js:2823:21)
var React = require('react');
const EventCalendar = require('react-event-calendar');
import moment from 'moment';
import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';
import Button from 'react-bootstrap/lib/Button';
import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar';
import Popover from 'react-bootstrap/lib/PopOver';
import Overlay from 'react-bootstrap/lib/Overlay';
var path = require('path');
var webpack = require('webpack');
var config = module.exports = {
// the base path which will be used to resolve entry points
context: __dirname,
// the main entry point for our application's frontend JS
entry: './app/main.js',
output: {
filename: 'main.js'
},
resolve: {
extensions: ['', '.js', '.jsx', '.ts']
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'jsx-loader?insertPragma=React.DOM&harmony' }
]
}
};
答案 0 :(得分:8)
通过babel-loader
使用Babel转换import
声明(如果需要,可以转换为其他ES2015)。 http://babeljs.io/docs/setup/#webpack
答案 1 :(得分:1)
@JMM回答说,你似乎需要babel-loader
。另外,我还是面临同样的问题,最后通过编辑webpack.config.js来解决这个问题,比如
module: {
loaders: [
- {test: /\.jsx?$/, loader: 'babel-loader'},
- {test: /\.jsx$/, loader: 'jsx-loader'}
+ {test: /\.jsx$/, loader: 'jsx-loader'},
+ {test: /\.jsx?$/, loader: 'babel-loader'}
]
},
或因为jsx-loader
看起来不再使用此配置,可以将其删除。
我希望它会有所帮助