antd-theme
antd-theme copied to clipboard
Error: Module parse failed: 'import' and 'export' may only appear at the top level
When using the custimze-cra
example in the README.md I get the following error:
./node_modules/antd/es/card/style/index.less 5:0
Module parse failed: 'import' and 'export' may only appear at the top level (5:0)
File was processed with these loaders:
* ./node_modules/antd-theme/plugin/loader.js
* ./node_modules/css-loader/dist/cjs.js
* ./node_modules/postcss-loader/src/index.js
* ./node_modules/resolve-url-loader/index.js
* ./node_modules/less-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
| (function (module) {
| // Imports
> import ___CSS_LOADER_API_IMPORT___ from "../../../../css-loader/dist/runtime/api.js";
| var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
| // Module
overrides-config.js
const { override, fixBabelImports, addLessLoader, addPostcssPlugins, adjustStyleLoaders, addWebpackPlugin } = require('customize-cra');
const AntdThemePlugin = require('antd-theme/plugin');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
lessOptions: {
javascriptEnabled: true,
}
}),
adjustStyleLoaders(
(loaders) => {
loaders.use[0] = {
loader: AntdThemePlugin.loader
}
}
),
addWebpackPlugin(
new AntdThemePlugin({
themes: [
{
name: 'dark',
filename: require.resolve('antd/lib/style/themes/dark.less'),
},
{
name: 'compact',
filename: require.resolve('antd/lib/style/themes/compact.less'),
},
],
})
),
);
related package versions:
"antd-theme": "^0.3.4",
"babel-plugin-import": "^1.13.3",
"css-loader": "5.0.1",
"customize-cra": "1.0.0",
"less": "3.11.1",
"less-loader": "6.1.0",
"react-app-rewire-less": "2.1.3",
"react-app-rewired": "2.1.8",
"react-scripts": "4.0.1",
"style-loader": "2.0.0",