Question

我正在尝试修复插件，但似乎无法开箱即用。它最初使用的是webpack v2和babel 6，所以我决定将其升级为wepack 4和babel7。即使如此，它似乎也不适合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']
  }
};

回购可以在这里https://github.com/shorif2000/react-js-banner

Answer 1

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

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

预设将转换您的源代码和语法，使其与浏览器可以理解的本机JavaScript兼容。例如，{<1}}将允许您编写JSX（JavaScript作为XML）样式代码，该样式代码通常用于定义React组件，尽管浏览器并不自然地理解JSX 。

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

安装babel的react预设：

@babel/preset-react
在npm install --save-dev @babel/preset-react（或.babelrc）文件中，根据您对预置和插件进行Babel配置的位置，添加新的预置以处理react的JSX特定语法。

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

.babelrc：

.babelrc

更新{ "presets": [ "@babel/preset-env", "@babel/preset-react" ] }文件中的rules部分，以使用适当的加载程序：

webpack.config.js

注意：我还将在您的{ test: /\.(js|jsx)$/, include: path.resolve(__dirname, 'src'), exclude: /(node_modules|bower_components|build)/, use: ['babel-loader'] }中添加一个resolve部分，以配置如何在项目中解析模块。类似于：

webpack.config.js

为了完整起见，我使用React创建了一个简单的Web应用程序，并从webpack-dev-server提供服务。下面粘贴的是我整个resolve: { extensions: ['*', '.js', '.jsx'] },的内容：

webpack.config.js

希望有帮助！

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处理该文件

2 个答案: