Custom dev server get Error: TypeError: Cannot read properties of undefined (reading 'ProvidePlugin')

[frankda]

Verify canary release

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

Provide environment information

Operating System:
Platform: MacOS
Arch: M1
Binaries:
Node: 16.4.2
npm: 7.17.0
Yarn: N/A
pnpm: N/A
Relevant packages:
next: 13.2.1
eslint-config-next: N/A
react: 18.2.0
react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue

https://stackblitz.com/edit/nextjs-n5mjba?file=package.json,server.js

To Reproduce

1. Create a create-next-app
2. create a new server.js in root directory
3. Install package webpack and express
4. Use the code in stackbliz link in server.js, can pass any config into next()
5. node server.js start the server

Describe the Bug

If I pass any next.config into next({conf=${ANY_NEXT_CONFIG}}), will get error:

TypeError: Cannot read properties of undefined (reading 'ProvidePlugin')
    at Object.getBaseWebpackConfig [as default] (file:///home/projects/nextjs-n5mjba/node_modules/next/dist/build/webpack-config.js:1087:64)
    at async Promise.all (index 0)
    at async Span.traceAsyncFn (file:///home/projects/nextjs-n5mjba/node_modules/next/dist/trace/trace.js:79:20)
    at async Span.traceAsyncFn (file:///home/projects/nextjs-n5mjba/node_modules/next/dist/trace/trace.js:79:20)
    at async HotReloader.start (file:///home/projects/nextjs-n5mjba/node_modules/next/dist/server/dev/hot-reloader.js:387:30)
    at async DevServer.prepare (file:///home/projects/nextjs-n5mjba/node_modules/next/dist/server/dev/next-dev-server.js:596:9)

Expected Behavior

Dev server to spin up in localhost:3000.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[tridattran]

This looks related to #45413. It looks like next version 13.0.1 may not have this issue.

[frankda]

Any updates for this one?

[karlhorky]

It looks like next version 13.0.1 may not have this issue.

Actually all versions I tested up until next@13.1.1 work with the server.js from @frankda's original StackBlitz.

StackBlitz (working) next@13.1.1: https://stackblitz.com/edit/nextjs-lcybqb?file=package.json

---

And then versions starting with next@13.1.2 are broken:

StackBlitz (broken) next@13.1.2: https://stackblitz.com/edit/nextjs-mimpqu?file=package.json

[karlhorky]

My StackBlitzes above and this comment in #45413 by @farhan2077 leads me to think that aa0664c may be the cause.

@ijjk it seems that aa0664c (your PR #43198 with the experimental precompiled next-server) could be causing problems here with ProvidePlugin not being defined - what do you think?

[rdimascio]

Any news on this? I'm seeing the exact same issue on 13.2.4

next({
    dev: IS_DEV,
    hostname: HOSTNAME,
    port: SERVER_PORT,
    conf: {
      env: {
        API_URL: 'http://localhost:3000/api',
      }
    }
});

Throws a webpack error —

Cannot read properties of undefined (reading 'DefinePlugin') TypeError: Cannot read properties of undefined (reading 'DefinePlugin')

[karlhorky]

Workaround

The way we have worked around it for now is to set dir to our Next.js directory (you could also use __dirname instead if you're not on ESM yet):

// util/next.ts
import { dirname, resolve } from 'node:path';
import { fileURLToPath } from 'node:url';
import next from 'next';

const app = next({
  dev: !('NODE_ENV' in process.env) || process.env.NODE_ENV === 'development',
  hostname: 'localhost',
  port: 3000,
  // Path to next.config.js
  dir: resolve(
    dirname(fileURLToPath(import.meta.url)),
    '..',
  ),
});

[rdimascio]

Thanks @karlhorky, I left that out because I didn't think it was relevant to the issue. We are setting dir, and have the app running. But the issue seems to arise when we use conf. We have a config object that we need to pass into Next at runtime.

[karlhorky]

What I meant is that you can use next.config.js instead of setting the conf key. If you need logic, maybe you can write it in next.config.js

[rdimascio]

The issue is we need to pass dynamic runtime secrets from the Express server, and we cannot import them into next.config.js because the server application is written in TypeScript.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.