Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
marwajomaa opened this issue Jun 2, 2021 · 5 comments
Open

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

marwajomaa opened this issue Jun 2, 2021 · 5 comments

Comments

@marwajomaa
Copy link

marwajomaa commented Jun 2, 2021

flag

img1

@marwajomaa
Copy link
Author

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

@YousefYasin
Copy link

Did You solve it ?

@MartinCura
Copy link

MartinCura commented Sep 16, 2021

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

@andrewsantarin
Copy link
Contributor

andrewsantarin commented Sep 16, 2021

@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).

$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
Copy link

HonzaTuron commented Oct 15, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants