ant-design-landing icon indicating copy to clipboard operation
ant-design-landing copied to clipboard

Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.

Open meowwww88hen opened this issue 3 years ago • 7 comments

Screenshot 2022-01-08 at 3 43 37 PM 有人遇到同样的问题吗?

meowwww88hen avatar Jan 08 '22 23:01 meowwww88hen

一样的问题

bayuec avatar Jan 14 '22 03:01 bayuec

me too

lazy1523 avatar Jan 24 '22 15:01 lazy1523

After spending more than a week to fix the error (I almost give up), I found the solution here: https://github.com/arackaf/customize-cra/issues/315#issuecomment-1017081592

TLDR - add the following lines in config-overrides.js:

const { override, fixBabelImports, addLessLoader, adjustStyleLoaders } = require('customize-cra');

module.exports = override(
  // Load antd
  fixBabelImports('import', { ... }),

  // Add `javascriptEnabled` and antd theme configuration
  // to the Less loader
  addLessLoader({ ... }),

  adjustStyleLoaders(({ use: [, , postcss] }) => {
    const postcssOptions = postcss.options;
    postcss.options = { postcssOptions };
  })
);

crzyjcky avatar Feb 13 '22 18:02 crzyjcky

After spending more than a week to fix the error (I almost give up), I found the solution here: arackaf/customize-cra#315 (comment)

TLDR - add the following lines in config-overrides.js:

const { override, fixBabelImports, addLessLoader, adjustStyleLoaders } = require('customize-cra');

module.exports = override(
  // Load antd
  fixBabelImports('import', { ... }),

  // Add `javascriptEnabled` and antd theme configuration
  // to the Less loader
  addLessLoader({ ... }),

  adjustStyleLoaders(({ use: [, , postcss] }) => {
    const postcssOptions = postcss.options;
    postcss.options = { postcssOptions };
  })
);

This works for me! Thanks, dude, it is a very helpful answer.

RuotongX avatar Apr 19 '22 13:04 RuotongX

Guys, please I'm new to coding and don't know how to implement this in my code. Please can anyone help me further

Jot4ril avatar Aug 26 '22 15:08 Jot4ril

After spending more than a week to fix the error (I almost give up), I found the solution here: arackaf/customize-cra#315 (comment)

TLDR - add the following lines in config-overrides.js:

const { override, fixBabelImports, addLessLoader, adjustStyleLoaders } = require('customize-cra');

module.exports = override(
  // Load antd
  fixBabelImports('import', { ... }),

  // Add `javascriptEnabled` and antd theme configuration
  // to the Less loader
  addLessLoader({ ... }),

  adjustStyleLoaders(({ use: [, , postcss] }) => {
    const postcssOptions = postcss.options;
    postcss.options = { postcssOptions };
  })
);

It's very useful!! Thanks for your help!

Nero978 avatar Jan 31 '23 11:01 Nero978

encountered same problem, after I deleted below config in vue.config.js, it worked: css: {, loaderOptions: { postcss: { plugins: [ require("postcss-pxtorem")({ rootValue: 14, propList: ["*"], }), ], }, }, },

cj348986512 avatar Nov 09 '23 06:11 cj348986512