skip to Main Content

Error: Cannot find module ‘next/distclientcomponentsstatic-generation-async-storage.external.js’

I have this problem in my nextjs app, I am using typescript and tailwind, I am trying to deploy my app to a shared server which uses cpanel, apache and ubuntu, this error appears when visiting the domain and it only shows me an error 500 with nextjs style.

This is my package.json:

{
  "name": "socialty-media",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "NODE_ENV=production node server.js",
    "lint": "next lint"
  },
  "dependencies": {
    "@nextui-org/react": "^2.2.9",
    "@radix-ui/react-slot": "^1.0.2",
    "axios": "^1.6.2",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "next": "^14.0.3",
    "nodemailer": "^6.9.7",
    "react": "^18",
    "react-dom": "^18",
    "tailwind-merge": "^2.0.0",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/nodemailer": "^6.4.14",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@types/react-slick": "^0.23.12",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.0.2",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}

i use a custom server for the deploy this is my server.js:

const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')
 
const dev = process.env.NODE_ENV !== 'production'
const hostname = '0.0.0.0'
const port = process.env.PORT || 3002
// when using middleware `hostname` and `port` must be provided below
const app = next({ dev, hostname, port })
const handle = app.getRequestHandler()
 
app.prepare().then(() => {
  createServer(async (req, res) => {
    try {
      // Be sure to pass `true` as the second argument to `url.parse`.
      // This tells it to parse the query portion of the URL.
      const parsedUrl = parse(req.url, true)
      const { pathname, query } = parsedUrl
 
      if (pathname === '/a') {
        await app.render(req, res, '/a', query)
      } else if (pathname === '/b') {
        await app.render(req, res, '/b', query)
      } else {
        await handle(req, res, parsedUrl)
      }
    } catch (err) {
      console.error('Error occurred handling', req.url, err)
      res.statusCode = 500
      res.end('internal server error')
    }
  })
    .once('error', (err) => {
      console.error(err)
      process.exit(1)
    })
    .listen(port, () => {
      console.log(`> Ready on http://${hostname}:${port}`)
    })
})

I tried to reinstall my dependencies and I still have the same problem, the version of Node I use is ^18 since in order to upload my website it is necessary to create an app in Nodejs on the server

2

Answers


  1. I have faced this issue today after upgrading nextjs version 13.4.9 to 14.0.4.
    You can try to downgrade nextjs version if possible.

    Otherwise:

    Replace this line from the file "node_modulesnextdistbuildhandle-externals.js".

    From:

    return `commonjs ${localRes.replace(/.*?next[/\]dist/, "next/dist")}`
    

    To:

    return `commonjs ${localRes.replace(/.*?next[/\]dist/, "next/dist").replace(/\/g, "/")}`
    

    Then, build and upload to your shared hosting.

    This is a temporary solution I found from this issue

    Login or Signup to reply.
  2. I had the same issue with next 14. After trying and error I found that the issue was due to the fact that I was running next build in windows system and deploy to a linux system which handles path differently; use of different systems can lead to the issue.

    What I did was to build my project in Linux system like GitHub codespace or alike and deploy the resulting .next to cPanel, Et voilà.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search