Can't resolve 'pg-native' when using --experimental-app

[leandronorcio]

Verify canary release

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

Provide environment information

I'm unable to test this in the canary release as running `npm install next@canary` just keeps getting stuck at `reify:next: timing reify:audit Completed in 496ms` for forever.

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.4.0: Mon Mar  6 20:59:28 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.16.0
      npm: 8.11.0
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.3.0
      eslint-config-next: 13.3.0
      react: 18.2.0
      react-dom: 18.2.0

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

App directory (appDir: true)

Link to the code that reproduces this issue

https://github.com/leandronorcio/pg-native-next13-error

To Reproduce

1) npx create-next-app@latest --experimental-app 2) npm install pg @types/pg

3) Change the content of /app/api/hello/route.ts to:

import { Client } from 'pg';

export async function GET(request: Request) { const client = new Client({ host: 'localhost', port: 5432, database: 'notes_app_nextjs13', user: 'postgres', password: 'password', }); client.connect((err) => { if (err) { console.error('connection error', err.stack); } else { console.log('connected'); } }); return new Response('Hello, Next.js!'); }

4) npm run dev 5) Go to http://localhost:3001/api/hello.

Describe the Bug

The http://localhost:3001/api/hello page outputs the following:

../node_modules/pg/lib/native/client.js:4:13 Module not found: Can't resolve 'pg-native'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module: ../node_modules/pg/lib/native/index.js ../node_modules/pg/lib/index.js ./app/api/hello/route.ts

Expected Behavior

The http://localhost:3001/api/hello page should connect properly to the Postgresql database and respond with Hello, Next.JS!.

This works just fine when not using the --experimental-app.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[leandronorcio]

I solved it by adding serverComponentsExternalPackages: ['pg'] under the experimental property of the nextConfig object.

[mkanakis]

Was just experiencing the same, above solution works.

[lenryk]

I solved it by adding serverComponentsExternalPackages: ['pg'] under the experimental property of the nextConfig object.

Tried this on 13.2.4 13.3.0 and 13.3.1-canary.8 with experimental appDir: true and runtime: 'edge' but same error. 😢

./node_modules/pg/lib/native/client.js:4:0 Module not found: Can't resolve 'pg-native'

Running on Windows 10 & node v16.18.0

[maccman]

Above solution doesn't work for me :(

[james-elicx]

This solution resolved the problem for me.

https://stackoverflow.com/questions/41522744/webpack-import-error-with-node-postgres-pg-client

const webpack = require('webpack');

/** @type {import('next').NextConfig} */
const config = {
  ...,
  webpack: (config) => {
    config.plugins.push(new webpack.IgnorePlugin({ resourceRegExp: /^pg-native$/ }));

    return config;
  },
};

module.exports = config;

[timneutkens]

This was fixed in https://github.com/vercel/next.js/pull/48402

[github-actions[bot]]

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.