Vite: Duplicate imports when mixing three/tsl and three/webgpu

[Makio64]

Description

I recently got warning in vite when i'm importing from three/tsl and three/webgpu

Duplicated imports "NodeAccess", the one from "three/tsl" has been ignored and "three/webgpu" is used
Duplicated imports "NodeShaderStage", the one from "three/tsl" has been ignored and "three/webgpu" is used
Duplicated imports "NodeType", the one from "three/tsl" has been ignored and "three/webgpu" is used
Duplicated imports "NodeUpdateType", the one from "three/tsl" has been ignored and "three/webgpu" is used
Duplicated imports "defaultBuildStages", the one from "three/tsl" has been ignored and "three/webgpu" is used
Duplicated imports "defaultShaderStages", the one from "three/tsl" has been ignored and "three/webgpu" is used
Duplicated imports "shaderStages", the one from "three/tsl" has been ignored and "three/webgpu" is used
Duplicated imports "vectorComponents", the one from "three/tsl" has been ignored and "three/webgpu" is used

Reproduction steps

1. setup a project
2. import from three/tsl & three/webgpu

Code

X

Live example

X

Screenshots

X

Version

r176

Device

No response

Browser

No response

OS

No response

[Mugen87]

Can you pinpoint when these warnings started to appear? A release version would already be helpful. Even better the PR that introduces the issue.

[Makio64]

@Mugen87 seems what im doing is only available since 171.0

To give more context i saw this warning recently and especially this monrning while plugged tsl/webgpu version to : unplugin-auto-import
( to avoid to do the import { vec2, vec3, float, uniform } manually in each file )

using :

// tslImports.ts
import * as tsl from 'three/tsl'

const tslNames = Object.keys(tsl) as (keyof typeof tsl)[]

const tslImports = [ ...tslNames ]
export default tslImports
export { tslImports }

// webgpuImports.ts
import * as webgpu from 'three/webgpu'

const webgpuNames = Object.keys(webgpu) as (keyof typeof webgpu)[]

const webgpuImports = [ ...webgpuNames ]
export default webgpuImports
export { webgpuImports }

// in vite config 
    AutoImport({
      include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/, /\.md$/],
      imports: [
				'vue',
				'vue-router',
				{
					'three/tsl': tslImports,
					'three/webgpu': webgpuImports
				}
			],
      vueTemplate: true,
      eslintrc: { enabled: true }
    }),

[Makio64]

The class concern by the double definition in both three/tsl and three/webgpu are these ones : NodeAccess, NodeShaderStage, NodeType, NodeUpdateType, defaultBuildStages, defaultShaderStages, shaderStages,
vectorComponents

[CodyJasonBennett]

Do you know what the resulting code from https://github.com/unplugin/unplugin-auto-import looks like here?

The warning suggests that you have multiple imports in the same file referring to the same export, which would otherwise be invalid.

[donmccurdy]

I've been mixing imports from three/tsl and three/webgpu pretty freely in a Vite project, and haven't run into this problem so far. Might this be specific to unplugin-auto-import? Or perhaps something else in the vite config... My current config is pretty basic:

// vite.config.ts
import { defineConfig } from 'vite'
import preact from '@preact/preset-vite'
export default defineConfig({plugins: [preact()]})

[MarkKatsDesign]

Hi! I am not sure if this helps, I have replicated the issue on my end and this is how I fixed the import issues that you have.

This is the modified vite.config.js:

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import tslImports from './src/config/tslImports'
import webgpuImports from './src/config/webgpuImports'

// List of conflicting symbols
const CONFLICTING_SYMBOLS = [
  "NodeAccess",
  "NodeShaderStage",
  "NodeType",
  "NodeUpdateType",
  "defaultBuildStages",
  "defaultShaderStages",
  "shaderStages",
  "vectorComponents"
]

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/],
      imports: [
        'vue',
        {
          // Filter out conflicting symbols from TSL
          'three/tsl': tslImports.filter(name => !CONFLICTING_SYMBOLS.includes(name)),

          // Use all webgpu imports
          'three/webgpu': webgpuImports
        }
      ],
      vueTemplate: true,
      eslintrc: {
        enabled: true,
        filepath: './.eslintrc-auto-import.json'
      },
      dts: './auto-imports.d.ts',
    })
  ]
})