Runtime.ImportModuleError - Error: Cannot find module 'styled-jsx/style'

Getting this error when building on netlify. I am not even using that package, so I’m confused on why it is saying that. I’ve tried downgrading to “@netlify/plugin-nextjs”: “4.36.1”, that didn’t work. Tried adding that package anyways, “styled-jsx”: “^5.1.2”, that didn’t work either.

any help would be appreciated!

9 Likes

I’m seeing this too. Downgrading to next@13.4.9 fixed it for me (although this won’t work as a permanent solution). I tried various versions of the next runtime and got the same error every time.

2 Likes

Having the same issue.

1 Like

I’m experiencing the same issue after bumping to next@13.5.2.

Reverting to next@13.4.9 as mentioned by @wiggindev does not work.

I’m still getting this issue even after reverting to a commit that previously deployed without any issues

Runtime.ImportModuleError: Error: Cannot find module 'styled-jsx/style'
Require stack:
- /var/task/node_modules/next/dist/server/require-hook.js
- /var/task/node_modules/next/dist/server/next-server.js
- /var/task/.netlify/functions-internal/___netlify-odb-handler/___netlify-odb-handler.js
- /var/task/___netlify-odb-handler.js
- /var/runtime/index.mjs
    at _loadUserApp (file:///var/runtime/index.mjs:1061:17)
    at async UserFunction.js.module.exports.load (file:///var/runtime/index.mjs:1093:21)
    at async start (file:///var/runtime/index.mjs:1256:23)
    at async file:///var/runtime/index.mjs:1262:1

Same issue. Downgrade to 13.4.19 removed the issue, but would prefer to be able to upgrade.

I was also having issues with 500 errors so I applied the prebuild from this thread too
https://answers.netlify.com/t/server-edge-not-defined-error-on-nextjs-ssr-functions-cause-site-to-return-500-errors/91793/114?u=wiggindev

I am facing this exact same problem and would also prefer not to downgrade.

Next 13.5 is not expected to work perfectly at the moment. You can choose to upgrade, at your own risk. We aim to eventually fix the issues, but have some other priorities at the moment which should fix more issues than handling each problem individually.

Same issue here. This is blocking a current site I hope to launch shortly… and I may have to bail to another platform, but I’d really rather not at this stage. I understand that you have to prioritize many issues, but I hope this gets fixed soon!

We still recommend you use next 13.4 at the moment. If that doesn’t work for you before we can get a full fix in place, I suppose your best option will be another service.

Thanks for the response and candidness!

For what it’s worth, my immediate issues here were actually solved by adding more of my site’s pages to a list of static pages, as they were apparently getting the incorrect template after a NextJS upgrade. (They were working as expected in localhost, though.) A more experience dev did the fix for me, so I’m not totally sure how to explain the solution, but hopefully that slightly vague update might help someone else.

Encountered this issue after upgrading to Next 13.5 due to a Next 13.4 dependency on Zod which has an identified denial of service vulnerability. Unfortunately there is no available update to Zod which resolves the vulnerability so this limitation means the only (straightforward) option right now is to ignore the security vulnerability and use Next 13.4 which may not be an option.

hello we are having the same issue since yesterday, we have not made too many changes, mostly css (tailwindcss).

We tried to use nextjs 13.4.9 but still not working

should we install the netlify/next plugin?

what else could we try?

{
  "name": "client",
  "version": "0.1.5",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "eslint-config-next": "^13.4.6",
    "html2canvas": "^1.3.3",
    "next": "^13.4.9",
    "react": "^18.2.0",
    "react-component-export-image": "^1.0.6",
    "react-dom": "^18.2.0",
    "react-markdown": "^7.1.1",
    "sharp": "^0.32.4",
    "tailwindcss": "^3.3.3"
  },
  "devDependencies": {
    "autoprefixer": "^10.3.1",
    "postcss": "^8.3.6"
  }
}

Thanks for your time

Shoot… I’m finding that even after the workaround I mentioned above, my a 404 still goes to this styled-jsx error, rather than to the “not-found” nextJS page. :confused:

I am also getting errors on both 13.4 and 13.5

On 13.5 I am getting the error in the title of the thread.

On 13.4 I am getting a 500 error
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './server.edge' is not defined by "exports" in /var/task/node_modules/react-dom/package.json

This reproduction repo is pretty much a vanilla create-next-app with Typescript and Tailwind options selected.

Anything statically rendered works fine but the SSR stuff all fails, including the not-found pages.

I understand that Next.js is not your product nor your priority but I am wondering if you could provide a ballpark in around a business quarter in which you think that the app directory with server components will be supported?

@Alexei_Garban, you’re not using 13.4.9, ^ identifier reverts you to the latest non-major version. Remove ^ from that string.

@sherakama, not sure if you’ve seen this: Server.edge not defined Error on nextJS SSR functions cause site to return 500 Errors, but we’re indeed aware of that issue. For quite some time, we tried to play cat and mouse with that and other issues Next.js keeps on creating with each release and it’s basically not working out. We’re shifting the focus to a more robust implementation that would (if it works out), iron out majority of the bugs specific to Next.js on Netlify. So we’re currently not investigating each issue case-by-case, so we can focus more on rolling out something useful instead of continuing this game we’ve been playing.

We’re aiming for something useful this month, but it’s a highly optimistic timeline, so let’s consider this entire quarter to be safe.

1 Like

thank you, is working now.

Wonderful. Thank you for the detailed explanation.

While trying to upgrade Next.js from 12.3.4 to 13.5.5.

It happens in the api’s handlers ( /pages/api folder )

import { createRouter } from "next-connect";
import cors from "cors";

const router = createRouter();
router
.use( cors( {
    origin: (origin, callback) => {
        callback( null, true )
    },
    credentials : true,
    methods: ["POST", "PUT", "GET", "OPTIONS", "DELETE", "HEAD"],
} ))
.get( async(req, res) => {
  const resp = await getData(req);
  return res.json(resp);
})

export default router.handler({
  onError(err, req, res) {
    res.status(500).json({
      error: (err).message,
    });
  },
})

async function getData(req) {
  return { data : "hello" }
}

It happens also in versions:

13.5.5-canary.8
13.5.4
13.5.3
13.0.0

Only happens in production, it works fine in dev mode. I’m hosting this build in netlify and using the pluggin @netlify/plugin-nextjs, it works fine with version 4.37.4 ( next 12.3.4 ) and already tried 4.38.0, 4.38.1, 4.40.2 without luck.

What I tried?

Installing different plugin versions
Installing different nextjs versions
Deleting node_modules and package-lock.json and reinstalling everything again
npm i -S styled-jsx

Thanks in advance

1 Like

Hi wiggindev, which version of @netlify/plugin-nextjs you installed?