Closed cordery closed 1 year ago
Describe the bug
Running nuxt 2.16 with the nuxt-webpack-optimisations feature
postcssNoPolyfills
enabled leads to the following blocking error:
ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
To Reproduce Steps to reproduce the behavior:
- Upgrade a working nuxt 2 w/ nuxt-webpack-optimisations project to use nuxt 2.16.0
- Run
nuxt run dev
- See error
Reason for the error
Nuxt 2.16.0 upgraded to postcss 8, and changed the postcss options format to the 'postcssOptions' style. See this PR for details, but essentially the change looks like this:
<2.16.0
postcss: { plugins: { "postcss-import": {}, "tailwindcss/nesting": {}, tailwindcss: {}, autoprefixer: {}, }, },
2.16.0
postcss: { postcssOptions: { plugins: { "postcss-import": {}, "tailwindcss/nesting": {}, tailwindcss: {}, autoprefixer: {}, }, }, },
This causes an error as when the
postcssNoPolyfills
feature is enabled nuxt-webpack-optimisations modifiespostcss.options
(instead ofpostcss.postcssOptions
), unless nuxt is 3+.Workaround A temporary workaround is to disable the
postcssNoPolyfills
feature, ex:webpackOptimisations: { debug: true, features: { // disabled because nuxt-webpack-optimizations does not support postcss8 postcssOptions style config in nuxt2 postcssNoPolyfills: false, }, }
Suggested Fix Modify
src/augmentation/useDisableDevPostcssPresetEnv.ts:16
to usegetNuxtVersion
instead ofisNuxt3
and check for version >= 2.16 or >=3.
I tried this solution but without this option, it increases 1.4 seconds from our build time, please @harlan-zw do you want any help to fix this?
Hey @cordery
Thanks for the issue and the guidance the fix. I've pushed up v2.2.7 which should fix this.
@harlan-zw The version to check for is 2.16, not 2.6 :)
@harlan-zw The version to check for is 2.16, not 2.6 :)
:facepalm:
Oh! Thanks @harlan-zw to the fast work :)
hasNuxtCompatibility is handy :+1:
const usingNewPostcss = await hasNuxtCompatibility({ nuxt: '^2.16.0' }, nuxt) || isNuxt3(nuxt)
Version 2.2.8 should hopefully include the proper fix
Hey @harlan-zw I think this solution does not solve the problem at all, going deeper in details I saw this fact: when it is in the nuxt < 2.16 version I have a great improvement in the compile and hrm time, but right now in the 2.16 version and using your last version package we have some segment faults errors and the cli just exit with a GC error, and the time is not improved very well, not it as in the < 2.16 version, did you have some insights about it? the only feature that I miss right now is postcssNoPolyfills
.
This screenshot could give some details:
I have around 1200 svg files.
Hey @harlan-zw I think this solution does not solve the problem at all, going deeper in details I saw this fact: when it is in the nuxt < 2.16 version I have a great improvement in the compile and hrm time, but right now in the 2.16 version and using your last version package we have some segment faults errors and the cli just exit with a GC error, and the time is not improved very well, not it as in the < 2.16 version, did you have some insights about it? the only feature that I miss right now is
postcssNoPolyfills
.This screenshot could give some details:
I have around 1200 svg files.
Hey, this doesn't seem related to the postcss feature. All this does it stop prefixing in dev.
If you make a new issue with your config I can try be more helpful
Describe the bug
Running nuxt 2.16 with the nuxt-webpack-optimisations feature
postcssNoPolyfills
enabled leads to the following blocking error:ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
To Reproduce Steps to reproduce the behavior:
nuxt run dev
Reason for the error
Nuxt 2.16.0 upgraded to postcss 8, and changed the postcss options format to the 'postcssOptions' style. See this PR for details, but essentially the change looks like this:
<2.16.0
2.16.0
This causes an error as when the
postcssNoPolyfills
feature is enabled nuxt-webpack-optimisations modifiespostcss.options
(instead ofpostcss.postcssOptions
), unless nuxt is 3+.Workaround A temporary workaround is to disable the
postcssNoPolyfills
feature, ex:Suggested Fix Modify
src/augmentation/useDisableDevPostcssPresetEnv.ts:16
to usegetNuxtVersion
instead ofisNuxt3
and check for version >= 2.16 or >=3.