next build can't load css from external libraries

[HonzaTuron]

Hello,

my next.config looks like this:

withAntdLess({
    publicRuntimeConfig: {
      environment: process.env.ENVIRONMENT,
      mainUrl: process.env.MAIN_URL,
    },
    i18n,
    rewrites: () => rewritedUrlsCompatible,
    redirects: () => redirectedUrls,
    lessVarsFilePath: './src/less/variables.less',
    webpack: (config, opts) => {
      // Storybook publishing
      config.module.rules.push({
        test: /\.html$/i,
        use: [
          {
            loader: 'html-loader',
            options: {
              // Disables attributes processing
              sources: false,
            },
          },
        ],
      });

      // Reduce the Size Of Moment.js
      config.plugins.push(
        new opts.webpack.ContextReplacementPlugin(
          /moment[/\\]locale$/,
          /cs|de|en|es|fr|hu|pl|ru|sk|uk|zh/,
        ),
      );

      if (process.env.SENTRY_AUTH_TOKEN) {
        config.plugins.push(
          new SentryWebpackPlugin({
            // sentry-cli configuration
            authToken: process.env.SENTRY_AUTH_TOKEN,
            release: process.env.ENVIRONMENT,

            // webpack specific configuration
            include: '.',
            ignore: ['node_modules', 'webpack.config.js'],
          }),
        );
      }

      return config;
    },
  })

module.exports = withLess;

And next dev works as expected.

But when I run next build, it fails and informs me that I have no css loader - css file from external library can't be loaded:

./node_modules/react-intl-tel-input/dist/main.css
HookWebpackError: Module parse failed: Unexpected character '�' (1:0)
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 would say css is bundled in next.js itself. Or am I wrong?

My dependencies:

{
    "@material-ui/core": "^4.12.3",
    "@material-ui/lab": "*",
    "@react-google-maps/api": "^2.2.0",
    "@sentry/react": "^6.11.0",
    "@tailwindcss/jit": "^0.1.18",
    "@tailwindcss/line-clamp": "^0.2.1",
    "@web/shop-logic": "^7.7.5",
    "classnames": "^2.3.1",
    "currency-symbol-map": "^5.0.1",
    "formik": "^2.2.9",
    "html-loader": "^2.1.2",
    "husky": "^7.0.1",
    "i18next-icu": "^2.0.3",
    "moment": "^2.29.1",
    "next": "^11.1.0",
    "next-i18next": "^8.6.0",
    "next-plugin-antd-less": "^1.3.0",
    "next-react-svg": "^1.1.3",
    "nprogress": "^0.2.0",
    "pm2": "^5.1.0",
    "qrcode.react": "^1.0.1",
    "qs": "^6.10.1",
    "react": "^17.0.2",
    "react-animate-height": "^2.0.23",
    "react-countdown": "^2.3.2",
    "react-dates": "^21.8.0",
    "react-dom": "^17.0.2",
    "react-google-recaptcha-v3": "^1.9.5",
    "react-gtm-module": "^2.0.11",
    "react-inlinesvg": "^2.3.0",
    "react-intl-tel-input": "^8.0.5",
    "react-markdown": "^7.0.0",
    "react-multi-carousel": "^2.6.3",
    "react-select": "^5.0.0-beta.0",
    "react-use": "^17.2.4",
    "redux-persist": "^6.0.0",
    "strapi-generate-types": "^0.1.4",
    "tailwindcss": "^2.2.7",
    "typescript": "^4.3.5",
    "webpack": "^5.50.0",
    "yup": "^0.32.9"
}

[SolidZORO]

This problem looks a bit complicated, and I haven't used next.js for a year, so see if you can solve it yourself?

[poka93]

Were you able to solve this ? I am facing the same error but with another lib (leaflet react)

Module parse failed: Unexpected character '�' (1:0)
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```

[HonzaTuron]

@poka93 I was able to fix it in next.config.js via this rule for png images (I'm using webpack5):

config.module.rules.push(
{
  test: /\.png/i,
  type: 'asset/resource',
  generator: { publicPath: '/', filename: '[name][ext]' },
}

[poka93]

I did this and it is working. I don't know why honestly 😅

webpack: (config) => {
config.module.rules.push(
  {
    test: /\.(png|jpg|gif|svg)$/,
    use: [
      {
        loader: 'url-loader',
        options: {
          limit: 25000,
          name: '[name].[hash:7].[ext]'
        }
      }
    ]
  }
)
return config;
}