React Context collision in vite

[kenjinp]

I'm using some modules that require react contexts to work, so they depend on peerDependencies and a single installation on the client in the vite project.

I'm using some custom packages that all peerDepend on three and @react-three/fiber, but it looks like vite is somehow duplicating the references.

this is evident in the following warnings
'WARNING: Multiple instances of Three.js being imported.' (despite only having one)

Uncaught R3F hooks can only be used within the Canvas component! (despite being used inside a canvas...)

So clearly these packages can't find the right context.

Has anyone figured out some vite/rollup configuration that will resolve these conflicts?

[kenjinp]

I've been having success using aliases in this way! It's working quite well with my pnpm monorepo setup, and it has resolved the two issues I see above:

import react from "@vitejs/plugin-react";
import path from "path";
import { defineConfig } from "vite";

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      three: path.resolve(__dirname, "./node_modules/three/"),
      "@react-three/fiber": path.resolve(
        __dirname,
        "./node_modules/@react-three/fiber/"
      ),
      "@javelin/ecs": path.resolve(__dirname, "./node_modules/@javelin/ecs/"),
    },
  },
  plugins: [react()],
  server: {
    port: 5000,
  },
});```

[sirpy]

life saver. but why?