如何修复你可能需要一个合适的加载器来处理这种文件类型，目前没有配置加载器来使用 webpack 4 处理这个文件

Question

我正在尝试修复一个插件，但似乎无法开箱即用。它最初使用的是 webpack v2 和 babel 6，所以我决定将它更新为 wepack 4 和 babel 7。即使如此，它似乎也不是 webpack。我得到的错误是

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]

我的 webpack 文件是

    var path = require('path');
module.exports = {
    mode: 'development',
  entry: ['@babel/polyfill','./src/index.js'],
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'index.js',
    libraryTarget: 'commonjs2'
  },

  module: {

    rules: [
      {
        test: /\.(js|jsx)$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /(node_modules|bower_components|build)/,
        use: ['babel-loader'] 
      },
      {
        test: /\.css$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /(node_modules|bower_components|build)/,
        use:['style-loader','css-loader']
      },
    ]
  },
  externals: {
    'react': 'commonjs react' 
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  }
};

repo 可以在这里找到 https://github.com/shorif2000/react-js-banner

Answer 1

问题是 webpack 不理解 React 的 JSX 语法，因此它无法正确处理这种文件类型。为了解决这个问题，你需要设置一个 webpack 加载器来将 JSX 转换为原生 JavaScript。为此，您需要利用 babel 的 babel-loader 并安装适当的 babel 预设，即 "@babel/preset-react" 预设。

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

预设将转换您的源代码和语法以与浏览器理解的本机 JavaScript 兼容。例如，@babel/preset-react 将允许您编写 JSX（JavaScript 为 XML）风格的代码，这通常用于定义 React 组件，尽管 JSX 不是浏览器自然理解.

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

安装babel的react preset:

npm install --save-dev @babel/preset-react
在你的.babelrc（或package.json）文件中，根据你对预设和插件的 Babel 配置，添加新的预设来处理 React 的 JSX 特定语法.

注意：如果您没有.babelrc文件，请在项目的根目录中添加一个文件并为其提供以下内容：

.babelrc:

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

更新 webpack.config.js 文件中的 rules 部分，以使用适当的加载器：

{ test: /\.(js|jsx)$/, include: path.resolve(__dirname, 'src'), exclude: /(node_modules|bower_components|build)/, use: ['babel-loader'] }

注意：我还会在您的 webpack.config.js 中添加一个 resolve 部分来配置模块在您的项目中的解析方式。大致如下：

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

为了完整起见，我使用 React 创建了一个简单的 Web 应用程序，并从 webpack-dev-server 提供服务。下面贴出我的全部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'
};

希望对您有所帮助！

Answer 2

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 4 处理这个文件

how to fix You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file with webpack 4

webpack

babeljs

babel-loader

如何修复 你可能需要一个合适的加载器来处理这种文件类型，目前没有配置加载器来使用 webpack 4 处理这个文件

how to fix You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file with webpack 4

webpack

babeljs

babel-loader

如何修复你可能需要一个合适的加载器来处理这种文件类型，目前没有配置加载器来使用 webpack 4 处理这个文件