serverComponentsExternalPackages does not work with workspace packages

[raftario]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
    Platform: win32
    Arch: x64
    Version: Windows 10 Pro
Binaries:
    Node: 18.12.1
    npm: N/A
    Yarn: N/A
    pnpm: N/A
Relevant packages:
    next: 13.0.6-canary.1
    eslint-config-next: N/A
    react: 18.2.0
    react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

The experimental serverComponentsExternalPackages config option does not seem to have any effect when specifying workspace packages and webpack still attempts to bundle them. This behaviour is the same with both yarn@3 and pnpm@7.

./native.node
Module parse failed: Unexpected character '�' (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

Expected Behavior

webpack should not attempt to bundle workspace packages specified in serverComponentsExternalPackages.

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://github.com/raftario/next-server-components-external-workspace-packages

To Reproduce

• install dependencies and build the native addon workspace with yarn install
• attempt to build the app with yarn build

[apancutt]

Same issue. Since I deploy the monorepo as a Docker image I don't want/need to bundle any server dependencies, so I'm doing this…

// apps/my-app/next.config.js

const { readdirSync } = require('node:fs');
const { builtinModules } = require('node:module');
const { join } = require('node:path');

const monorepoModules = (scope = undefined) => {
  const nodeModulesPath = join(__dirname, '..', '..', 'node_modules');
  return readdirSync(scope ? join(nodeModulesPath, scope) : nodeModulesPath, { withFileTypes: true })
    .filter((dirent) => dirent.isDirectory() && !dirent.name.startsWith('.'))
    .map((dirent) => scope ? `${scope}/${dirent.name}` : dirent.name)
    .reduce((acc, name) => (
      undefined === scope && name.startsWith('@')
        ? [ ...acc, ...monorepoModules(name) ]
        : [ ...acc, name ]
    ), []);
};

module.exports = {
  experimental: {
    serverComponentsExternalPackages: monorepoModules()
      .concat(builtinModules)
      .concat(builtinModules.map((name) => `node:${name}`)),
  },
  // ...etc
};

Is there a better way to opt-out of bundling server dependencies?

[matthieu-beteille]

any update here?

Edit by maintainers: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[muhammadyusuf-kurbonov]

So any updates? I can't use @xenova/transformers due this issue. Any workarounds, please.

[raftario]

One possible workaround is editing the webpack config like so in your next.config.js.

webpack: (config) => {
  config.externals.push({
    "PACKAGE_NAME": "commonjs PACKAGE_NAME",
  })
  return config
},

However this is pretty ugly and error prone and having the dedicated config option work properly within monorepos would be much nicer :)

[davecarlson]

A question on this : is a package is used within a package, does it get externalised? Use case:

main next app app lives in apps/frontend prisma lives in packages/database ( @prisma/client andprisma`)

we import prisma like thus: import prisma from@companyname/database`

Will the 2 prisma packages be auto externalised, or do we need to tell it to externalise @companyname/database ?

https://nextjs.org/docs/app/api-reference/next-config-js/serverComponentsExternalPackages

I ask because out our vercel output, we get a large bundle warning for 2 of the functions., and it looks to be including prisma

[timfish]

a package is used within a package, does it get externalised?

My testing suggests not!

[r34son]

I guess problem is here https://github.com/vercel/next.js/blob/v14.2.5/packages/next/src/build/handle-externals.ts#L421 Need to adjust regexp to handle more pnpm-like cases

[r34son]

In my case issue was in incorrect exports in package package.json Ensure that you have at least one "default" condition export