Incompatible CSS module usage in Vite 5

[sangquangnguyen]

Report a bug:

• Encounter error: node_modules/flag-icon-css/css/flag-icon.css does not provide an export named 'default' when using Vite 5 because of incompatible CSS module usage.

Basic information:

• react-flag-icon-css version: 1.0.25

• Module bundler: Vite (rollup) version: 5.0.12

• The output of node -v: 18.17.0

• I am using standard Css.

Description

• I'm using Vite that supports CSS Modules. However Vite deprecated the CSS default export (ref) in the version 5. So I encountered the issue when using our library because Vite does NOT exporting named default if we are missing ?inline query

Ref: https://vitejs.dev/guide/features.html#disabling-css-injection-into-the-page

How I am creating FlagIcon

import FlagIconFactory from 'react-flag-icon-css';

const FlagIcon = FlagIconFactory(React, { useCssModules: false });

Expected behavior or result

• Loaded CSS correctly when using this lib

Actual behavior or result

• Encounter error

Propose a feature:

• Release 1 version with the correct approach when using Vite

import stylesFlagIcon from 'flag-icon-css/css/flag-icon.css?inline'
import stylesMain from './styles/main.css?inline'
// Inject CSS  if needed
import 'flag-icon-css/css/flag-icon.css';
import './styles/main.css';