Fix version mismatch error

[srosset81]

Since devDependencies were added to the @semapps/date-components and @semapps/markdown-components, using yarn link with these packages produce many problems:

• The build is 2 or 3 times slower
• This warning is being displayed: You are loading @emotion/react when it is already loaded. Running multiple instances may cause problems. This can happen if multiple versions are used, or if multiple builds of the same version are used.
• As soon as you use a React hook, you have this fatal error https://react.dev/warnings/invalid-hook-call-warning which warns about a version mismatch.

@Laurin-W could reproduce this as well.

After more than 2 hours of search, here are the most significant issues:

• Code using React hooks fails if components are imported from parent directory parcel-bundler/parcel#3769
• Hooks don't work with yarn link facebook/react#14257
• Can't use hooks when react & react-dom are dev dependencies jaredpalmer/tsdx#64.

The last issue indicate that the problem appears when React (and probably MUI) are in dev dependencies.

So I removed all the devDependencies from @semapps/date-components and @semapps/markdown-components (except parcel) in this PR and it's now working fine.

@mguihal @Laurin-W Can we do without these devDependencies ? What problems does it cause, except maybe eslint warnings ?

Two other solutions:

• Add a reverse link to the react (and other packages), as noted in the two issues above. But this is very complicated to setup, because it must be changed whenever we work on another app. Plus it doesn't work if we work simultaneously on two apps (this happened for me).

• Revert to the pre-Parcel config (as in v0.5). But there was many problems. And I don't really know why it worked, the risk is that this problems appears again.

[srosset81]

For information, here are some alternatives to Parcel, but they seem to have the same issue:

• https://tsup.egoist.dev
• https://tsdx.io
• https://github.com/developit/microbundle

[mguihal]

Indeed I reproduce this issue too.

Your updates are breaking the typescript build on dates-components and markdown-components (if you build after erasing/reinstalling your node_modules in those packages and in the frontend folder), so we can't do that.

These dev dependencies are required by Typescript for typing correctly the packages, and I can find an easy solution to ignore that. I tested parcel alias but it doesn't work, and I tested to install these dev dependencies in the frontend folder instead of each package folder, but it doesn't seem to solve the problem :/

It seems it's an issue with how yarn link is working and it can be mitigated by using yalc instead of yarn link :

yarn global add yalc

# In semapps/markdown-components folder (on "next" branch for example)
yalc publish

# In app using semapps
yalc link @semapps/markdown-components

# In semapps/markdown-components folder whenever you make changes
yarn build && yalc publish --push

Can you confirm this solution works for you too? Can it be an acceptable solution?

[srosset81]

Thanks for the investigation and the proposal @mguihal
So we would need to publish to yalc whenever we switch of SemApps branch? Maybe this could be automated with some kind of git hooks ?

[Laurin-W]

@mguihal your solution works for me.
I think the big downside here is that it requires to run yalc publish after every change made in semapps/frontend. When developing in semapps and testing in activitypods or archipelago this might be pretty annoying. Running yalc publish with git hooks is fine but I suppose, we'd have to add a file watcher to get it smooth?

[srosset81]

Closing this PR in favor of #1181 See you there for the following discussions :-)