问题描述
当我运行 npm run build
时出现这个错误:
When I run npm run build
I got this error:
ERROR in ./src/client.js 7:2
Module parse failed: Unexpected token (7:2)
File was processed with these loaders:
* ./node_modules/jshint-loader/index.js
You may need an additional loader to handle the result of these loaders.
|
| const component = (
> <Router history={browserHistory}>
| {routes}
| </Router>
@ multi babel-polyfill ./src/client.js main[1]
./src/client.js(警告 browserHistory
-- 无法解析符号 'browserHistory' )
./src/client.js (with warning for browserHistory
-- Cannot resolve symbol 'browserHistory' )
import React from 'react';
import ReactDOM from 'react-dom';
import { browserHistory, Router } from 'react-router';
import routes from './routes';
const component = (
<Router history={browserHistory}>
{routes}
</Router>
);
ReactDOM.render(component, document.getElementById('react-view'));
我该如何解决?
反应:16.13.0
webpack: 4.42.0
webpack: 4.42.0
npm: 6.14.2
npm: 6.14.2
webpack-config.js
global.Promise = require('bluebird');
const webpack = require('webpack');
const path = require('path');
const plugins = [
new webpack.DefinePlugin({
'process.env': {
BROWSER: JSON.stringify(true),
NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
}
})
];
module.exports = {
entry: ['babel-polyfill', './src/client.js'],
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [{
test: /\.js$/, // include .js files
enforce: "pre", // preload the jshint loader
exclude: /node_modules/, // exclude any and all files in the node_modules folder
use: [{
loader: "jshint-loader",
// more options in the optional jshint object
options: { // ⬅ formally jshint property
camelcase: true,
emitErrors: false,
failOnHint: false
}
}]
}]
}
};
推荐答案
您的 webpack 配置不处理 React 的 JSX 语法.您需要使用一些加载程序对其进行更新才能使其正常工作(这是一个教程:https://www.valentinog.com/blog/babel/)
Your webpack config doesn't handle React's JSX syntax. You need to update it with some loaders for this to work (here's a tutorial: https://www.valentinog.com/blog/babel/)
我建议您首先使用 create-react-app,它将所有这些配置抽象化:https://github.com/facebook/create-react-app.以这种方式开始反应要容易得多,而且您可以在准备好/需要时对其进行自定义.
I would recommend you use create-react-app at first, which abstracts all those configurations away: https://github.com/facebook/create-react-app . It is way easier to get started with react this way and you can customise it when you're ready/if you need to.
这篇关于如何修复模块解析失败:意外令牌?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!