本文介绍了如何修复模块解析失败:意外令牌?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

当我运行 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.

这篇关于如何修复模块解析失败:意外令牌?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-19 02:49
查看更多