search

anthonyleung-dev / react-material-web

This project aims to provide React components based on the Material Web design guidelines originally from https://github.com/material-components/material-web.
MIT License
10 stars 1 forks source link

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

Closed creamIcec closed 4 months ago

creamIcec commented 4 months ago

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 commented 4 months ago

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

creamIcec commented 4 months ago

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 commented 4 months ago

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.