Auto import does not export components in components.d.ts ?

[EvanSchleret]

Describe the bug

I’m working on a threejs app using Nuxt. I noticed that the module automatically imports everything. However, I’m curious to know if it’s normal that no components of tresjs are exposed or exported into the auto-generated components.d.ts file of Nuxt. This would be beneficial for developers like me, as it would allow us to take advantage of the full autocompletion feature offered by most modern IDEs.

Reproduction

https://stackblitz.com/~/github.com/EvanSchleret/tresjs-no-autocomplete-demo

Steps to reproduce

Just open the demo and see that you don’t need to manually import the component. However, you don’t benefit from auto-completion of any component (including component props).

System Info

System:
    OS: macOS 26.0
    CPU: (12) arm64 Apple M2 Max
    Memory: 287.42 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.14.0 - ~/.nvm/versions/node/v22.14.0/bin/node
    Yarn: 1.22.21 - /usr/local/bin/yarn
    npm: 10.9.2 - ~/.nvm/versions/node/v22.14.0/bin/npm
    pnpm: 10.12.1 - /usr/local/bin/pnpm
    *bun: 1.2.22 - /opt/homebrew/bin/bun*
  Browsers:
    Safari: 26.0
  npmPackages:
    @tresjs/nuxt: ^5.0.1 => 5.0.1

Used Package Manager

pnpm

Code of Conduct

• [x] I agree to follow this project's Code of Conduct
• [x] Read the Contributing Guidelines.
• [x] Read the docs.
• [x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [x] The provided reproduction is a minimal reproducible example of the bug.

[userquin]

I'll try to fix package exports...

[userquin]

can you test using "@tresjs/core": "https://pkg.pr.new/@tresjs/core@1094" ? maybe you need to use resolutions (no idea if bun using resolutions or another package.json entry, I don't use bun)

NOTE added a few more subpackage exports if you want to test them :pray:

[userquin]

You shouldn't use TresCanvas directly in Nuxt since we need to deal with client and server, use just TresCanvas without the import , Nuxt will add the client/server variants defined at @tresjs/nuxt

[EvanSchleret]

Hey there, thanks for your prompt response! I attempted to install it on my demo app using both resolutions and pnpm, but unfortunately, the components still don’t seem to be exported.

Am I doing something wrong ? I never used resolutions or overrides but following the documentation, I don't think anything is wrong ?

{
    "name": "nuxt-app",
    "private": true,
    "type": "module",
    "scripts": {
        "build": "nuxt build",
        "dev": "nuxt dev",
        "generate": "nuxt generate",
        "preview": "nuxt preview",
        "postinstall": "nuxt prepare"
    },
    "dependencies": {
        "@tresjs/nuxt": "^5.0.1",
        "nuxt": "^3.19.2",
        "three": "^0.180.0",
        "vue": "^3.5.21",
        "vue-router": "^4.5.1"
    },
    "resolutions": {
        "@tresjs/core": "https://pkg.pr.new/@tresjs/core@1094"
    }
}

I tried to reinstall the modules with pnpm and npm. It didn't change anything. Each time, I deleted node_modules and .nuxt folders.

[EDIT] I also tried to do this with bun because they say in their documentation that they actually support overrides and resolutions. It still doesn't work :/

[userquin]

No idea about bun, I only use pnpm , if using pnpm you should add "@tresjs/core": "https://pkg.pr.new/@tresjs/core@1094" also to the dependencies, or just add a .npmrc file with the following content and run pnpm install (will recreate the node_modules => pnpm will ask you to recreate the folder), @tresjs/core won't be there, it is a dependency used by @tresjs/nuxt and so the resolution won't work (not being hoisted):

shamefully-hoist=true

I'm going to check your reproduction on my local (importing the component from @tresjs/core my WebStorm IDE showing an error, once added the dependency, the error is gone):

importing importing @tresjs/core components

[userquin]

Using @tresjs/core/components also working:

using @tresjs/core/components to import components

[EvanSchleret]

Oh, perhaps we’re not precisely discussing the same concept. I was referring to any other component of TresJS, such as the TresPerspectiveCamera. While it’s true that incorporating it into the template works, we don’t gain the full advantage of the automatic import feature (except for TresCanva, as we don’t have any Tres components, like the camera). In my initial message, I was highlighting the benefit of having all the components exported in the Nuxt components.d.ts file, enabling us to utilize them and enjoy automatic prop completion, among other features.

But yeah otherwise, TresCanvas work, even though we also don't have any auto completion of available props (alpha, camera, depth, ...)

[userquin]

ok, just add this to your package.json, missing three types, you need to add them (not working with WebStorm, requires som web-types to make it working):

"devDependencies": {
    "@types/three": "^0.180.0"
  },

TresPerspectiveCamera

TresPerspectiveCamera props/attrs

[userquin]

https://docs.tresjs.org/getting-started/installation#install-typescript-types-optional

[alvarosabu]

Thanks for the support here @userquin, @EvanSchleret. Maybe it would be helpful if we were more explicit about the requirement of having the @types/three installed so the types in Nuxt work as expected, would that help?

[EvanSchleret]

ok, just add this to your package.json, missing three types, you need to add them (not working with WebStorm, requires som web-types to make it working):

Oh, okay. Thanks for your time and your answer. Just for my curiosity, I did some research about this problem, and it seems like this bug has been around for a long time. I’m not sure who is "responsible" for it. Is it fixable in three-types?

[EvanSchleret]

Thanks for the support here @userquin, @EvanSchleret. Maybe it would be helpful if we were more explicit about the requirement of having the @types/three installed so the types in Nuxt work as expected, would that help?

Could be. And say that for the moment, the @types/three lib is not working on Webstorm for whatever reason. I'm a bit frustrated to pay for an IDE that doesn't seem to be as "complete" as I would like it to be haha

[alvarosabu]

@EvanSchleret I empathize with the fact that Typescript can lead to frustration for sure, but maybe is not on Webstorm, ThreeJS has always struggled with types; the core library is not typed, and the @types/three is just a community effort.

Maybe @niklas-wortmann could guide us here, so we can identify if it's a known issue on Webstorm or something we can help the @types/three folk to solve.

[EvanSchleret]

@alvarosabu I'll be happy to contribute to anything if we could do something that goes in a way where everyone could benefit of types completion. Let me know ! Maybe we could discuss about it on Discord too. I'm open :)

[niklas-wortmann]

Sorry I completely missed this, I will give this a look on Monday and come back here

[phzhitnikov]

+1 this. In WebStorm @types/three works for me when using plain ThreeJS, but not for TresJS.