[ChakraLoaderPlugin Error] No matching rule for vue-loader found

Describe the bug When I upgrade @charkra/ui-nuxt version from 0.0.13 to 0.1.0 --> This had an error.

[ChakraLoaderPlugin Error] No matching rule for vue-loader found.                                                                                                                                         
Please make sure that vue-loader is installed and included in your webpack config.

Expected behavior I upgrade this package because I want my team work with the new properties CSS like place-content="center space-between". So hope you or your team will fix it!

Screenshots

Desktop (please complete the following information):

• OS: MacsOs 10.15.4

[codebender828]

Well, I got it working, not sure how considering that breakage.

@dombavetta here’s a working repro. Aside from upgrading to 0.1.0, the other key piece is to add the chakra-loader package and configure it in nuxt.config.js. (I also had to restart the CodeSandbox server for it to show up). Those are the only changes I made.

https://codesandbox.io/s/chakra-ui-vueissue335-forked-vc4uo?file=/package.json

Hey @harrytran998, @bmulholland!

Solution

1. For @chakra-ui/nuxt@^0.1.0, In your nuxt.config.js file, you no longer need to install the ChakraLoaderWebpackPlugin in build.extend option. This handled internally.
2. This also means that you no longer need to install the chakra-loader package yourself, since it’s an internal dependency for the @chakra-ui/nuxt@^0.1.0.

The cause of the issue After digging into this, I think I realize the cause of this problem. After upgrading @chakra-ui/nuxt to v0.1.0, you needn’t manually setup the chakra-loader plugin in nuxt.config.js file. I’m not sure why the error comes up if you manually set chakra.config.autoImport: true and add then proceed to add the plugin in the build.extend() option of the nuxt.config.js file.

Going forward At the time of developing this feature, I didn’t encounter this problem. After seeing the cause of the issue, I can see why this would have been better to instead make a major change in the package versioning. I may do this in the next release to account for this issue. I’m also interesting in hearing feedback around this problem.

So for now I’ll tag it as having a work-around, but will leave the issue open to facilitate this.

[codebender828]

@harrytran998 For your project, As a workaround, your team can still use the place-content properties by upgrading the @chakra-ui/vue package independently to v0.6.6