Integration Vite into web apps in a "bit root" (@teambit)

[Jinjiang]

Hi, this is Jinjiang from https://github.com/teambit. I'd like to create this discussion for the bit x vite integration issues we have ever met.

In short, Bit CLI is a tool focusing on component development. In a Bit workspace, every component generates its own package in node_modules. For integrating vite into web apps in Bit, the main difference from a normal web app is the entrance of a web app is inside a package in node_modules.

During the integration, we met some issues that the web apps don't work expected. In general these issues include:

• commonjs code in a package not transformed properly
• ssr module load error in some packages
• some files in a package reported not exist during ssr but they do exist

We tried different combinations of vite config but didn't find a perfect solution. So I'd like to provide a reproduction of a basic issue to discuss a best approach:

https://github.com/Jinjiang/reproductions/tree/vite-ssr-in-node_modules-20240116

This is a SSR React app. The component is a real simple React component created by Bit, and the web app setup is based on an example on Vite docs. (The setup is supposed to be encapsulated as an app runner in Bit.)

With the same code in '.' the web app works. However, it doesn't when it starts from the package in node_modules.

The question: is there a good way to run web apps from a package inside node_modules?

Thanks.

[patak-dev]

I don't think there is an easy way to solve this right now. Currently, Vite works differently for ids inside node modules in several places, and uses a simple check to define if a file is in node_modules. I think all these references should be changed to a function depending on the Vite config and a new configuration option added. I hope we could keep the simple check though. Is it completely fixed on Bit side that the components will end up in a node_modules folder. I would imagine that you don't only have issues with Vite but also with other tools, no?

[patak-dev]

Even if the app is not inside node_modules, it will need to be ESM in case of Vite. cjs code isn't supported in source code, only accepted in dependencies.
For running vite dev in a folder that have node_modules as a parent, you should review every check we have for isNodeModules. Each of them should be there for a reason, so there will be fails if we don't rework them in Vite core. webpack may not had the simple check we had. One option would be to replace the check to take into account the root and only check for node_modules inside the root and not in the parent folders but for doing that you'll need to pass around the config to all the places were we are currently just calling isNodeModules. Maybe you could try a PR and see if the complexity is low enough and things start to work for you?

[Jinjiang]

Sure, let me have a try. Thanks for the information.

[Jinjiang]

@patak-dev as so far what I've debugged, this is the trigger:

vite/packages/vite/src/node/optimizer/scan.ts

Line 245 in 997a695

'**/node_modules/**',

, which missed the entry point in node_modules/<root-package>/index.html and missed the deps optimization further. And the reproduction code would work if we just remove this line of code.

I understand this line of code can't be simply deleted like this, however, as a better walkaround, do you think we can provide a way to specify the entries directly without in the fast-glob patterns?

Or any other better solutions?

Thanks.

[Jinjiang]

I created this PR to fix it #15746
please take a look 🙏

[Jinjiang]

@patak-dev don't mind me giving another try 😅

In this PR #15853 I skipped fast-glob if there is no special characters specified in optimizeDeps.entries. So Bit apps can walk around by specifying optimizeDeps.entries with value like /xxx/node_modules/<target-package>/index.html.

What do you think about this one?

Thanks.