Tweakpane is still included in the final client bundle

stefanobartoletti commented 2 months ago

Describe the bug

I noticed that my final client bundle is still including tweakpane, despite not being used in my project and apparently not even explicitly declared as a dependency in the cientos package itself.

There must be some problem when resolving dependencies I guess, or maybe tweakpane is somewhat automatically imported by cientos somewhere.

This is the dependency as resolved in pnpm-lock.yaml

  /@tresjs/cientos@3.8.0(@tresjs/core@3.9.0)(three@0.163.0)(tweakpane@4.0.3)(vue@3.4.25):
    resolution: {integrity: sha512-m3lyrBHrHkwkDG28B/vQQUeQ9FlG5C50bkULYEoQXrpIAM8toC11DpxY6VMMvbFc4qhZA5QdTZIlznJ8ZDopFQ==}
    peerDependencies:
      '@tresjs/core': '>=3.2'
      three: '>=0.133'
      tweakpane: '>=3.0.0'
      vue: '>=3.3'
    dependencies:
      '@tresjs/core': 3.9.0(three@0.163.0)(vue@3.4.25)
      '@vueuse/core': 10.9.0(vue@3.4.25)
      camera-controls: 2.8.3(three@0.163.0)
      stats-gl: 2.2.8
      stats.js: 0.17.0
      three: 0.163.0
      three-custom-shader-material: 5.4.0(three@0.163.0)
      three-stdlib: 2.29.6(three@0.163.0)
      tweakpane: 4.0.3
      vue: 3.4.25(typescript@5.4.5)
    transitivePeerDependencies:
      - '@react-three/fiber'
      - '@vue/composition-api'
      - react
    dev: true

And this is the final client bundle:

Screenshot_20240424_141619

Reproduction

https://github.com/stefanobartoletti/tresjs-playground

Steps to reproduce

pnpm install
npx nuxi@latest analyze

to preview the final bundle

System Info

No response

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.

stefanobartoletti commented 2 months ago

Ok, some more info.

What I reported in the original message was the behavior when using pnpm.

For the sake of testing, I tried with yarn, and yarn.lock has this

"@tresjs/cientos@^3.8.0":
  version "3.8.0"
  resolved "https://registry.yarnpkg.com/@tresjs/cientos/-/cientos-3.8.0.tgz#950a5c545fa136561e5d7bc8cecc583d812dc477"
  integrity sha512-m3lyrBHrHkwkDG28B/vQQUeQ9FlG5C50bkULYEoQXrpIAM8toC11DpxY6VMMvbFc4qhZA5QdTZIlznJ8ZDopFQ==
  dependencies:
    "@tresjs/core" "3.7.0"
    "@vueuse/core" "^10.7.2"
    camera-controls "^2.7.4"
    stats-gl "^2.0.1"
    stats.js "^0.17.0"
    three-custom-shader-material "^5.4.0"
    three-stdlib "^2.29.4"

so it is not resolving tweakpane, but when I try to bundle, I got this error:

[14:32:51]  ERROR  [vite]: Rollup failed to resolve import "tweakpane" from "/home/stefano/Sviluppo/Personali/tresjs-playground/node_modules/@tresjs/cientos/dist/trescientos.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to

So it seems that cientos is importing tweakpane somewhere, and during resolution, pnpm is automatically importing it as a direct dependency, while yarn is simply not caring about it.

JaimeTorrealba commented 2 months ago

Hi @stefanobartoletti yes in order to delete the tweakpane from our dependencies, we need to do a breaking change. As we have another breaking changes, all with come in the v4 of cientos (we're waiting for the v4 of the core, now is done) You can see all the PRs open with the v4 tag https://github.com/Tresjs/cientos/issues/347.

Tweakpane will be removed 100% in the v4

stefanobartoletti commented 2 months ago

@JaimeTorrealba thanks, I just wanted to report it, glad that you were already aware ✌️

Tresjs / cientos