parcel: @parcel/packager-js: External modules are not supported when building for browser | parcel@2.0.0-rc.0

I had the same problem. I was using node 16 but had this in my package.json

  "engines": {
    "node": ">=14"
  },

I just removed that and now it works.

I found the real issue, you need to add browser support:

Add this to your package.json

{ 
  "browserslist": "> 0.5%, last 2 versions, not dead",
}

For browser support Reference

For me removing the engines worked, but I have no understanding why this is a problem:

"engines": {
  "node": ">=17"
}

somebody else having one of the issues?

I don’t think this should be closed. I’m hitting it too on 2.2.1, and the suggestions above re: removing "engines" from package.json are the only way to solve it. It works without build, but when I include build, it only works if I remove the "engines" key from package.json:

Without it:

$ parcel build index.html

✨ Built in 3.52s

dist/index.html               457 B    138ms
dist/index.bbffcd51.js    577.15 KB    2.66s

With it:

$ parcel build index.html

🚨 Build failed.

@parcel/packager-js: External modules are not supported when building for browser

  /Users/humphd/Documents/Seneca/CCP555/Winter 2022/fragments-ui-winter-2022/src/auth.js:1:31
  > 1 | import Amplify, { Auth } from 'aws-amplify';
  >   |                               ^^^^^^^^^^^^^
    2 |
    3 | // Configure our Auth object to use our Cognito User Pool

Could we reopen this, issue still remains?

I can confirm this solution works

{
  "name": "parcel-posthtml-tailwindcss",
  "version": "1.0.0",
  "scripts": {
    "start": "npm run clean && parcel src/index.html",
    "clean": "rm -rf .parcel-cache && rm -rf dist",
    "build": "npm run clean && parcel build src/index.html"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.13",
    "parcel": "^2.8.0",
    "postcss": "^8.4.19",
    "postcss-import": "^15.0.0",
    "posthtml-doctype": "^1.1.1",
    "posthtml-include": "^1.7.4",
    "prettier": "^2.7.1",
    "prettier-plugin-tailwindcss": "^0.1.13",
    "tailwindcss": "^3.2.4"
  },
  "engines": {
    "node": ">= 16"
  },
  "browserslist": [
    "last 2 versions",
    "not dead"
  ],
  "dependencies": {
    "alpinejs": "^3.10.5"
  }
}

@mischnic i ran in the same issue with parceljs v2.1

building the renderer for an electron app fails and only when following @roelandmoors hint it works for me.

Removing the engines key

"engines": {
  "node": ">=16.x",
  "npm": ">=7.x"
}

So maybe we can reopen this issue here?

giving up, changing project for using parcel v1

Important note: It works fine while serving the app

@Yohaesmi Interesting. I currently have this browserList value in my package.json without engine support.

"browserList": "> 0.5%, last 2 versions, Firefox ESR, not dead"

Could it be that I’m not using the correct browserList value?

Here’s my package.json file that I used for production. I used to have engine support but I removed it so that I can build my project using parcel build.

{
	"name": "Tipt",
	"version": "1.0.0",
	"author": "Asai Andrade",
	"license": "MIT",
	"type": "module",
	"browserList": "> 0.5%, last 2 versions, Firefox ESR, not dead",
	"scripts": {
		"start": "node app/index.js",
		"dev": "nodemon app/index.js",
		"parcel": "yarn buildFE && parcel src/index.html --no-cache",
		"buildFE": "parcel build src/index.html",
		"remakeCSV": "rm -rf public/uploads/csv && mkdir public/uploads/csv",
		"preload": "node utils/preload.js",
		"resetApp": "pg_ctl restart && clear && yarn preload && clear && yarn dev"
	},
	"dependencies": {
		"bcrypt": "^5.1.1",
		"cors": "^2.8.5",
		"csv-parse": "^5.5.2",
		"dotenv": "^16.3.1",
		"express": "^4.18.2",
		"framer-motion": "^11.0.12",
		"jsonwebtoken": "^9.0.2",
		"morgan": "^1.10.0",
		"multer": "^1.4.5-lts.1",
		"nodemailer": "^6.9.9",
		"parcel": "^2.12.0",
		"pg": "^8.11.3",
		"react": "^18.2.0",
		"react-dom": "^18.2.0",
		"react-router-dom": "^6.20.0",
		"zustand": "^4.4.7"
	},
	"devDependencies": {
		"autoprefixer": "^10.4.16",
		"buffer": "^5.5.0||^6.0.0",
		"crypto-browserify": "^3.12.0",
		"events": "^3.1.0",
		"nodemon": "^3.0.1",
		"os-browserify": "^0.3.0",
		"path-browserify": "^1.0.0",
		"postcss": "^8.4.31",
		"process": "^0.11.10",
		"stream-browserify": "^3.0.0",
		"tailwindcss": "^3.3.5"
	}
}

