Flags not showing in next.js and the input not clickable

[marwajomaa]

[marwajomaa]

How I can fix this problem in next.js, I can't see the flags showing and the input is not clickable?!!!

[YousefYasin]

Did You solve it ?

[MartinCura]

I am not having this problem in our Next.js app

[andrewsantarin]

@marwajomaa @YousefYasin @MartinCura the asset location written in the source code doesn't seem to play well with Next.js and Create React App (in CodeSandbox, at least).

react-intl-tel-input/src/intlTelInput.scss

Lines 279 to 280 in cd9f262

	$intl-tel-input-sprite-path: "./flags.png" !default;
	$intl-tel-input-sprite-2x-path: "./[email protected]" !default;

I read that Next.js has a static file serving feature which, if it works like Create React App, might work around this problem. See the ./public folder in my CodeSandbox.

Could you all copy the PNG files in the repo (or in the node_modules/react-intl-tel-input/dist folder) to the ./public folder, then observe what happens?

[HonzaTuron]

So I was able to fix it (I'm using Webpack 5 and Next.js 11) with following steps:

1. Copying flags.png and [email protected] to /public directory
2. Edit filename generator in Webpack in next.config.js:

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

Now the flags are displayed correctly.