Next.js 模块解析失败：意外字符 '�' (1:0)答案

【问题标题】：Next.js Module parse failed: Unexpected character '�' (1:0)Next.js 模块解析失败：意外字符 '�' (1:0)
【发布时间】：2021-08-26 13:39:28
【问题描述】：

您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。见https://webpack.js.org/concepts#loaders

我在网络上尝试了多种与该问题对应的方法，但似乎没有任何效果。我一直无法找到解决此问题的方法。这就是我的 next.config.js 文件的样子

const withPlugins = require('next-compose-plugins')
const withImages = require('next-images')
const CompressionPlugin = require('compression-webpack-plugin')
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

let prefixUrl = ''
let imgLoaderUrl = ''

switch (process.env.ENV) {
  case 'production':
    prefixUrl = 'https://webstatic.circleslive.com'
    imgLoaderUrl = 'https://webstatic.circleslive.com'
    break
  case 'staging':
    prefixUrl = 'https://staging-webstatic.circleslive.com'
    imgLoaderUrl = 'https://staging-webstatic.circleslive.com'
    break
  case 'development':
    prefixUrl = ''
    imgLoaderUrl = '/_next/image'
    break
  default:
    prefixUrl = ''
    imgLoaderUrl = '/_next/image'
    break
}

const nextConfig = {
  poweredByHeader: false,
  trailingSlash: false,
  compress: true,
  future: {
    webpack5: true,
  },
  env: {
    ENV: process.env.ENV,
  },

  serverRuntimeConfig: {
    STRIPE_SECRET_KEY: process.env.STRIPE_SECRET_KEY,
  },

  images: {
    loader: 'default',
    path: imgLoaderUrl,
  },
  webpack: (config) => {
    config.optimization.minimize = true
    config.plugins.push(
      new CompressionPlugin({
        test: /\.js$|\.css$|\.html$/,
      }),
    )
    return config
  },
  build: {
    extend(config) {
      config.module.rules.push({
        options: {
          fix: true,
        },
      })
    },
  },
}

module.exports = withPlugins(
  [
    [
      withImages,
      {
        assetPrefix: prefixUrl,
        dynamicAssetPrefix: true,
        inlineImageLimit: false,
      },
    ],
    [withBundleAnalyzer],
  ],
  nextConfig,
)

【问题讨论】：

标签： reactjs webpack next.js

【解决方案1】：

尝试以下方法：

module.exports = withPlugins(
  [
    [
      {
        assetPrefix: prefixUrl,
        dynamicAssetPrefix: true,
        inlineImageLimit: false,
      },
    ],
    [withBundleAnalyzer],
  ],
  withImages(nextConfig)
)

【讨论】：