Option to transpile module inside node_modules

[flip-it]

Clear and concise description of the problem

I need to use a NPM package that isn't transpiled. Seems like babel/webpack can be configured, and Next.js added an option for it. Is it something Vite also can support?

Suggested solution

Possibly by adding something like this in the config:

export default defineConfig({
  addModulePathsToTranspile: ['package-name', '@other/package'],
});

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[jasondibenedetto]

Just wanted to bump this one to see if there was any updates on how to achieve this.

[Devric]

is your purpose of transpile mostly required for hot reloading? if so i just found this hotreload library, which does it by settings the watch on all files from root. works perfect with my monorepo setup and SSR, havent test changes with on page states yet, might not work with that.

import liveReload from "vite-plugin-live-reload"
 plugins: [
                liveReload('**/*'),
                ....  
]

[bluwy]

As long as the NPM package is written in ESM, you can do so today with optimizeDeps.exclude: ["that-dep"]. And it'll go through Vite's process. If that-dep has transitive deps that are not ESM, you can add optimizeDeps.include: ["that-dep > cjs-dep"]. vite-plugin-svelte has been doing these automatically for raw Svelte libraries. Another option is to have Vite plugins apply #6801, but it's still at experimental stage.

Does the optimizeDeps flow work for you @flip-it? If so we could close this issue.

[sodatea]

Closing due to lack of response.