如何修复您可能需要一个合适的加载程序来处理此文件类型，目前没有加载程序配置为使用webpack 4处理此文件

我正在尝试修复一个插件，但似乎无法将网页打包。它最初使用的是WebpackV2和Babel6，所以我决定将其升级到Wepack4和Babel7。即便如此，它似乎并没有被包装起来。我得到的错误是

ERROR in ./src/index.js 42:8
Module parse failed: Unexpected token (42:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     if (this.props.image && this.props.imageClass){
|       return(
>         <img
|           src={this.props.image}
|           className={this.props.imageClass}
 @ multi @babel/polyfill ./src/index.js main[1]

---

repo可在此处找到

问题是webpack不理解React的JSX语法，因此无法正确处理此文件类型。为了解决这个问题，您需要设置一个webpack加载器来将JSX转换为本机JavaScript。要实现这一点，您需要利用巴贝尔的

巴贝尔加载器

并安装适当的巴贝尔预设，即

“@babel/preset react”

预设

预设是一组用于支持特定语言功能的插件。您可以使用预设来利用浏览器中尚未实现的最新JavaScript特性

预设会将您的源代码和语法转换为与浏览器理解的本机JavaScript兼容。例如，

@babel/preset react

将允许您编写JSX（JavaScript为XML）样式的代码，这通常用于定义react组件，尽管浏览器并不自然理解JSX

也许您可以尝试以下步骤，看看这些步骤是否能解决您的问题：

安装巴别塔的反应预设：

npm安装——保存dev@babel/preset react

在

.babelrc

（或

package.json

）文件中，根据预设和插件的Babel配置，添加新预设以处理react的JSX特定语法

注意：如果您没有

.babelrc

文件，请将其添加到项目的根目录中，并提供以下内容：

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist'
  },
  mode: 'development'
};

.babelrc:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

更新

webpack.config.js

文件中的

rules

部分，以使用适当的加载程序：

{
测试：/\（js|jsx）$/，
包括：path.resolve（uu dirname，'src'），
排除：/（节点|模块|鲍尔|组件|构建）/，
用法：['babel-loader']
}

注意：我还将在

webpack.config.js

中添加一个

resolve

部分，以配置如何在项目中解析模块。大致如下：

 resolve: {
    extensions: ['*', '.js', '.jsx']
  },

为了完整起见，我使用React创建了一个简单的web应用程序，并从WebpackDev服务器提供服务。下面粘贴的是我的整个

webpack.config.js

内容：

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist'
  },
  mode: 'development'
};

---

希望这有帮助

NEXTJS错误已解决

添加next.config.js文件

const withPlugins = require("next-compose-plugins");
const withImages = require("next-images");
const withSass = require("@zeit/next-sass");
const withCSS = require("@zeit/next-css");
const withFonts = require("next-fonts");
const webpack = require("webpack");
const path = require("path");

module.exports = withFonts(
  withCSS(
    withImages(
      withSass({
        webpack(config, options) {
          config.module.rules.push({
            test: /\.(eot|ttf|woff|woff2)$/,
            use: {
              loader: "url-loader",
            },
          });
          config.resolve.modules.push(path.resolve("./"));
          return config;
        },
        sassOptions: {
          includePaths: [path.join(__dirname, 'styles')],
        },
        target:'serverless',
        
      })
    )
  )
);

---

我试着添加了一些技术，但没有用。我发布了我的webpack.config.js文件，该文件在呈现react组件时运行良好。如果有帮助的话，我可以将我的整个代码库粘贴到公共回购中，这样您就可以将您的代码与我的代码进行比较，并查看错误所在？问题在于webpack.config.js文件中的一个配置属性。我的回答有意义吗/你能让它工作吗？