three0.167.1 vite build bug

[flowers-10]

Description

I have no issues using version 0.166.0.

0.167.1:
yarn run build
yarn run v1.22.19
$ vue-tsc && vite build
node_modules/@types/three/examples/jsm/loaders/KTX2Loader.d.ts:2:42 - error TS2307: Cannot find module 'three/webgpu' or its corresponding type declarations.
There are types at '/Users/channel1/Desktop/Project/DigitalTwin/node_modules/@types/three/build/three.webgpu.d.ts', but this result could not be resolved under your current 'moduleResolution' setting. Consider updating to 'node16', 'nodenext', or 'bundler'.

2 import { Renderer, WebGPURenderer } from "three/webgpu";
error Command failed with exit code 2.

Reproduction steps

1.version: "@types/three": "^0.167.1","three": "^0.167.1",
2.yarn run build
3.error Command failed with exit code 2.

Code

// code goes here

Live example

• jsfiddle-latest-release WebGLRenderer
• jsfiddle-dev WebGLRenderer
• jsfiddle-latest-release WebGPURenderer
• jsfiddle-dev WebGPURenderer

Screenshots

Version

r167.1

Device

No response

Browser

No response

OS

No response

[Mugen87]

Do you mind trying it with this Vite configuration: #28650 (comment)

[donmccurdy]

I think imports from three/webgpu may need to be avoided somehow here:

https://github.com/three-types/three-ts-types/blob/master/types/three/examples/jsm/loaders/KTX2Loader.d.ts

[Mugen87]

/ping @Methuselah96

[Methuselah96]

It sounds like you probably have moduleResolution set to either node/node10 in your tsconfig.json (implicitly or explicitly) which should no longer be used. See this guide for advice on how to configure TypeScript to resolve this.

See three-types/three-ts-types#1136 for more info and/or to discuss further.

[Mugen87]

Merging this issue into three-types/three-ts-types#1136.

[ydmingg]

// tsconfig.json
import { defineConfig } from 'vite';

{
    "compilerOptions": {
        "paths": {
            "three/webgpu": ["./node_modules/three/build/three.webgpu.min.js"]
            
        },
    }
}

[Makio64]

Following the answer of @ydmingg to add the auto-completion support for tsl as well :

{
    "compilerOptions": {
        "paths": {
		"three/webgpu": ["node_modules/three/build/three.webgpu.js"],
		"three/tsl": ["node_modules/three/build/three.tsl.js"],
        },
    }
}

@Mugen87 @mrdoob should this be added to the doc in installation section ?

[Mugen87]

It might make sense to add this to the Option 1 section as a collapse element similar to:

Installation added node_modules/ and package.json to my project. What are they?

[donmccurdy]

I'm a bit surprised TypeScript (or Vite?) can't get this information from package.json#exports, at least in the most recent three.js versions... do we know why that is?

[Methuselah96]

It should get the correct information from package.json#exports if you're using one of the recommended settings for moduleResolution (as discussed above). Let me know if something's not working for you with one of the recommended moduleResolution settings and I'd be happy to investigate further.

[menghu1994]

tsconfig.json

  "compilerOptions": {
    "moduleResolution": "bundler",
    "strict": false,
    "skipLibCheck": true,
    "paths": {
      "three": ["node_modules/@types/three"],
      "three/examples/jsm/*": ["node_modules/three/examples/jsm/*"]
    }
  }