"WeakMap key must be an object, got source", only on textures

Questions
1

Hi everybody,

First of all, here’s my config :

I don’t know if this is a THREE issue but when I load a texture this way :

import terrainheightmap from './park.png';

const terrainheight = useLoader(THREE.TextureLoader, terrainheightmap);

The object seems to bee there but I’ve got this issue :

image
image1918×298 9.5 KB

I can"t find any documentation on how to solve that, that’s the first time I got this problem (a Frontity-Webpack issue ? It works very well with the simple create-react-app starter project ?)
It seems to be a THREE error, where should I investigate ?

Have a very nice day !

Vincent.

(here are the files, but they need frontity to be installed)
https://vincentlhoste.fr/forum1/question.rar

Edit 1 : It seems it’s not a loader issue as I manage to load my png image only in my app.

2

This error can appear if you accidentally use multiple three.js versions in a single build. So please make sure that three.js isn’t imported more than once and all project components are comptabile to the used three.js version (in your case r138).

3

Thanks a lot for your answer !!
Could you please confirm it has nothing to do with importing THREE.js in two separate files that need both THREE to be imported → as on the screenShot below :

image
image1198×506 43.5 KB

I used to do that on other projects and never got a problem with this.
(JS and JSX do not make a difference)

& my package.json
image

As also, it should recognise the import is the same and build it only once.

4

Sorry, I’m not familiar with react-three/fiber so I can’ t tell you if your setup is right.

5

OK thanks a lot anyway ! I installed a webpack plugin to warn about duplicates, I don’t know if It did the work or if this is a THREE warning but I now have a marvellous warning that seems to confirm what you’re saying : i’ll dig on that (I don’t manage to find where it’s imported twice).

image
image1279×138 4.4 KB

6

it usually happens when 3rd party libs have wrong imports, like one imports from “three” (correct) another from “three/src/index.js” (incorrect) or “three/dist/three.module.js” (also incorrect), things like that. nothing really specific in r3f, it imports from “three”. or sometimes a bundler can’t decide between versions, when versioning ranges conflict.

in your package json there’s @react-three/gltfjsx which is unusual, it’s a cli tool, something that you run (npx gltfjsx model.gltf) but you normally don’t install. that indeed relies on a slightly older three that node has to install.

in the worst case alias “three” to node_modules/three and it’s done. though before you do that better find the root cause.

7

Thanks a lot for your help, I’m on It. I’ll try to find the root cause as I’d prefer too :nerd_face:. Ok for GTLFJSX, I’ll clean this and noticed about the version.

8

For this subject, problem was a conflict between same packages. In my project there was :

  • A first package.json for the main project
  • A second for the theme (multi themes)
    And confusion between them… I choosed to use the same package.json for everything rather than try to mix them.