Creating a build with vite causes method to be undefined

[hybridherbst]

Describe the bug

The code in the reproduction case only breaks when making a build. Local development works fine.

Related issue on the three.js side to keep track of it:

• Nodes: Nodes system throws exceptions when used with vite, functionNode.call is not a function mrdoob/three.js#27360

I have tracked down the difference between local run and a build run being that functionNode.call is undefined in builds, but defined and working in local development:

• https://github.com/mrdoob/three.js/blob/28f99d7da331de4cfa456a404e226f787974d57f/examples/jsm/nodes/code/FunctionNode.js#L120

I am not 100% sure if this is a vite bug during bundling but I don't know where the discrepancy comes from.

Reproduction

https://stackblitz.com/edit/vitejs-vite-9b37bu

Steps to reproduce

1. Go to https://stackblitz.com/edit/vitejs-vite-9b37bu
2. Open the browser console
3. Run npm run start
4. Note no errors (code runs fine)
5. Cancel the run by pressing Ctrl + C in the terminal
6. Run npm run preview which builds the code and hosts the resulting bundled code
7. In the console, note error: Uncaught TypeError: functionNode.call is not a function

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
    pnpm: 8.10.5 - /usr/local/bin/pnpm
  npmPackages:
    vite: ^5.0.4 => 5.0.7

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[bolt-new-by-stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-9b37bu (Open reproduction)

[XiSenao]

It seems that rollup removes modules with side effects during the build phase, which causes errors.

// vite.config.ts
import { defineConfig } from 'vite';
export default defineConfig(async ({ command }) => {
  return {
    build: {
      rollupOptions: {
        treeshake: false,
      },
    },
  };
});

[hybridherbst]

Thanks for the comment. It's good to know that it is treeshaking-related, but I certainly want to keep that turned on. I assume that means the source code needs to change and not have side effects? Are there good docs for where to start with understanding what's being treeshaked any why?

[XiSenao]

You can refer to the document, which may be helpful for you.

The three/examples/jsm/nodes/Nodes.js module has side effects, a relatively simple way can be referred to as follows.

import * as jsmNodes from 'three/examples/jsm/nodes/Nodes.js';
const {
  mx_noise_vec3,
  timerLocal,
  MeshPhysicalNodeMaterial,
  normalWorld,
} = jsmNodes;

This issue seems to be unrelated to Vite itself. If this is a problem, you can relate the current issue to the behavior of Rollup handling tree-shaking.

[hybridherbst]

Turns out the three.js package already declares these particular files as having side effects in its package.json.

"sideEffects": ["./examples/jsm/nodes/Nodes.js"],

Is that ignored in vite?

[XiSenao]

The vite build process depends on rollup. I understand that the sideEffects field in package.json should be of concern to rollup.

[XiSenao]

I tried to use rollup to directly build three/examples/jsm/nodes/Nodes.js module, and found that some modules in the built artifact were tree-shaken, it seems that the sideEffects field did not limit rollup's behavior 🤔

https://stackblitz.com/edit/vitejs-vite-pxc7td?file=rollup.config.js

[ycw]

Turns out the three.js package already declares these particular files as having side effects in its package.json.
"sideEffects": ["./examples/jsm/nodes/Nodes.js"],

Only that exact single module is side effectful, all the modules re-exported from there aren't; If some of them are indeed side effectful, you should mark them in sideEffects, in your case:

- "sideEffects": ["./examples/jsm/nodes/Nodes.js"],
+ "sideEffects": ["./examples/jsm/nodes/Nodes.js", "./examples/jsm/nodes/core/FunctionCallNode.js"],

[XiSenao]

Yeah. According to my understanding, all modules in ./examples/jsm/nodes have side effects, so the value of the sideEffects field in https://github.com/mrdoob/three.js/blob/dev/package.json should be ./examples/jsm/nodes/**/* instead of ./examples/jsm/nodes/Nodes.js.

[XiSenao]

If this issue has been resolved, you can close it. @hybridherbst

[sapphi-red]

I checked the reproduction with the sideEffects field change applied (mrdoob/three.js#27360 (comment)) and the error didn't happen.
Closing as this is not a bug in Vite.

@XiSenao Thanks for investigating!