Integrating with Vite + React + TS

[LunaWanderer1]

I followed the steps outlined here https://design-system.alpha.canada.ca/en/installation/

I'm having an issue integrating this library with Vite + React + TS.

I tried importing via:

import { GcdsHeader } from '@cdssnc/gcds-components-react/';

but only this seems to import it:

import { GcdsHeader } from '@cdssnc/gcds-components-react/dist';

Once that error clears up I end up with additional errors:

Feel free to take a look at the reproduction of the error here:

https://stackblitz.com/edit/vitejs-vite-k6yxw2?file=src/App.tsx

This other github issue may also be some help:
vitejs/vite#12434

[LunaWanderer1]

Hi,

I have managed to get it to work with the following steps:

1. Add the following to vite.config.ts

optimizeDeps: {
	exclude: ['@cdssnc/gcds-components-react'],
},

2. Change import to the following:

import { GcdsHeader } from '@cdssnc/gcds-components-react/dist';

3. Removing this line from the code:
   

   gcds-components/packages/react/src/components/stencil-generated/react-component-lib/createOverlayComponent.tsx

   Line 2 in 250f0bd

   import ReactDOM from 'react-dom';

I'm fine with adding Step 1 and Step 2, it's seems to be a common issue in the Vite community but the third step may require a change to this component library.

Thanks,

Eli

[LunaWanderer1]

After realizing those files are generated by Stencil, I looked more into it and the following works in the vite.config.ts.

optimizeDeps: {
	exclude: ['@cdssnc/gcds-components-react'],
	include: ['react-dom'],
},

Seems to resolve any issues, may want to add a note in the React installation section to help others!

[ethanWallace]

Thanks @eliyammine for the updates!

With our latest update(v0.10.2) to the component packages, we have hopefully solved the issue you were having in step 2. You should now be able to import the components with import { GcdsHeader } from '@cdssnc/gcds-components-react now.

For the third step I am glad you found a solution to the issue since as you mentioned that file is generated by stencil so modifying it is not really an option. With that said, I am still going to look into the issue a little more to see if there is anything on our end that can be done so you don't need to do the additional step with react-dom on installation.

[LunaWanderer1]

Thank you! That did indeed fix it.

For the third step, I did find some cases of needing to include react-dom but not as common as the exclude statement. Seems to just be an issue with Vite(Rollup or esbuild) so may not be worth your time to look into it much.