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

Support
, , ,
1

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!

2

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

3

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

4

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.

1 Like
5

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