ERROR: No matching export in "node_modules/.pnpm/three@0.142.0/node_modules/three/build/three.module.js" for import "Mapping"

[Dueel]

Hey there, first time trying skinview3d and when installing the latest version I get this error:

X [ERROR] No matching export in "node_modules/.pnpm/three@0.142.0/node_modules/three/build/three.module.js" for import "Mapping"

    node_modules/.pnpm/skinview3d@3.0.0/node_modules/skinview3d/libs/viewer.js:2:157:
      2 │ ...mera, Scene, Texture, Vector2, WebGLRenderer, AmbientLight, Mapping, CanvasTexture, WebGLRenderTarget, FloatType, DepthTexture,... 
        ╵                                                                ~~~~~~~

D:\Desktopbackup\Documents\Namer\node_modules\.pnpm\esbuild@0.18.20\node_modules\esbuild\lib\main.js:1649
  let error = new Error(`${text}${summary}`);
              ^

Error: Build failed with 1 error:
node_modules/.pnpm/skinview3d@3.0.0/node_modules/skinview3d/libs/viewer.js:2:157: ERROR: No matching export in "node_modules/.pnpm/three@0.142.0/node_modules/three/build/three.module.js" for import "Mapping"
    at failureErrorWithLog (D:\Desktopbackup\Documents\Namer\node_modules\.pnpm\esbuild@0.18.20\node_modules\esbuild\lib\main.js:1649:15)       
    at D:\Desktopbackup\Documents\Namer\node_modules\.pnpm\esbuild@0.18.20\node_modules\esbuild\lib\main.js:1058:25
    at D:\Desktopbackup\Documents\Namer\node_modules\.pnpm\esbuild@0.18.20\node_modules\esbuild\lib\main.js:1525:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  errors: [
    {
      detail: undefined,
      id: '',
      location: {
        column: 157,
        file: 'node_modules/.pnpm/skinview3d@3.0.0/node_modules/skinview3d/libs/viewer.js',
        length: 7,
        line: 2,
        lineText: 'import { Color, PointLight, EquirectangularReflectionMapping, Group, NearestFilter, PerspectiveCamera, Scene, Texture, Vector2, WebGLRenderer, AmbientLight, Mapping, CanvasTexture, WebGLRenderTarget, FloatType, DepthTexture, Clock, Object3D } from "three";',
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'No matching export in "node_modules/.pnpm/three@0.142.0/node_modules/three/build/three.module.js" for import "Mapping"'
    }
  ],
  warnings: []
}

Node.js v20.6.1

For now I switched to 3.0.0-alpha.1 but I am wondering why this occurs.

[Hacksore]

@Dueel was not able to reproduce on https://github.com/Hacksore/pnpm-skinview3d

Can you please how to reproduce this?

[Dueel]

Oh that is strange, have you tried using it in a dev environment? Well here is a step by step explanation of what I did:

1. Create a astro project using pnpm dlx astro@latest
2. Install skinview3d pnpm i skinview3d
3. Make a index.astro within the folder in pages and use this code:

<main>
	<canvas id="skin_container"></canvas>
	<skin-model></skin-model>
</main>

<script>
	import * as skinview3d from 'skinview3d'

	class Canvas extends HTMLElement {
	constructor() {
		super();
		let skinViewer = new skinview3d.SkinViewer({
		canvas: document.getElementById("skin_container") as HTMLCanvasElement,
		width: 300,
		height: 400,
		skin: `https://textures.minecraft.net/texture/dbd7be81e45b8176fb12413204ec57bd0c8c00d369515ffda766aa72e5f72923`,
		});

		skinViewer.animation = new skinview3d.WalkingAnimation();
		skinViewer.animation.headBobbing = false;
		skinViewer.animation.speed = 0.7;
	}
	}

	customElements.define('skin-model', Canvas);
</script>

4. Run pnpm dev

[Dueel]

Seems like a dev environment issue as once I build the project it runs, problem is it works fine in a dev environment on 3.0.0-alpha.1

[Hacksore]

Ok am able to reproduce in the astro dev server but not when building and running the production build.

Will investigate this and report back.

[Dueel]

What a strange issue, thank you for looking into it!

[rtm516]

I have the same error I managed to get round it by using the built js instead of the ts
import * as skinview3d from 'skinview3d/bundles/skinview3d.bundle.js'

[Hacksore]

@rtm516 I guess that's because everything is bundled in that file.

@Dueel does this workaround solve the issue for now?

[Dueel]

import * as skinview3d from 'skinview3d/bundles/skinview3d.bundle.js'

This workaround seems to work but feels a tad bit slower. This will do for now though, thanks!

Edit: I am making this website using typescript only and doing import * as skinview3d from 'skinview3d/bundles/skinview3d.bundle.js' has no typings so it will just complain.