netlify / next-runtime

The Next.js Runtime allows Next.js to run on Netlify with zero configuration
https://www.npmjs.com/package/@netlify/plugin-nextjs
639 stars 85 forks source link

[Bug]: IPX fails with `type: module` in package.json #1194

Closed hrishikesh-k closed 5 months ago

hrishikesh-k commented 2 years ago

Summary

This bug has been filed as a response to the ticket: https://netlify.zendesk.com/agent/tickets/82173 (internal only).

The user has a monorepo with the following package.json:

Monorepo package.json ```json { "name": "5starz", "version": "1.0.0", "license": "MIT", "type": "module", "engines": { "node": ">=16.0.0" }, "dependencies": { "prettier": "^2.4.1", "ts-node": "^10.4.0", "typescript": "^4.5.2" }, "devDependencies": { "@netlify/plugin-nextjs": "^4.2.2", "@types/lodash": "^4.14.177", "@types/node": "^16.11.9", "cross-env": "^7.0.3", "env-cmd": "^10.1.0", "tsc-watch": "^4.6.0" }, "scripts": { "restart:backend": "docker build -f backend2/Dockerfile -t the5starz-backend:0.2.2 . && (cd deploy/compose/ && docker-compose down && docker-compose up -d)", "staging:check": "docker build -f backend2/Dockerfile -t the5starz-backend-staging:0.2.4 . && (cd deploy/staging/ && docker-compose down && docker-compose up)", "logs:backend": "cd ~/the5starz/deploy/compose && docker-compose logs", "build:front": "yarn workspace @the5starz/common build && yarn workspace front build", "build:website": "yarn workspace @the5starz/common build && yarn workspace website build", "build:backend": "yarn workspace @the5starz/common build && yarn workspace @the5starz/db generate && yarn workspace @the5starz/db build && yarn workspace backend2 build", "clean-npm": "yarn cache clean && rm -rf ./*/yarn.lock && rm -rf */package-lock.json && rm -rf yarn.lock && rm -rf package-lock.json && rm -rf ./*/node_modules/ && rm -rf node_modules", "test": "./node_modules/.bin/ts-node --transpile-only scripts/old/json-transform-test.ts", "get-s3-files": "" }, "private": true, "workspaces": { "packages": [ "db", "backend2", "front", "scripts", "common", "website", "apify" ] }, "volta": { "node": "16.13.1", "yarn": "1.22.17", "npm": "8.2.0" } } ```

Their Next.js website has the following package.json:

Next.js `package.json` ```json { "name": "website", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint", "storybook": "start-storybook -p 6006 -s ./public", "build-storybook": "build-storybook -s public" }, "dependencies": { "@headlessui/react": "^1.4.2", "@heroicons/react": "^1.0.5", "@mdx-js/loader": "^1.6.22", "@next/mdx": "^12.0.10", "axios": "^0.25.0", "next": "12.0.7", "react": "17.0.2", "react-countup": "^6.1.0", "react-dom": "17.0.2", "react-grid-gallery": "^0.5.5", "react-hook-form": "^7.25.0", "react-icons": "^4.3.1", "react-player": "^2.9.0", "react-slick": "^0.28.1", "react-visibility-sensor": "^5.1.1", "slick-carousel": "^1.8.1" }, "devDependencies": { "@babel/core": "^7.16.12", "@storybook/addon-actions": "^6.4.14", "@storybook/addon-essentials": "^6.4.14", "@storybook/addon-links": "^6.4.14", "@storybook/react": "^6.4.14", "autoprefixer": "^10.4.2", "babel-loader": "^8.2.3", "eslint": "8.6.0", "eslint-config-next": "12.0.7", "eslint-plugin-storybook": "^0.5.6", "postcss": "^8.4.5", "tailwindcss": "^3.0.13" } } ```

The generated _ipx.zip is attached: _ipx.zip

Steps to reproduce

N/A

A link to a reproduction repository

N/A

Plugin version

4.2.2

More information about your build

What OS are you using?

No response

Your netlify.toml file

N/A

Your public/_redirects file

N/A

Your next.config.js file

N/A

Builds logs (or link to your logs)

https://app.netlify.com/sites/the5starz-website/deploys/61fa7a6e5c4d41000836be19

Function logs

Function logs (_ipx) ```json { "errorType": "ReferenceError", "errorMessage": "module is not defined in ES module scope\nThis file is being treated as an ES module because it has a '.js' file extension and '/var/task/package.json' contains \"type\": \"module\". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.", "trace": [ "ReferenceError: module is not defined in ES module scope", "This file is being treated as an ES module because it has a '.js' file extension and '/var/task/package.json' contains \"type\": \"module\". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.", " at file:///var/task/_ipx.js:1:1", " at ModuleJob.run (internal/modules/esm/module_job.js:183:25)", " at process.runNextTicks [as _tickCallback] (internal/process/task_queues.js:60:5)", " at /var/runtime/deasync.js:23:15", " at _tryAwaitImport (/var/runtime/UserFunction.js:74:12)", " at _tryRequire (/var/runtime/UserFunction.js:162:21)", " at _loadUserApp (/var/runtime/UserFunction.js:197:12)", " at Object.module.exports.load (/var/runtime/UserFunction.js:242:17)", " at Object. (/var/runtime/index.js:43:30)", " at Module._compile (internal/modules/cjs/loader.js:1085:14)" ] } ```

.next JSON files

N/A

victoralvelais commented 1 year ago

I'm having the same issue with images not loading using the Next/Image component. Are there any updates or fixes for this? It's also referenced in another thread: https://github.com/netlify/next-runtime/issues/1456#issuecomment-1199149379

karlhorky commented 7 months ago

@orinokai mentioned in the closed PR that Netlify is currently testing an update to the Next.js Runtime that will address this issue and will have some information to share soon 🎉

MarcL commented 5 months ago

The team at Netlify have now released the new v5 Next.js runtime which has support for both pages and app router, on-demand and time-based revalidation, automatic fine-grained cache control, and automatic image optimization using Netlify's image CDN. Please try your Next sites with this as it removes the need for ipx.

You can find the documentation and additional information here: Next.js on Netlify

The v4 runtime is now in the maintenance support phase with no new features being added. Occasional bug fixes and security patches will be applied when needed.

Thanks!