Error when upgrading to Next.js 13's new `app` directory

[adiba]

(Note: I created this issue here because I believe it is future relevant.)

After migrating to the new app folder structure (https://beta.nextjs.org/docs), I got an error when importing payload.

Error: Module not found: Can't resolve 'uglify-js'

The error seems to be a common issue in webpack 5:
https://stackoverflow.com/questions/71013802/webpack-5-error-cant-resolve-uglify-js-swc-core-esbuild
However, I am too unfamiliar with webpack and next to be able to apply this to the next config.

I would appreciate any further pointers!

[the-digital-anarchist]

@adiba did you find any solution on this?

[adiba]

@the-digital-anarchist

@adiba did you find any solution on this?

Nope. I am using the GraphQL API now, which has its own benefits anyway.

You could ask in the payload Discord server or in GitHub discussions in the main payload repo. I'm sure someone over there can help.

[marpstar]

I was able to get around this by updating my next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
    serverComponentsExternalPackages: ['payload'].   // <--- Add this line
  },
}

module.exports = nextConfig

I'm still getting issues when it tried to generate static pages for components that I'm calling to payload with. Not sure if it's related or not but I'm getting APIError: The collection with slug posts can't be found. from Payload.

[adiba]

Thanks for sharing, @marpstar !
(btw you can add js right after the three ``` to add syntax highlighting ;)

[thgh]

Any status updates? Is app directory supported?

[thgh]

I'm still getting issues when it tried to generate static pages for components that I'm calling to payload with. Not sure if it's related or not but I'm getting APIError: The collection with slug posts can't be found. from Payload.

It seems the global payload object is not fully configured. I noticed that the payload/website repo uses graphql instead of the local API. I resorted to the REST API and it resolves this issue.

[jacobsfletch]

It seems the global payload object is not fully configured. I noticed that the payload/website repo uses graphql instead of the local API. I resorted to the REST API and it resolves this issue.

Hey @thgh! If you're using the Local API here, the next-payload repo might be a better place to look for answers. It is designed specifically around this idea.

Any status updates? Is app directory supported?

I just opened a PR on the Payload main repo that will ultimately supercede this one. It includes a fully working Next.js App Router example with instructions on how to migrate to with any other front-end framework. Check it out! payloadcms/payload#2920

@adiba, @the-digital-anarchist, @marpstar does this help clear things up for you all?

[thgh]

Will review! I got next13 working after all, very curious if you had to apply similar workarounds!

Edit: hmm, some serious workarounds, I will keep a custom server for now.
Added some notes to payloadcms/payload#2920 😃

[jacobsfletch]

Hey everyone! This repo has officially moved to the examples directory here: https://github.com/payloadcms/payload/tree/master/examples/custom-server and so it will be archived shortly. This new example is using the new Next.js 13 App Router, so I'm going to go ahead and close this issue. If you're still having troubles, take a look through that new example. Let me know if you're still having troubles after that, I'll be happy to help 👍