add support for functional build.transpile with vite builder

[belomx]

Environment

https://codesandbox.io/s/amazing-minsky-nwzxcr?file=/nuxt.config.js

Reproduction

In the "nuxt.config.js" define the build transpile like:

import { defineNuxtConfig } from "nuxt";

export default defineNuxtConfig({
build: {
transpile: [({ isDev }) => isDev && "lodash"]
}
});

Then execute "npm run build"

Describe the bug

The nuxt build is returns the error in logs section. And lodash is not transpiled.

Additional context

The functionality work properly when the nuxt.config is done in typescript ("nuxt.config.ts").

Config from nuxt documentation.
https://nuxtjs.org/docs/configuration-glossary/configuration-build/#transpile

Logs

WARN  [SSR] Error transforming /sandbox/node_modules/nuxt/dist/app/entry: filename.split is not a function

  at normalizePath (node_modules/vite/dist/node/chunks/dep-0fc8e132.js:11471:21)
  at getMatcherString (node_modules/vite/dist/node/chunks/dep-0fc8e132.js:11476:16)
  at Object.test (node_modules/vite/dist/node/chunks/dep-0fc8e132.js:11495:33)
  at result (node_modules/vite/dist/node/chunks/dep-0fc8e132.js:11511:25)
  at node_modules/vite/dist/node/chunks/dep-0fc8e132.js:38123:38
  at node_modules/vite/dist/node/chunks/dep-0fc8e132.js:38139:41
  at shouldExternalizeForSSR (node_modules/vite/dist/node/chunks/dep-0fc8e132.js:38066:12)
  at TransformContext.transform (node_modules/vite/dist/node/chunks/dep-0fc8e132.js:40368:34)
  at async Object.transform (node_modules/vite/dist/node/chunks/dep-0fc8e132.js:35579:30)
  at async loadAndTransform (node_modules/vite/dist/node/chunks/dep-0fc8e132.js:39888:29)

[danielroe]

build.transpile only supports RegExp + strings in Vite. (The function is used for webpack builder only.)

Do you think it's worth adding support for it to vite builder too @pi0? I think it could be useful as someone might want to transpile in server/client context only.

[pi0]

Yes, we added it to Nuxt 2 for webpack too (main usecase was a transpile for nuxt/http module only on server) makes sense to support function entries for transpile accepting env for vite too (universally) 👍🏼

[jmorel88]

@danielroe @pi0 I'd be happy to help out with this one. Would you mind pointing me in the right direction? What directories/files would be a good starting point?

[danielroe]

We likely need to move it from https://github.com/nuxt/framework/blob/09c42fd886f1a35f7cd8f400711cd889876828ad/packages/vite/src/vite.ts#L43 to https://github.com/nuxt/framework/blob/5855ba4684e36eb1e785f377d034277f008bc92a/packages/vite/src/server.ts#L50 and https://github.com/nuxt/framework/blob/720da64b1208756d81ea4f8e651e8089f73c180f/packages/vite/src/client.ts#L42.

[JoakimFFCG]

The documentation for transpile says:

You can also use a function to conditionally transpile. The function will receive an object ({ isDev, isServer, isClient, isModern, isLegacy }).
Example:
transpile: [({ isLegacy }) => isLegacy && 'ky']

However, when I try to provide a function in the transpile array I always get
[vite-node] [plugin:vite:import-analysis] [VITE_ERROR] /@fs./node_modules/nuxt/dist/app/entry.mjs

If I understand this issue correct the above functionality isn't actually merged yet?
Any ETA for that? Can't see any blockers in the PR.

(And yes, the code example in the documentation is missing isLegacy before &&).

EDIT: The typo in the documentation I quoted was fixed.