React 无法编译错误：模块解析失败：意外的令牌。 您可能需要适当的加载程序来处理此文件类型

Question

希望有人可以帮助我解决我正在努力解决的这个问题——这似乎是 babel-loader 的一个常见问题，但我无法解决。

我正在尝试将新库react-keyed-file-browser添加到现有的 React 项目中。 当我尝试导入时，我收到此编译错误：

Failed to compile.
./node_modules/dnd-core/lib/reducers/index.js
Module parse failed: Unexpected token (12:16)
You may need an appropriate loader to handle this file type.
type: action.type,
payload: {
    ...action.payload,
    prevTargetIds: get(state, 'dragOperation.targetIds', []),
},

我在 dnd-core 中看不到任何我不应该加载的内容。

进口大致在这里：

import React, {Component} from 'react'
import ReactDOM from 'react-dom'
import Select from 'react-select'
import PropTypes from 'prop-types'
import { bindActionCreators } from 'redux'
import {connect} from 'react-redux'
import config from '../../config'

import FileBrowser from 'react-keyed-file-browser'

// style import
import './style.scss'

class Documents extends Component {
    
    constructor(props) {
        super(props)

以下是 package.json 的一些相关依赖项：

"babel-core": "6.26.0",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.1.2",
"babel-preset-react-app": "^3.1.1",
"babel-runtime": "6.26.0",
"react": "^16.8.6",
"react-keyed-file-browser": "^1.9.0",

以下是 babelrc 的内容：

{
  "presets": [ "es2015", "stage-0", "react"],

  "plugins": ["transform-runtime"],

  "env": {
    "build": {
      "optional": ["optimisation", "minification"]
    }
  }
}

我认为是 webpack.config 的相关部分：

{
    test: /\.(js|jsx|mjs)$/,
    enforce: 'pre',
    use: [
        {
            options: {
                formatter: eslintFormatter,
                eslintPath: require.resolve('eslint'),

            },
            loader: require.resolve('eslint-loader'),
        },
    ],
    include: paths.appSrc,
},
{
    oneOf: [
        {
            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
            loader: require.resolve('url-loader'),
            options: {
                limit: 10000,
                name: 'static/media/[name].[hash:8].[ext]',
            },
        },
        // Process JS with Babel.
        {
            test: /\.(js|jsx|mjs)$/,
            include: paths.appSrc,
            loader: require.resolve('babel-loader'),
            options: {
                cacheDirectory: true,
            },
        },
        // Css loader
        {
            test: /\.css$/,
            use: cssLoader,
        },
        // Sass loader
        {
            test: /\.scss$/,
            use: cssLoader.concat([
              require.resolve('sass-loader'),
            ]),
        },
        {
            // Exclude `js` files to keep "css" loader working as it injects
            exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
            loader: require.resolve('file-loader'),
            options: {
                name: 'static/media/[name].[hash:8].[ext]',
            },
        },
    ],
},

我可以在其他地方看到这个问题，但没有回答。 提前致谢！

Answer 1

将此代码添加到您的babelrc文件中：

module.exports = {
  presets: [["next/babel", { "preset-env": { targets: { node: true } } }]]
};

并修改url-loader的webpack配置文件：

webpack(config, options) {
      config.module.rules.push({
        test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
        use: {
          loader: "url-loader",
          options: {
            limit: 100000
          }
        }
      });
      return config;
    }