import issue: Unable to resolve @import "~@fontsource/roboto" from xxx/node_modules/react-material-web/dist when using vite as bundler

[creamIcec]

Me and my colleague can reproduce this issue by following steps below:

1. create a new react app using vite as bundler by running command npm init vite@latest --template and choose react and typescript as scaffold;
2. run npm install react-material-web (at the moment its version is 1.0.5);
3. using the library components in project;
4. when run npm run dev to start server, the error raised: Unable to resolve @import "~@fontsource/roboto" from xxx/node_modules/react-material-web/dist

A temporary solution would be removing the ~ symbol in the import statement at the 2nd line in /node_modules/react-material-web/dist/styles.css which means to turn
@import '~@fontsource/roboto';
into
@import '@fontsource/roboto';

After doing this little tweak it works.
I don't know if this is an issue related to vite bundler, but I think it's beneficial to first summit an issue here as it may affect some projects using vite.

[creamIcec]

In addition, haven't tried with other bundlers like webpack, so not so sure it's related to vite.

[creamIcec]

It's quite fast for this issue to be solved. By the way thank you for your project making us easily using material components in react apps!

[anthonyleung-dev]

Thank you for your support and for reporting the issue. I mistakenly included the tilde (~) symbol in the import statement due to my use of SCSS. I have now removed the tilde, so it should be compatible across all environments.