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
I have faced this issue today after upgrading nextjs version
13.4.9
to14.0.4
.You can try to downgrade nextjs version if possible.
Otherwise:
Replace this line from the file "node_modulesnextdistbuildhandle-externals.js".
From:
To:
Then, build and upload to your shared hosting.
This is a temporary solution I found from this issue
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à.