Build Next example failed

[ModyQyW]

Describe the bug

I got an error when I try to build Next example.

To Reproduce

Steps to reproduce the behavior:

1. Clone windicss-webpack-plugin repository
2. Run yarn && yarn build in the root
3. Go into windicss-webpack-plugin/example/next and run yarn
4. Update next.config.js (add eslint field)

// const WindiCSS = require('windicss-webpack-plugin').default
const WindiCSS = require('../../dist').default

module.exports = {
  webpack: config => {
    config.plugins.push(new WindiCSS())
    return config
  },
  eslint: {
    ignoreDuringBuilds: true,
  },
}

5. Run yarn build and see the error

Expected behavior

Build succeeded.

[rlaphoenix]

I too am having this problem. Specifically, in my case the area of the code being pointed out is the start of windicss/plugin/forms, or at least appears to be.

However, in my case npm run dev (next dev) doesn't have any problems, not even a warning. It's only npm build (next build) with the problem.

[ModyQyW]

next dev is also fine to me. Only next build having the issue.

I try webpack 4 and it works well.

// const WindiCSS = require('windicss-webpack-plugin').default
const WindiCSS = require('../../dist').default

module.exports = {
  webpack: config => {
    config.plugins.push(new WindiCSS())
    return config
  },
  eslint: {
    ignoreDuringBuilds: true,
  },
  webpack5: process.env.NODE_ENV === 'development',
}

[harlan-zw]

Thanks guys, taking a look

[harlan-zw]

@ModyQyW @rlaphoenix

Thanks for reporting the bug. Looks like something weird going on with webpack 5 and next re-ordering the loader.

Should be fixed in release v1.2.5, can you try that version and let me know how it goes

[ModyQyW]

@harlan-zw Works now. Thanks! :D

[rlaphoenix]

I would also like to mention that when I change something in my code, e.g. a className, save, and npm dev reloads does whatever it needs to do, windicss doesnt get set. As in, no CSS seems to get applied, at all.

[harlan-zw]

hey @rlaphoenix

I have noticed that there is a bug with the regex class matcher, for example, given this code

  <div className="{ 'pl-20px bg-yellow-300 font-white text-2xl' }">
            Should be Yellow
          </div>

Only bg-yellow-300 font-white classes will work. You can get around that by adding spaces at the end and start

  <div className="{ ' pl-20px bg-yellow-300 font-white text-2xl  ' }">
            Should be Yellow
          </div>

If that's not the issue, would you mind opening a new issue for the exact code you have. If it is the issue then I'll make an issue on the vite plugin which handles this logic

Although looking at it now I think this is dodgy code, have updated the example