如何解决模块解析失败:意外的令牌?

运行npm run build时出现此错误:

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”)

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

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
        }
      }]
    }]
  }
};
gddgv 回答:如何解决模块解析失败:意外的令牌?

您的webpack配置不处理React的JSX语法。您需要使用一些装载程序对其进行更新才能正常工作(这里是教程:https://www.valentinog.com/blog/babel/

我建议您首先使用create-react-app,它将所有这些配置抽象化:https://github.com/facebook/create-react-app。这样一来,您就可以更轻松地开始做出反应,并且可以在准备好/需要时对其进行自定义。

本文链接:https://www.f2er.com/2666110.html

大家都在问