You can try

"engines": {
    "node": "nodeversion"
 },
"browserslist": [
    "last 2 versions",
    "not dead"
 ],

BUG: still exists at v2.6.2. Adding only package.engines results in the original error.

I had to use a combination of both package.targets and package.engines, for example:

  "targets": {
    "modern": {
      "engines": {
        "browsers": ">= 50%"
      }
    }
  },  
  "engines": {
    "node": ">= 16"
  },

I had the same issue and I managed to fix it. Here is package.json

{
  "name": "app",
  "version": "0.1.0",
  "scripts": {
    "build": "rm -rf dist && parcel build src/index.html --no-cache",
    "start": "parcel src/index.html --open",
    "prod": "parcel src/index.html",
    "deploy:pages": "gh-pages -d dist/",
    "deploy": "npm run build && npm run deploy:pages",
    "prettier": "prettier ./src --write",
    "lint": "prettier --check \"./src/**/*.{ts,tsx}\" && eslint \"./src/**/*.{ts,tsx}\" && yarn type-check",
    "type-check": "tsc --pretty --noEmit",
    "postinstall": "husky install",
    "prepare": "husky install"
  },
  "devDependencies": {
    "@babel/core": "~7.16.0",
    "@babel/preset-env": "~7.16.0",
    "@babel/preset-react": "~7.16.0",
    "@parcel/config-default": "^2.0.0",
    "@parcel/transformer-svg-react": "^2.0.0",
    "@parcel/transformer-typescript-tsc": "^2.0.0",
    "@typescript-eslint/eslint-plugin": "^5.3.0",
    "@typescript-eslint/parser": "^5.3.0",
    "babel-jest": "~27.3.1",
    "eslint": "^8.1.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.26.1",
    "husky": "^7.0.0",
    "jest": "~26.6.2",
    "jest-environment-node": "~26.6.2",
    "near-cli": "~1.6.0",
    "prettier": "^2.4.1",
    "react-test-renderer": "~17.0.1",
    "parcel": "2.0.0"
  },
  "dependencies": {
    "@babel/preset-typescript": "^7.16.0",
    "@emotion/react": "^11.4.1",
    "@emotion/styled": "^11.3.0",
    "@mui/icons-material": "^5.0.1",
    "@mui/material": "^5.0.0-rc.0",
    "@mui/styles": "^5.0.1",
    "@mui/system": "^5.0.6",
    "@mui/utils": "^5.0.1",
    "@svgr/parcel-plugin-svgr": "^5.5.0",
    "@types/jest": "^27.0.2",
    "@types/node": "^16.10.2",
    "@types/react": "^17.0.33",
    "@types/react-dom": "^17.0.10",
    "@types/react-router-dom": "^5.3.2",
    "@types/react-virtualized": "^9.21.13",
    "@types/styled-components": "^5.1.14",
    "bn.js": "^5.2.0",
    "borsh": "^0.6.0",
    "clsx": "^1.1.1",
    "decimal.js": "^10.3.1",
    "eslint-plugin-prettier": "^4.0.0",
    "near-api-js": "~0.43.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router": "^5.2.1",
    "react-router-dom": "^5.3.0",
    "react-virtualized": "^9.22.3",
    "regenerator-runtime": "~0.13.5",
    "styled-components": "^5.3.1",
    "typescript": "^4.4.3",
    "use-mobile-detect-hook": "^1.0.4"
  },
  "resolutions": {
    "@babel/preset-env": "7.13.8"
  },
  "jest": {
    "moduleNameMapper": {
      "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/__mocks__/fileMock.js",
      "\\.(css|less)$": "<rootDir>/src/__mocks__/fileMock.js"
    },
    "setupFiles": [
      "<rootDir>/src/jest.init.js"
    ],
    "testEnvironment": "near-cli/test_environment",
    "testPathIgnorePatterns": [
      "<rootDir>/contract/",
      "<rootDir>/node_modules/"
    ]
  },
  "browserModern": "dist/index.html",
  "targets": {
    "browserModern": {
      "engines": {
        "browsers": [
          "last 1 Chrome version"
        ]
      }
    }
  },
  "engines": {
    "node": ">=16"
  }
}