When I use babel to import other project's component, Unexpected behavior occur

[Hew007]

I have a React component project as a common lib, i import the component lib into another React Web App, when i start the app ,many error were reported。 The babel config override the balel loaderOptions, presets, and plugins for both of the babel-loader rules CRA has. the second loader shouldn't receive the presets and plugins by default, since the second loader is meant for:

// Process any JS outside of the app with Babel.

// Unlike the application JS, we only compile the standard ES features.

babel config override of craco should be change, obviously, it is not rigorous and reasonable to merge plugins for each rule without distinguishing whether it is internal or external.

this question similar to #36

this is one of the error info:

ERROR in ./node_modules/@gss-bi-fe/gss-bi-ui/esm/pie-chart/progress-gauge/progress-gauge.js 2:0-62
Module not found: Error: Can't resolve '@gss-bi-fe/gss-bi-ui/**esmundefined'** in '/home/hew/works/code/sitesense-react/node_modules/@gss-bi-fe/gss-bi-ui/esm/pie-chart/progress-gauge'
 @ ./node_modules/@gss-bi-fe/gss-bi-ui/esm/pie-chart/progress-gauge/index.js 2:0-43 2:0-43
 @ ./src/utils/hoc/ChartUIToBusiness/index.tsx 58:0-79 549:8-22
 @ ./src/pages/ConstructionPage/ProductionSchedule/components/MileStone/MileStone.tsx 32:0-67 498:42-58
 @ ./src/pages/ConstructionPage/ProductionSchedule/index.tsx 34:0-57 964:46-55
 @ ./src/pages/BIPage/home/Home.tsx 22:0-75 638:46-64 645:50-68
 @ ./src/pages/BIPage/main/Main.tsx 17:0-32 253:54-58 269:54-58
 @ ./src/router/index.tsx 13:0-46 347:41-45
 @ ./src/App.tsx 11:0-38 51:38-50
 @ ./src/index.tsx 13:0-24 33:50-53 43:29-54:3 43:2-54:4 44:20-44

the app projects were used custum-cra, i'm migrating to craco, and this are their configurations:

craco.config.js

.......
const { getCustomName, getCustomStyleName } = require('@gss-bi-fe/gss-bi-ui/lib/xxx/customName');

module.exports = {

  webpack: {
    .......
  },
  plugins: [
      [
        'import',
        Object.assign(
          {},
          {
            libraryName: '@gss-bi-fe/gss-bi-ui',
            customName: getCustomName('esm'),
            customStyleName: getCustomStyleName('esm', 'css')
          }
        ),
        'gss-bi-ui'
      ],
      [
        'import',
        {
          libraryName: 'antd',
          libraryDirectory: 'es',
          style: 'css'
        },
        'antd'
      ],
      [
        'import',
        {
          libraryName: 'react-use',
          libraryDirectory: 'lib',
          camel2DashComponentName: false
        },
        'react-use'
      ]
    ],
};

To reproduce (list the steps to reproduce this behavior)

CRACO version 7.1.0

Additional information bable plugins used to customName and customStyleName