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

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

Open
Hew007 opened this issue Mar 20, 2024 · 0 comments
Labels
bug Something isn't working

Comments

@Hew007
Copy link

Hew007 commented Mar 20, 2024

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

@Hew007 Hew007 added the bug Something isn't working label Mar 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant