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

Question

>希望有人能帮助我解决我正在努力解决的问题 - 似乎是 babel-loader 的常见问题，但我无法解决。

我正在尝试将一个新的库反应键控文件浏览器添加到现有的 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 核心中看不到任何我不应该加载的内容。

导入大致在这里：

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",

以下是巴贝尔克的内容：

{
"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 } } }]]
};

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

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;
}