Module not found: Error: Can't resolve 'windi.css'

[mkhennoussi]

Hi guys,

Thanks for your work on windicss.

I tried to add windicss in a Phoenix App. I've modified the webpack.config.js file by adding the WindiCSSWebpackPlugin.
When I add the import "windi.css"; in the app.js entry file, I get this error :
Module not found: Error: Can't resolve 'windi.css'

Where does this windi.css comes from ? (Sorry I'm not a webpack expert)
It seems to be a virtual module generated by the plugin, right ?
Is there a way to tell webpack to not look for it ?

Thanks !

[harlan-zw]

Hey @mkhennoussi

Thanks for the issue and apologies for the delay in getting back to you.

Could you try upgrading your package to v0.4.1 and try again.

Otherwise please share a reproduction repo and I'll do my best to fix it.

[lzm0x219]

This problem still exists

[HomyeeKing]

@harlan-zw I also met this issue,

// before
import 'windi.css'

// after bundle
import windiStyleSheet from 'windi.css';
 var _styleSheet = windiStyleSheet;

shouldn't the virtual module be replaced w/ something real?

[harlan-zw]

Hey guys, happy to look into this but I'll need a reproduction repo.

You can also try virtual:windi.css, which is the alias for windi.css

The module is indeed virtual, a webpack loader will match the name and inject the styles

[HomyeeKing]

@harlan-zw
I think maybe something wrong on project config and I haven't figure out:

I am building a component library w/ windicss and webapack
I transform code in ESM format so the user can get component tree-shaked, the problem is that the transformed code still contain windi.css import statement

import windiStyleSheet from 'windi.css';
 var _styleSheet = windiStyleSheet;

and the components are written in css module format which is

import styles from './index.module.css'
<div className={styles.container}  /> 

in my opinion, the virtual import statement should get removed and generate the demand class in the common css chunk

so I wonder can windicss be used for a library not just application

[harlan-zw]

Hey @HomyeeKing

That is correct in theory, the virtual module should be replaced.

I haven't really had much experience with this setup, if you are able to provide the repo you're working from I can take a look and maybe find a solution

[HomyeeKing]

@harlan-zw
The component library is using css-in-js and my expectation is that the end user don't have to care about configuring windicss, just use the library.
I've been thinking that whether the Atomic CSS framework like tailwindcss and windicss is not suitable for CSS-in-JS? Neither of docs talk about how to use it with css-in-js, one solution I can figure out is using like:

import styles from 'windi.css;

<View className={[styles.absolute, styles.inset0, styles.p4, styles.bgBlue500]} />

looks a bit verbose, the build plugin generate the real css file so they can be imported like module-css, what do you think?

[bongudth]

💩 First, remove WindiCSS from your project, using yarn remove vue-cli-plugin-windicss.

💪 Let's start from scratch!

When you add WindiCSS to your project if you see this warning appear:

Warning
There are uncommitted changes in the current repository, it's recommended to commit or stash them first.

🙉 DON'T IGNORE IT!

Please commit or stash uncommitted changes first, then add WindiCSS, using vue add windicss.

After that, when running the project, you may continue to get the error

🐛 Error
Cannot find module 'babel-plugin-component'.

Now you need to install that package. Use yarn add babel-plugin-component.

😚 That's all. I did it this way and it worked.
👀 Next steps as in the WindiCSS guide.

Thanks!

[jieboom]

I find the solution by chinese： https://juejin.cn/post/7028522304350978061。