Skip to content

Bug - [react-icons] - babel transformation error from PF provided snippet #9377

@christianvogt

Description

@christianvogt

Describe the problem
Patternfly react-icons README provides the following code snippet to aid with tree shaking:

module.exports = {
  presets: ["@babel/preset-env", "@babel/preset-react"],
  plugins: [
    [
      "transform-imports",
      {
        "@patternfly/react-icons": {
          transform: (importName, matches) => `@patternfly/react-icons/dist/js/icons/${importName.split(/(?=[A-Z])/).join('-').toLowerCase()}`,
          preventFullImport: true
        }
      }
    ]
  ]
}

This snippet however doesn't work with all icons as some of the icons contain upper case characters in the name. The failing icons are coming from customIcons.js. For example pathMissing icon.

image

How do you reproduce the problem?

  • Create a new patternfly based react project.
  • Create a source file with the following import: import { PathMissingIcon } from '@patternfly/react-icons';
  • Add the suggested plugin snippet to your babel.config.js
  • Build your project.

Error:
ModuleNotFoundError: Module not found: Error: Can't resolve '@patternfly/react-icons/dist/js/icons/path-missing-icon' in ...

Expected behavior
Update code snippet with exceptions or generate icons with consistent case.

Is this issue blocking you?
No

What is your environment?

  • @patternfly/react-icons: 4.93.6

What is your product and what release date are you targeting?
Open Data Hub

Any other information?

Metadata

Metadata

Assignees

Type

No type

Projects

Status

Done

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions