[SOLVED] Why do I get TS type errors when building NextJS with PNPM in a monorepo?

Why do I get TS type errors when building NextJS with PNPM in a monorepo?

I have a mono repo managed with PNPM and when I run pnpm --filter web build I get the following TypeScript error. This is very weird as I only get this one on my server while I ran the same commands on my local machine and I don't have that kind of errors... It seems to happen with several packages, I already "fixed" the same error with axios, but I can't use the same strategy for all the others.

Type error: Argument of type 'import("[...]/source/node_modules/.pnpm/embla-carousel@8.6.0/node_modules/embla-carousel/components/EmblaCarousel").EmblaCarouselType' is not assignable to parameter of type 'import("[...]/source/node_modules/embla-carousel/components/EmblaCarousel").EmblaCarouselType'.
  The types of 'internalEngine().eventHandler.init' are incompatible between these types.
    Type '(emblaApi: import("[...]/source/node_modules/.pnpm/embla-carousel@8.6.0/node_modules/embla-carousel/components/EmblaCarousel").EmblaCarouselType) => void' is not assignable to type '(emblaApi: import("[...]/source/node_modules/embla-carousel/components/EmblaCarousel").EmblaCarouselType) => void'.
      Types of parameters 'emblaApi' and 'emblaApi' are incompatible.
        Type 'import("[...]/source/node_modules/embla-carousel/components/EmblaCarousel").EmblaCarouselType' is not assignable to type 'import("[...]/source/node_modules/.pnpm/embla-carousel@8.6.0/node_modules/embla-carousel/components/EmblaCarousel").EmblaCarouselType'.
          The types of 'internalEngine().options' are incompatible between these types.
            Type 'import("[...]/source/node_modules/embla-carousel/components/Options").OptionsType' is not assignable to type 'import("[...]/source/node_modules/.pnpm/embla-carousel@8.6.0/node_modules/embla-carousel/components/Options").OptionsType'.
              Type 'OptionsType' is not assignable to type '{ align: AlignmentOptionType; axis: AxisOptionType; container: string | HTMLElement | null; slides: string | HTMLElement[] | NodeListOf<...> | null; ... 13 more ...; watchFocus: FocusHandlerOptionType; }'.
                Types of property 'watchDrag' are incompatible.
                  Type 'import("[...]/source/node_modules/embla-carousel/components/DragHandler").DragHandlerOptionType' is not assignable to type 'import("[...]/source/node_modules/.pnpm/embla-carousel@8.6.0/node_modules/embla-carousel/components/DragHandler").DragHandlerOptionType'.
                    Type 'DragHandlerCallbackType' is not assignable to type 'DragHandlerOptionType'.
                      Type 'DragHandlerCallbackType' is not assignable to type 'DragHandlerCallbackType'. Two different types with this name exist, but they are unrelated.
                        Types of parameters 'emblaApi' and 'emblaApi' are incompatible.
                          Type 'import("[...]/source/node_modules/.pnpm/embla-carousel@8.6.0/node_modules/embla-carousel/components/EmblaCarousel").EmblaCarouselType' is not assignable to type 'import("[...]/source/node_modules/embla-carousel/components/EmblaCarousel").EmblaCarouselType'.
                            The types of 'internalEngine().eventHandler.init' are incompatible between these types.
                              Type '(emblaApi: import("[...]/source/node_modules/.pnpm/embla-carousel@8.6.0/node_modules/embla-carousel/components/EmblaCarousel").EmblaCarouselType) => void' is not assignable to type '(emblaApi: import("[...]/source/node_modules/embla-carousel/components/EmblaCarousel").EmblaCarouselType) => void'.
                                Types of parameters 'emblaApi' and 'emblaApi' are incompatible.
                                  Type 'import("[...]/source/node_modules/embla-carousel/components/EmblaCarousel").EmblaCarouselType' is not assignable to type 'import("[...]/source/node_modules/.pnpm/embla-carousel@8.6.0/node_modules/embla-carousel/components/EmblaCarousel").EmblaCarouselType'.
                                    The types of 'internalEngine().scrollBody.seek' are incompatible between these types.
                                      Type '(timeStep: number) => ScrollBodyType' is not assignable to type '() => ScrollBodyType'.
                                        Target signature provides too few arguments. Expected 1 or more, but got 0.

Solution

Typescript is probably seeing more than one version of embla-carousel. THis causes type incompatibility issues in TS.

Try these steps:
Delete your node_modules folder, delete your pnpm-lock.yaml file, them run a fresh pnpm install. Do this on the server


rm -rf node_modules 
rm pnpm-lock.yaml 
pnpm install

Alternatively you can try running pnpm dedupe to force pnpm to deduplicate.

Hope this helps