Next.js Module parse failed: Unexpected character '�' (1:0)

Question

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

I tried multiple approaches on the web corresponding the issue but nothing seemed to work. I have not been able to find a solution to this problem. This is what my next.config.js file looks like

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

iunfixit · Accepted Answer · 2021-08-26 13:50:12Z

0

Try the following:

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

answered Aug 26, 2021 at 13:50

iunfixit

9945 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Next.js Module parse failed: Unexpected character '�' (1:0)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related