use turbopack How to know isServer at compile time

[LLLLLamHo]

Summary

The configuration I made when building with webpack：

webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {

    // Important: return the modified config
    config.plugins.push(new webpack.DefinePlugin({
      'process.env.NEXT_MODE': JSON.stringify(isServer ? 'server' : 'web'),
    }));

   .....something
}

'process.env.NEXT_MODE' is used to determine within my code that if it is the server side, some Node.js code will be imported.

But now when I use turbopack for compilation, I find that I can't obtain whether the current compilation is for client or server. This led to a large number of errors in my code.

Additional information

This is one of the examples


 ⨯ ./node_modules/@grpc/grpc-js/build/src/transport.js:21:15
Module not found: Can't resolve 'tls'
  19 | exports.Http2SubchannelConnector = void 0;
  20 | const http2 = require("http2");
> 21 | const tls_1 = require("tls");
     |               ^^^^^^^^^^^^^^
  22 | const channelz_1 = require("./channelz");
  23 | const constants_1 = require("./constants");
  24 | const http_proxy_1 = require("./http_proxy");



Import trace:
  ./node_modules/@grpc/grpc-js/build/src/transport.js
  ./node_modules/@grpc/grpc-js/build/src/subchannel-pool.js
  ./node_modules/@grpc/grpc-js/build/src/internal-channel.js
  ./node_modules/@grpc/grpc-js/build/src/channel.js
  ./node_modules/@grpc/grpc-js/build/src/index.js
  ./node_modules/@tencent/cnb-system-config/built/config-rpc-invoke.js
  ./node_modules/@tencent/cnb-system-config/built/index.js
  ./apps/web/src/lib/config-manage/get-config-for-grpc.ts
  ./apps/web/src/lib/config-manage/index.ts
  ./apps/web/src/api/global/config-manage.ts
  ./apps/web/pages/_app.tsx

Example

No response

[icyJoseph]

Is it possible for you to use typeof window checks? IIRC, these are replaced at build time, which is an way to introspect the build environment. Actually when using Webpack the same happens, you never really needed to add this env var to do a check in your code, typeof window ought to do.

[LLLLLamHo]

What I expect is that when using turbopack, there can be a configuration method equivalent to webpack, so that during compilation, it can be known through environment variables whether the current compilation is server code or client code. https://nextjs.org/docs/app/api-reference/config/next-config-js/webpack

[icyJoseph]

The error in here:

export function getProcessVariable(prop: string): any {
  if (typeof window !== undefined) {
    return window.process.env[prop] ?? process.env[prop];
  }
  return process?.env[prop];
}

Isn't it "strange"? typeof window got replaced by object, so that if statement got executed, but window was undefined? What? That's because what I am saying is working. The problem here is that the getProcessVariable function is running during build most likely, etc ~

It does look like you are blinding client and server code very ~ anyway, have you tried reading process.env.NEXT_RUNTIME?:

• https://nextjs.org/docs/app/guides/instrumentation#importing-runtime-specific-code

[LLLLLamHo]

https://nextjs.org/docs/app/guides/instrumentation#importing-runtime-specific-code this link, I understand the meaning is not distinguish between server and client.

[icyJoseph]

yeah but it does, I think it is the same as the nextRuntime in the webpack config function, so it is undefined for browser, nodejs for well Node, and edge for edge runtime.

[LLLLLamHo]

Can the same capabilities as the DefinePlugin of webpack be provided? Otherwise, my current project cannot be compiled using turbopack。

by the way, my project use the page router.