Runtime.ImportModuleError: Error: Cannot find module 'styled-jsx' - Nextjs + NextAuth

I deployed a Nextjs app with v13.2.3, the deploy is successful however when click on google auth show the next error.

My netlify site name is : sirdrope.xyz

# This function has crashed!
An unhandled error in the function code triggered the following message:

Runtime.ImportModuleError: Error: Cannot find module 'styled-jsx'
Require stack:
- /var/task/node_modules/.pnpm/next@13.2.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/webpack/require-hook.js
- /var/task/node_modules/.pnpm/next@13.2.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/initialize-require-hook.js
- /var/task/node_modules/.pnpm/next@13.2.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/next-server.js
- /var/task/.netlify/functions-internal/_api_auth_nextauth-SPLAT-handler/_api_auth_nextauth-SPLAT-handler.js
- /var/task/_api_auth_nextauth-SPLAT-handler.js
- /var/runtime/index.mjs
    at _loadUserApp (file:///var/runtime/index.mjs:997:17)
    at async Object.UserFunction.js.module.exports.load (file:///var/runtime/index.mjs:1032:21)
    at async start (file:///var/runtime/index.mjs:1195:23)
    at async file:///var/runtime/index.mjs:1201:1

The issue is with NextAuth failing. However, I suspect that the root cause lies in the ‘Packaging Functions from .netlify/functions-internal directory’ during the build process on Netlify. It appears that the packages or paths are not being handled correctly or encountering a similar issue. It’s worth noting that everything works fine on my laptop, and the deployment on the Vercel server with the same configuration is also successful.

Here is the trace of the build time:

Past successful deploy:
Packaging Functions from .netlify/functions-internal directory:
2:21:36 PM:  - ___netlify-handler/___netlify-handler.js
2:21:36 PM:  - ___netlify-odb-handler/___netlify-odb-handler.js
2:21:36 PM:  - _ipx/_ipx.js

Current failed deploy:
1:42:21 PM: Packaging Functions from .netlify/functions-internal directory:
1:42:21 PM:  - ___netlify-handler/___netlify-handler.js
1:42:21 PM:  - ___netlify-odb-handler/___netlify-odb-handler.js
1:42:21 PM:  - _api_auth_nextauth-SPLAT-handler/_api_auth_nextauth-SPLAT-handler.js
1:42:21 PM:  - _ipx/_ipx.js

Note: It doesn’t display any error or log message, and NextAuth is configured with the default settings.

Thank you!

Since you’re using pnpm, have you checked out: Next.js on Netlify | Netlify Docs?

Hi, yes, I added an .npmrc file in the root directory, but the same error persists.

I resolved the issue by switching the @netlify/plugin-nextjs version to 4.36.1 in devDependencies. The recent versions 4.38.0 and 4.38.1 have not been fixed yet.

2 Likes

Thanks for coming back and sharing this solution with the community!

1 Like

I’m using NextAuth with the Credentials provider for my custom email/password login system, and I’m still getting the same issue.

I tried installing @netlify/plugin-nextjs and following the instructions above to no avail.

I tried a trick from another thread about replacing __NEXT_PRIVATE_PREBUNDLED_REACT in prebuild.

The only thing that worked for me was downgrading NextJS to 13.4.9 (previously I was on 13.5.4). Can we get an update on when this will be solved for newer versions of NextJS (and apparently plugin-nextjs)?

Please check existing posts: