[CLI] Unable to generate types with files that import `.svg` files about chakra-ui HOT 2 CLOSED

Thanks for digging into the issue and suggesting a fix.

I don't recommend importing the svg file in the theme file. Kindly refactor it to separate the theme from the custom component code.

You can also keep the patch for now. In the v3 version, we'll consider it.

from chakra-ui.

Hey @segunadebayo appreciate the response!

We don't have svg imports directly in our theme file. Our structure is roughly equivalent to the following:

// ChakraThemeProvider.tsx
import {
  AlertStyles,
  CheckboxStyles,
  // ...etc
} from 'our-ui-library';

const theme = extendTheme({
  components: {
    Alert: AlertStyles,
    Checkbox: CheckboxStyles,
    // ...etc
  }
})

where our-ui-library is an (internal) npm package with an index file that looks like this:

// index.ts
export { Checkbox } from './src/Checkbox';
export { CheckboxStyles } from './src/Checkbox.style';

In this case Checkbox.tsx has an .svg import that is used with the file. Our CLI is set to generate types from the ChakraThemeProvider.tsx file, but my guess is that esbuild is following the imports from the entry file and choking because it ends up trying to build the Checkbox.tsx file with the .svg imports.

Unfortunately its a bit difficult to change our file structure due to our-ui-library being a separate npm package. If I'm understanding what you're saying, we'd need to rethink our file/bundling structure in this package to ensure esbuild won't end up trying to build files in our internal package that have non-JS imports correct?

from chakra-ui.