r171 : Fn is not a function with vite.

[Makio64]

Description

import { Fn } from 'three/tsl' not working in r171

The requested module '/node_modules/.vite/deps/three_tsl.js?v=dde6d16d' does not provide an export named 'Fn' I saw similar problem last week when opening a bug in jsfiddle and using the dev branch.

Should we change our imports? @mrdoob

Reproduction steps

1. try importing Fn

Code

X

Live example

https://jsfiddle.net/Makio64/m5zLofx2/1/

Screenshots

No response

Version

r171

Device

No response

Browser

No response

OS

No response

[Mugen87]

Your fiddle is not correct since the import map does not define three/tsl. When doing so, the import of Fn works as expected:

https://jsfiddle.net/a8xm3fph/5/

Maybe a Vite specific issue? The export in the npm package looks correct.

three.js/package.json

Line 19 in 17c59b2

"./tsl": "./build/three.tsl.js"

[Spiri0]

Fn is not part of three.module.js.
three.tsl.js imports "three/webgpu" at the beginning.
So without three.webgpu.js it doesn’t work.

I see Fn as part of three.webgpu.js with the ability to generate glsl code in fallback, but not as a tool intended for targeted shader generation in glsl with three.module.js.
In WebGL, in my opinion, it will be best to create shaders the old way, with RawShaderMaterial. The WebGL examples I looked at were left as they were, without Fn.
@Mugen87 please correct me if I'm wrong.

[Makio64]

Your fiddle is not correct since the import map does not define three/tsl. When doing so, the import of Fn works as expected:

https://jsfiddle.net/a8xm3fph/5/

Maybe a Vite specific issue? The export in the npm package looks correct.

three.js/package.json

Line 19 in 17c59b2

"./tsl": "./build/three.tsl.js"

Its the imports of the jsfiddle examples from the Bug Request.
I'm currently using in vite : 'three/tsl': 'three/webgpu' as suggested by @RenaudRohlinger and it worked well until the r171, why this change ?

[Mugen87]

Its the imports of the jsfiddle examples from the Bug Request.

Thanks for the heads up. I have updated the fiddles so the import maps reflect the changes of r171. 17c59b2

I'm currently using in vite : 'three/tsl': 'three/webgpu' as suggested by @RenaudRohlinger and it worked well until the r171, why this change ?

I guess you are referring to this setup, right?

#28650 (comment)

I'm not a vite user so hopefully @RenaudRohlinger can help.

[sunag]

The alias for 'three/tsl': 'three/webgpu' would no longer be necessary.

[Makio64]

that vite config work for r171 me now :

	resolve: {
		alias: {
			// remap to new threejs version
			'three/addons': 'three/examples/jsm',
			'three/webgpu': path.resolve( __dirname, 'node_modules/three/build/three.webgpu.js' ),
			'three/tsl': path.resolve( __dirname, 'node_modules/three/build/three.tsl.js' ),
			'three': path.resolve( __dirname, 'node_modules/three/build/three.webgpu.js' ),
		},
	},

[marcofugaro]

@Makio64 your three/addons, three/webgpu, three/tsl aliases are no longer needed. If you're having issues with Typescript not recognizing the three.js custom import you can check out the solution here: three-types/three-ts-types#1136 (comment)

This issue can be closed.

[Makio64]

@marcofugaro what do you mean ? In r171 If i dont setup this in vite.config.js, it doesn't compile.. ( import not found )

[marcofugaro]

Yes, because of this issue: three-types/three-ts-types#1136 (comment)

[Makio64]

@marcofugaro i'm not using typescript in my project and it worked perfectly on r170.
also my jsconfig:

{
	"compilerOptions": {
		"module": "esnext",
		"target": "esnext",
		"baseUrl": "./",
		"paths": {
			"@/*": [
				"./src/*"
			],
			"three/addons": [
				"./node_modules/three/examples/jsm"
			],
			"three/tsl": [
				"./node_modules/three/build/three.tsl.js"
			],
			"three": [
				"./node_modules/three/build/three.webgpu.js"
			],
		}
	},
	"include": [
		"src/**/*"
	]
}

[marcofugaro]

@Makio64 0.171.0 with fine with Vite, typescript or not.
Here is a test: vite-three-test.zip

It's a problem with your configuration, you'd have to share a minimal reproducibe repo with the error.

[marcofugaro]

If you're not using Vite but just the native browser modules, here is a version with the correct importmaps: https://jsfiddle.net/3orfn6qd/1/

[Makio64]

Removed all and import from 'three/webgpu'
Also this repo can help : https://github.com/brunosimon/three.js-tsl-template/blob/main/vite.config.js