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

[hrishikesh-k]

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

{
  "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`

{
  "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

• [ ] I am building using the CLI
• [X] I am building using file-based configuration (netlify.toml)

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)

{
  "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.<anonymous> (/var/runtime/index.js:43:30)",
    "    at Module._compile (internal/modules/cjs/loader.js:1085:14)"
  ]
}

.next JSON files

N/A

[victoralvelais]

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]

@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 🎉

• https://github.com/netlify/next-runtime/pull/1886#issuecomment-1903573857

[MarcL]

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!