HeWei-imagineer
commented
1 year ago Here is my craco configuration
// Don't open the browser during development
process.env.BROWSER = 'none';
const { CracoAliasPlugin } = require('react-app-alias');
const CracoLessPlugin = require('craco-less');
const fs = require('fs');
const path = require('path');
const lessToJS = require('less-vars-to-js');
const CracoAntdStylePlugin = require('./webpack/craco-antd-style-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const { EnvironmentPlugin } = require('webpack');
const antdThemeVariables = lessToJS(fs.readFileSync(path.resolve(__dirname, './src/config/theme.less'), 'utf8'));
const { getLoader, loaderByName } = require('@craco/craco');
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
module.exports = {
// fixed:Support for the experimental syntax 'jsx' isn't currently enabled
// https://github.com/babel/babel/issues/12018
babel: {
presets: [
[
'@babel/preset-react',
{
runtime: 'automatic',
},
],
],
plugins: [
[
// doc: https://github.com/emotion-js/emotion/tree/main/packages/babel-plugin
'@emotion',
{
autoLabel: 'dev-only',
labelFormat: '[local]',
cssPropOptimization: true,
},
],
[
'@babel/plugin-proposal-class-properties',
{
loose: true,
},
],
// to avoid warning messages, see MR: https://gitlab.myteksi.net/grabads/ads-experience/ads-ui/-/merge_requests/56
['@babel/plugin-proposal-private-methods', { loose: true }],
['@babel/plugin-proposal-private-property-in-object', { loose: true }],
[
'babel-plugin-transform-imports',
{
lodash: {
// eslint-disable-next-line no-template-curly-in-string
transform: 'lodash/${member}',
preventFullImport: true,
},
},
],
],
loaderOptions: (babelLoaderOptions, { env, paths }) => {
return babelLoaderOptions;
},
},
webpack: {
plugins: {
add: [
new EnvironmentPlugin({
VERSION: (() => {
if (process.env.NODE_ENV === 'development') return 'development';
return process.env.VERSION ? JSON.stringify(process.env.VERSION) : 'unknown';
})(),
}),
new NodePolyfillPlugin({
excludeAliases: ['console'],
}),
],
},
configure: (webpackConfig, { env, paths }) => {
// add lego-ui path to compile the svg file
webpackConfig.module.rules.push({
type: 'javascript/auto',
test: /\.(svg)$/,
use: ['@svgr/webpack', 'url-loader'],
include: [path.resolve(__dirname, 'node_modules/@ads/lego-ui/src/assets'), path.resolve(__dirname, 'src/assets')],
});
const babelLoader = getLoader(webpackConfig, loaderByName('babel-loader'));
webpackConfig.module.rules.push({
...babelLoader.match.loader,
include: [path.resolve(__dirname, 'node_modules/@ads/lego-ui/src')],
});
// json
webpackConfig.module.rules.push({
type: 'javascript/auto',
test: /\.(json)$/,
exclude: [/node_modules/, /lang/, /__mocks__/],
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
},
},
});
// for bundle analyze
// if (process.env.IS_BUNDLE_ANALYSIS) {
webpackConfig.plugins.push(
new BundleAnalyzerPlugin({
generateStatsFile: true,
}),
);
// }
if (process.env.NODE_ENV !== 'development') {
webpackConfig.output.filename = '[name].[chunkhash:8].js';
}
// webpackConfig.optimization = {
// splitChunks: {
// cacheGroups: {
// ag_grid: {
// chunks: 'all',
// test: /[\\/]node_modules[\\/](ag-grid-community|ag-grid-enterprise|ag-grid-react|ag-grid-core)[\\/]/,
// name: 'ag_grid',
// enforce: true,
// priority: 1,
// },
// grab_ui: {
// chunks: 'all',
// test: /[\\/]node_modules[\\/]grab-ui[\\/]/,
// name: 'grab_ui',
// enforce: true,
// priority: 1,
// },
// echarts: {
// chunks: 'all',
// test: /[\\/]node_modules[\\/]echarts[\\/]/,
// name: 'echarts',
// enforce: true,
// priority: 1,
// },
// vendor: {
// chunks: 'all',
// test: /[\\/]node_modules[\\/](react|react-dom|lodash|antd|axios|react-use|react-query|react-redux|react-router|react-router-dom)[\\/]/,
// name: 'vendor',
// enforce: true,
// priority: 2,
// },
// others_deps: {
// chunks: 'all',
// test: /[\\/]node_modules[\\/]/,
// name: 'others_deps',
// enforce: true,
// priority: -1,
// },
// },
// },
// };
// To solve The create-react-app imports restriction outside of src directory, such as Buffer
const scopePluginIndex = webpackConfig.resolve.plugins.findIndex(
({ constructor }) => constructor && constructor.name === 'ModuleScopePlugin',
);
webpackConfig.resolve.plugins.splice(scopePluginIndex, 1);
// if the files are from /node_modules, allow it to not support sourcemap
webpackConfig.ignoreWarnings = [
function ignoreSourcemapsloaderWarnings(warning) {
return (
warning.module &&
warning.module.resource.includes('node_modules') &&
warning.details &&
warning.details.includes('source-map-loader')
);
},
];
return webpackConfig;
},
},
plugins: [
{
plugin: CracoAliasPlugin,
options: {
source: 'options',
baseUrl: './',
aliases: {
'@assets': './src/assets',
'@components': './src/components',
'@modules': './src/modules',
'@constants': './src/constants',
'@hooks': './src/hooks',
'@utils': './src/utils',
'@slices': './src/slices',
'@apis': './src/apis',
'@services': './src/services',
'@troy': './src/modules/troy',
'@mocks': './src/mocks',
},
},
},
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: antdThemeVariables,
javascriptEnabled: true,
// fixed - Error evaluating function `unit`: the first argument to unit must be a number.
// https://github.com/Semantic-Org/Semantic-UI-LESS/issues/74
math: 'always',
},
},
},
},
{
plugin: CracoAntdStylePlugin,
},
],
jest: {
configure: {
setupFiles: ['<rootDir>/jest/__mocks__/index.ts', 'jest-localstorage-mock', 'jest-canvas-mock'],
coverageReporters: ['html'],
},
},
};And here is the file arise the issue, index.less
@import (reference) '../../theme';
Hi, I use CRA5.0.1 and craco7.1.0 to build my project. There is a file in the nodemodules folder of my project, the path looks like /xxx/dist/PopConfirm/style/index.less_. Here's what content in the file
then, when I run my project, I get a warning
I'm not sure if the issue comes from resolve-url-loader or webpack5, can you help check? thanks~