Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema. #235

Closed
jaybolee opened this issue May 2, 2020 · 15 comments

Comments

@jaybolee
Copy link

jaybolee commented May 2, 2020

完全根据文档做下来的,试的新建好几个项目了,还是不行。有大神指导一下什么原因吗?

报错信息如下:
Failed to compile
./src/Home/less/antMotionStyle.less (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-7-1!./node_modules/postcss-loader/src??postcss!./node_modules/less-loader/dist/cjs.js??ref--6-oneOf-7-3!./src/Home/less/antMotionStyle.less)
ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.

  • options has an unknown property 'source'. These properties are valid:
    object { lessOptions?, prependData?, appendData?, sourceMap? }
    This error occurred during the build time and cannot be dismissed.
    截屏2020-05-03 上午12 05 19
@Burning-Shadow
Copy link

插个眼同问 :(

@vanishcode
Copy link

vanishcode commented May 4, 2020

temporary way to fix this problem:ant-design/ant-design#23624 😢

remove less-loader@6.0.0 and install less-loader@5.0.0 fixed on me.

插个眼同问 :(

@Burning-Shadow
Copy link

temporary way to fix this problem:ant-design/ant-design#23624 😢

remove less-loader@6.0.6 and install less-loader@5.0.0 fixed on me.

插个眼同问 :(

啊我也刚看到这里。6.0刚出好像兼容方面有点问题,改成

addLessLoader({
  lessOptions: {
    javascriptEnabled: true,
    modifyVars: { '@primary-color': '#1DA57A' },
  },
}),

就好了

@jljsj33 jljsj33 closed this as completed May 6, 2020
@jaybolee
Copy link
Author

jaybolee commented May 6, 2020

temporary way to fix this problem:ant-design/ant-design#23624 😢
remove less-loader@6.0.6 and install less-loader@5.0.0 fixed on me.

插个眼同问 :(

啊我也刚看到这里。6.0刚出好像兼容方面有点问题,改成

addLessLoader({
  lessOptions: {
    javascriptEnabled: true,
    modifyVars: { '@primary-color': '#1DA57A' },
  },
}),

就好了

谢谢,更换为less-loader@5.0.0 重新build后成功了。谢谢大佬

@pitops
Copy link

pitops commented May 7, 2020

Have the same issue, any updates?

@eDubrovsky
Copy link

Have the same issue, any updates?

@pitops upgrade to customize-cra@next (1.0.0-alpha.0) helps for me

@ozgursoy
Copy link

ozgursoy commented May 8, 2020

+1

@jaybolee
Copy link
Author

jaybolee commented May 9, 2020

Have the same issue, any updates?

@pitops change the less-loader version from 6.0 to 5.0, then restart it.

$ yarn remove less-loader
$ yarn add less-loader@5.0.0
$ yarn start

@cosoc
Copy link

cosoc commented May 13, 2020

如果使用6.x

如下配置

 {
                        loader: 'less-loader', 
                        options: {
                            lessOptions: {
                                javascriptEnabled: true
                              }
                        }
                    }

参考地址

@pitops
Copy link

pitops commented May 13, 2020

Thanks @cosoc that worked

@faizplus
Copy link

I had same issue and fixed it by updating "customize-cra": "^1.0.0-alpha.0", in package.json

@joyner-perez
Copy link

First: Install yarn add react-app-rewired customize-cra@next
After: In root of your project config-overrides.js, copy and paste next code
`const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
fixBabelImports('antd', {
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
lessOptions: {
javascriptEnabled: true,
},
}),
);`

@rexuli
Copy link

rexuli commented Jun 3, 2020

For the one who is using 'create-react-app' to customize the theme can check the following settings:

craco.config.js

const CracoLessPlugin = require("craco-less");

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            javascriptEnabled: true,
            modifyVars: { "@primary-color": "#018a9e" },
          },
        },
      },
    },
  ],
};

package.json

{
  "dependencies": {
    "@craco/craco": "^5.6.4",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "antd": "^4.2.5",
    "craco-less": "^1.17.0",
    "eslint-plugin-prettier": "^3.1.3",
    "lodash": "^4.17.15",
    "prettier": "^2.0.5",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1",
    "redux": "^4.0.5"
  },
}

@artemiste
Copy link

thanks @rexuli that work

@lesliezsy
Copy link

Have the same issue, any updates?

@pitops change the less-loader version from 6.0 to 5.0, then restart it.

$ yarn remove less-loader
$ yarn add less-loader@5.0.0
$ yarn start

Thank you so much. It works!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests