search

parcel-bundler / parcel

The zero configuration build tool for the web. 📦🚀
https://parceljs.org
MIT License
43.47k stars 2.27k forks source link

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

Closed LiberQuack closed 2 years ago

LiberQuack commented 3 years ago

I cannot get rid of this error, every time a try to build I get:

🚨 Build failed.

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

  /sandbox/bull-app-web/src/app/api-client.ts:1:29
  > 1 | import {environment} from "./config/environment";
  >   |                             ^
    2 | import {httpClientBuilder} from "../../lib/http-client";
    3 | import {UserModel} from "./models/user-model";

Parcel version: parcel@2.0.0-rc.0

parcel.rc 
{
  "extends": ["@parcel/config-default", "parcel-config-precache-manifest"]
}
yarn ls | grep parcel ├─ @parcel/babel-ast-utils@2.0.0-rc.0 │ ├─ @parcel/babylon-walk@2.0.0-rc.0 │ ├─ @parcel/source-map@2.0.0-rc.6 │ ├─ @parcel/utils@2.0.0-rc.0 ├─ @parcel/babel-plugin-transform-runtime@2.0.0-rc.0 ├─ @parcel/babel-preset-env@2.0.0-rc.0 ├─ @parcel/babylon-walk@2.0.0-rc.0 ├─ @parcel/bundler-default@2.0.0-rc.0 │ ├─ @parcel/diagnostic@2.0.0-rc.0 │ ├─ @parcel/hash@2.0.0-rc.0 │ ├─ @parcel/plugin@2.0.0-rc.0 │ ├─ @parcel/utils@2.0.0-rc.0 ├─ @parcel/cache@2.0.0-rc.0 │ ├─ @parcel/logger@2.0.0-rc.0 │ ├─ @parcel/utils@2.0.0-rc.0 ├─ @parcel/codeframe@2.0.0-rc.0 ├─ @parcel/config-default@2.0.0-rc.0 │ ├─ @parcel/bundler-default@2.0.0-rc.0 │ ├─ @parcel/namer-default@2.0.0-rc.0 │ ├─ @parcel/optimizer-cssnano@2.0.0-rc.0 │ ├─ @parcel/optimizer-htmlnano@2.0.0-rc.0 │ ├─ @parcel/optimizer-svgo@2.0.0-rc.0 │ ├─ @parcel/optimizer-terser@2.0.0-rc.0 │ ├─ @parcel/packager-css@2.0.0-rc.0 │ ├─ @parcel/packager-html@2.0.0-rc.0 │ ├─ @parcel/packager-js@2.0.0-rc.0 │ ├─ @parcel/packager-raw@2.0.0-rc.0 │ ├─ @parcel/reporter-dev-server@2.0.0-rc.0 │ ├─ @parcel/resolver-default@2.0.0-rc.0 │ ├─ @parcel/runtime-browser-hmr@2.0.0-rc.0 │ ├─ @parcel/runtime-js@2.0.0-rc.0 │ ├─ @parcel/runtime-react-refresh@2.0.0-rc.0 │ ├─ @parcel/transformer-babel@2.0.0-rc.0 │ ├─ @parcel/transformer-css@2.0.0-rc.0 │ ├─ @parcel/transformer-html@2.0.0-rc.0 │ ├─ @parcel/transformer-js@2.0.0-rc.0 │ ├─ @parcel/transformer-json@2.0.0-rc.0 │ ├─ @parcel/transformer-postcss@2.0.0-rc.0 │ ├─ @parcel/transformer-posthtml@2.0.0-rc.0 │ ├─ @parcel/transformer-raw@2.0.0-rc.0 │ └─ @parcel/transformer-react-refresh-wrap@2.0.0-rc.0 ├─ @parcel/core@2.0.0-rc.0 │ ├─ @parcel/cache@2.0.0-rc.0 │ ├─ @parcel/diagnostic@2.0.0-rc.0 │ ├─ @parcel/events@2.0.0-rc.0 │ ├─ @parcel/fs@2.0.0-rc.0 │ ├─ @parcel/hash@2.0.0-rc.0 │ ├─ @parcel/logger@2.0.0-rc.0 │ ├─ @parcel/package-manager@2.0.0-rc.0 │ ├─ @parcel/plugin@2.0.0-rc.0 │ ├─ @parcel/source-map@2.0.0-rc.6 │ ├─ @parcel/types@2.0.0-rc.0 │ ├─ @parcel/utils@2.0.0-rc.0 │ ├─ @parcel/workers@2.0.0-rc.0 ├─ @parcel/diagnostic@2.0.0-rc.0 ├─ @parcel/events@2.0.0-rc.0 ├─ @parcel/fs-search@2.0.0-rc.0 ├─ @parcel/fs-write-stream-atomic@2.0.0-rc.0 ├─ @parcel/fs@2.0.0-rc.0 │ ├─ @parcel/fs-search@2.0.0-rc.0 │ ├─ @parcel/fs-write-stream-atomic@2.0.0-rc.0 │ ├─ @parcel/types@2.0.0-rc.0 │ ├─ @parcel/utils@2.0.0-rc.0 │ ├─ @parcel/watcher@2.0.0-alpha.10 │ ├─ @parcel/workers@2.0.0-rc.0 ├─ @parcel/hash@2.0.0-rc.0 ├─ @parcel/logger@2.0.0-rc.0 │ ├─ @parcel/diagnostic@2.0.0-rc.0 │ └─ @parcel/events@2.0.0-rc.0 ├─ @parcel/markdown-ansi@2.0.0-rc.0 ├─ @parcel/namer-default@2.0.0-rc.0 │ ├─ @parcel/diagnostic@2.0.0-rc.0 │ ├─ @parcel/plugin@2.0.0-rc.0 ├─ @parcel/node-libs-browser@2.0.0-rc.0 ├─ @parcel/node-resolver-core@2.0.0-rc.0 │ ├─ @parcel/diagnostic@2.0.0-rc.0 │ ├─ @parcel/node-libs-browser@2.0.0-rc.0 │ ├─ @parcel/utils@2.0.0-rc.0 ├─ @parcel/optimizer-cssnano@2.0.0-rc.0 │ ├─ @parcel/plugin@2.0.0-rc.0 │ ├─ @parcel/source-map@2.0.0-rc.6 ├─ @parcel/optimizer-htmlnano@2.0.0-rc.0 │ ├─ @parcel/plugin@2.0.0-rc.0 ├─ @parcel/optimizer-svgo@2.0.0-rc.0 │ ├─ @parcel/diagnostic@2.0.0-rc.0 │ ├─ @parcel/plugin@2.0.0-rc.0 │ ├─ @parcel/utils@2.0.0-rc.0 ├─ @parcel/optimizer-terser@2.0.0-rc.0 │ ├─ @parcel/diagnostic@2.0.0-rc.0 │ ├─ @parcel/plugin@2.0.0-rc.0 │ ├─ @parcel/source-map@2.0.0-rc.6 │ ├─ @parcel/utils@2.0.0-rc.0 ├─ @parcel/package-manager@2.0.0-rc.0 │ ├─ @parcel/diagnostic@2.0.0-rc.0 │ ├─ @parcel/fs@2.0.0-rc.0 │ ├─ @parcel/logger@2.0.0-rc.0 │ ├─ @parcel/types@2.0.0-rc.0 │ ├─ @parcel/utils@2.0.0-rc.0 │ ├─ @parcel/workers@2.0.0-rc.0 ├─ @parcel/packager-css@2.0.0-rc.0 │ ├─ @parcel/plugin@2.0.0-rc.0 │ ├─ @parcel/source-map@2.0.0-rc.6 │ ├─ @parcel/utils@2.0.0-rc.0 ├─ @parcel/packager-html@2.0.0-rc.0 │ ├─ @parcel/plugin@2.0.0-rc.0 │ ├─ @parcel/types@2.0.0-rc.0 │ ├─ @parcel/utils@2.0.0-rc.0 ├─ @parcel/packager-js@2.0.0-rc.0 │ ├─ @parcel/diagnostic@2.0.0-rc.0 │ ├─ @parcel/hash@2.0.0-rc.0 │ ├─ @parcel/plugin@2.0.0-rc.0 │ ├─ @parcel/source-map@2.0.0-rc.6 │ ├─ @parcel/utils@2.0.0-rc.0 ├─ @parcel/packager-raw-url@2.0.0-rc.0 │ ├─ @parcel/plugin@2.0.0-rc.0 │ └─ @parcel/utils@2.0.0-rc.0 ├─ @parcel/packager-raw@2.0.0-rc.0 │ └─ @parcel/plugin@2.0.0-rc.0 ├─ @parcel/plugin@2.0.0-rc.0 │ └─ @parcel/types@2.0.0-rc.0 ├─ @parcel/reporter-bundle-analyzer@2.0.0-rc.0 │ ├─ @parcel/plugin@2.0.0-rc.0 │ ├─ @parcel/utils@2.0.0-rc.0 ├─ @parcel/reporter-bundle-buddy@2.0.0-rc.0 │ └─ @parcel/plugin@2.0.0-rc.0 ├─ @parcel/reporter-cli@2.0.0-rc.0 │ ├─ @parcel/plugin@2.0.0-rc.0 │ ├─ @parcel/types@2.0.0-rc.0 │ ├─ @parcel/utils@2.0.0-rc.0 ├─ @parcel/reporter-dev-server@2.0.0-rc.0 │ ├─ @parcel/plugin@2.0.0-rc.0 │ ├─ @parcel/utils@2.0.0-rc.0 ├─ @parcel/resolver-default@2.0.0-rc.0 │ ├─ @parcel/node-resolver-core@2.0.0-rc.0 │ └─ @parcel/plugin@2.0.0-rc.0 ├─ @parcel/runtime-browser-hmr@2.0.0-rc.0 │ ├─ @parcel/plugin@2.0.0-rc.0 │ └─ @parcel/utils@2.0.0-rc.0 ├─ @parcel/runtime-js@2.0.0-rc.0 │ ├─ @parcel/plugin@2.0.0-rc.0 │ ├─ @parcel/utils@2.0.0-rc.0 ├─ @parcel/runtime-react-refresh@2.0.0-rc.0 │ ├─ @parcel/plugin@2.0.0-rc.0 │ ├─ @parcel/utils@2.0.0-rc.0 ├─ @parcel/source-map@2.0.0-rc.6 ├─ @parcel/transformer-babel@2.0.0-rc.0 │ ├─ @parcel/babel-ast-utils@2.0.0-rc.0 │ ├─ @parcel/plugin@2.0.0-rc.0 │ ├─ @parcel/source-map@2.0.0-rc.6 │ ├─ @parcel/utils@2.0.0-rc.0 ├─ @parcel/transformer-css@2.0.0-rc.0 │ ├─ @parcel/plugin@2.0.0-rc.0 │ ├─ @parcel/source-map@2.0.0-rc.6 │ ├─ @parcel/utils@2.0.0-rc.0 ├─ @parcel/transformer-html@2.0.0-rc.0 │ ├─ @parcel/hash@2.0.0-rc.0 │ ├─ @parcel/plugin@2.0.0-rc.0 ├─ @parcel/transformer-image@2.0.0-rc.0 │ ├─ @parcel/plugin@2.0.0-rc.0 ├─ @parcel/transformer-inline-string@2.0.0-rc.0 │ └─ @parcel/plugin@2.0.0-rc.0 ├─ @parcel/transformer-js@2.0.0-rc.0 │ ├─ @parcel/diagnostic@2.0.0-rc.0 │ ├─ @parcel/plugin@2.0.0-rc.0 │ ├─ @parcel/source-map@2.0.0-rc.6 │ ├─ @parcel/utils@2.0.0-rc.0 ├─ @parcel/transformer-json@2.0.0-rc.0 │ ├─ @parcel/plugin@2.0.0-rc.0 ├─ @parcel/transformer-postcss@2.0.0-rc.0 │ ├─ @parcel/hash@2.0.0-rc.0 │ ├─ @parcel/plugin@2.0.0-rc.0 │ ├─ @parcel/utils@2.0.0-rc.0 ├─ @parcel/transformer-posthtml@2.0.0-rc.0 │ ├─ @parcel/plugin@2.0.0-rc.0 │ ├─ @parcel/utils@2.0.0-rc.0 ├─ @parcel/transformer-raw@2.0.0-rc.0 │ └─ @parcel/plugin@2.0.0-rc.0 ├─ @parcel/transformer-react-refresh-wrap@2.0.0-rc.0 │ ├─ @parcel/plugin@2.0.0-rc.0 │ ├─ @parcel/utils@2.0.0-rc.0 ├─ @parcel/transformer-sass@2.0.0-rc.0 │ ├─ @parcel/plugin@2.0.0-rc.0 │ ├─ @parcel/source-map@2.0.0-rc.6 ├─ @parcel/transformer-webmanifest@2.0.0-rc.0 │ ├─ @parcel/diagnostic@2.0.0-rc.0 │ ├─ @parcel/plugin@2.0.0-rc.0 │ ├─ @parcel/utils@2.0.0-rc.0 ├─ @parcel/types@2.0.0-rc.0 │ ├─ @parcel/cache@2.0.0-rc.0 │ ├─ @parcel/diagnostic@2.0.0-rc.0 │ ├─ @parcel/fs@2.0.0-rc.0 │ ├─ @parcel/package-manager@2.0.0-rc.0 │ ├─ @parcel/source-map@2.0.0-rc.6 │ ├─ @parcel/workers@2.0.0-rc.0 ├─ @parcel/utils@2.0.0-rc.0 │ ├─ @parcel/codeframe@2.0.0-rc.0 │ ├─ @parcel/diagnostic@2.0.0-rc.0 │ ├─ @parcel/hash@2.0.0-rc.0 │ ├─ @parcel/logger@2.0.0-rc.0 │ ├─ @parcel/markdown-ansi@2.0.0-rc.0 │ ├─ @parcel/source-map@2.0.0-rc.6 ├─ @parcel/watcher@2.0.0-alpha.10 ├─ @parcel/workers@2.0.0-rc.0 │ ├─ @parcel/diagnostic@2.0.0-rc.0 │ ├─ @parcel/logger@2.0.0-rc.0 │ ├─ @parcel/types@2.0.0-rc.0 │ ├─ @parcel/utils@2.0.0-rc.0 ├─ parcel-config-precache-manifest@0.0.4 │ └─ parcel-runtime-precache-manifest@^0.0.5 ├─ parcel-runtime-precache-manifest@0.0.5 ├─ parcel@2.0.0-rc.0 │ ├─ @parcel/config-default@2.0.0-rc.0 │ ├─ @parcel/core@2.0.0-rc.0 │ ├─ @parcel/diagnostic@2.0.0-rc.0 │ ├─ @parcel/events@2.0.0-rc.0 │ ├─ @parcel/fs@2.0.0-rc.0 │ ├─ @parcel/logger@2.0.0-rc.0 │ ├─ @parcel/package-manager@2.0.0-rc.0 │ ├─ @parcel/reporter-cli@2.0.0-rc.0 │ ├─ @parcel/reporter-dev-server@2.0.0-rc.0 │ ├─ @parcel/utils@2.0.0-rc.0
LiberQuack commented 3 years ago

Important note: It works fine while serving the app

wadouk commented 3 years ago

Seems correlated to sub packages with browsers entries in package.json I use pdfmake or handlebar and it fail on both With this it is

still looking for a way for handlebar

wadouk commented 3 years ago

failing to find a workaround rollback to parcel 1 seems OK

mischnic commented 3 years ago

Please provide a full reproduction. This works fine for me:

import pdfMake from "pdfmake/build/pdfmake";

console.log(pdfMake);
{
  "dependencies": {
    "parcel": "^2.0.0-nightly.821",
    "pdfmake": "^0.2.2"
  }
}
wadouk commented 3 years ago

fail to rollback to parcel 1 : build OK but at runtime got "global is undefined" on buffer package when loading pdfmake/build/pdfmake because of buffer-base64 that should not be loaded because pdfmake is browser built.

try to reproduce on small project, but it's working great. seems there is a some side effect somewhere. digging.

wadouk commented 3 years ago

clean a little more package.json (unused other dependencies) and it works in the big project. add it back those and it's still ok ...

zeymx commented 3 years ago

I think I'm getting a related error

6914

LiberQuack commented 3 years ago

I tried import as few things as possible, but it still complains about external packages... I am trying debugging that @parcel/packager-js, but not clue for now

LiberQuack commented 3 years ago

giving up, changing project for using parcel v1

LiberQuack commented 3 years ago

But one think I realized is, really few imports, it works

but when I add "lit" library it fails... I think it's related to library package.json, because some of them have fields like module, browser

probably it relates

LiberQuack commented 3 years ago

Finally it worked.

I deleted every config I had like: .parcelrc, package-lock.json, parcel dependencies from package.json. Then, Installed everything again, now it's working

Note: it seems there's a problem with @parcel/optimizer-svgo, I had to create a svgo.config.json

svgo.config.json 
{
  "plugins": [
    {
      "name": "preset-default",
      "params": {
        "overrides": {}
      }
    }
  ]
}
package.json 
{
  "name": "bull-app-web",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "parcel src/index.html",
    "start:fallback": "concurrently 'npm run serve' 'npm run watch'",
    "start:prod": "npm run build && npm run serve",
    "serve": "mkdir -p dist && http-server-spa dist",
    "watch": "parcel watch --no-hmr src/index.html",
    "build": "rm -rf .parcel-cache dist/* && parcel build src/index.html",
    "test": "echo \"Error: no test specified\" && exit 1",
    "browsers": "browserslist"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.21.1",
    "debounce": "^1.2.1",
    "haunted": "^4.8.0",
    "idb": "^6.1.1",
    "immer": "^8.0.1",
    "is-email": "^1.0.0",
    "lit": "^2.0.0-rc.4",
    "object-path": "^0.11.5",
    "rgb-to-hsl": "^0.0.3",
    "stripe": "^8.174.0",
    "superstruct": "^0.15.2",
    "swiper": "^7.0.5",
    "thenby": "^1.3.4",
    "uplot": "^1.6.7",
    "urlb64touint8array": "^1.0.3",
    "workbox-precaching": "^6.1.5",
    "workbox-routing": "^6.1.5",
    "workbox-strategies": "^6.1.5"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.14.5",
    "@babel/plugin-proposal-decorators": "^7.15.4",
    "@babel/plugin-syntax-jsx": "^7.14.5",
    "@babel/plugin-transform-typescript": "^7.15.4",
    "@parcel/babel-plugin-transform-runtime": "^2.0.0-nightly.1823",
    "@parcel/babel-preset-env": "^2.0.0-alpha.3",
    "@parcel/packager-raw-url": "^2.0.0-rc.0",
    "@parcel/transformer-image": "^2.0.0-rc.0",
    "@parcel/optimizer-svgo": "2.0.0-nightly.2461",
    "@parcel/transformer-inline-string": "^2.0.0-rc.0",
    "@parcel/transformer-sass": "^2.0.0-rc.0",
    "@parcel/transformer-webmanifest": "^2.0.0-rc.0",
    "@types/babel-plugin-syntax-jsx": "^6.18.0",
    "@types/debounce": "^1.2.0",
    "@types/dom-to-image": "^2.6.2",
    "@types/express": "^4.17.11",
    "@types/mathjs": "^6.0.11",
    "@types/object-path": "^0.11.0",
    "@types/parse": "^2.18.3",
    "@types/service_worker_api": "^0.0.9",
    "babel-generator": "^6.26.1",
    "babel-template": "^6.26.0",
    "concurrently": "^6.2.0",
    "http-server-spa": "^1.3.0",
    "netlify-cli": "^2.37.0",
    "parcel": "^2.0.0-nightly.837",
    "parcel-config-precache-manifest": "^0.0.4",
    "ts-node": "^10.2.1",
    "typescript": "^4.2.4",
    "utility-types": "^3.10.0"
  }
}
LiberQuack commented 3 years ago

I don't know about the others talking, but I think we can close this issue

I'll wait for any activity until 20/09 :)

KillerCodeMonkey commented 3 years ago

Having the same issue in an electron app with renderer using react + ts. Everything is working with v2.0.0-beta.3.1 and failing with any later build/release

config in package.json

"main": "./main.js",
  "electron-main": "./dist/launcher/main/main.js",
  "electron-renderer": "./dist/launcher/index.html",
  "app": "./dist/app/index.html",
  "targets": {
    "app": {
      "engines": {
        "browsers": "> 0.25%"
      },
      "context": "browser",
      "isLibrary": false,
      "distDir": "./dist/app"
    },
    "electron-main": {
      "context": "electron-main",
      "distDir": "./dist/launcher/main"
    },
    "electron-renderer": {
      "context": "electron-renderer",
      "distDir": "./dist/launcher/renderer",
      "isLibrary": false,
      "publicUrl": "."
    }
  },

It is working, when starting for development parcel watch and failing on build. The line is the main module of the renderer

import React, { ReactElement } from 'react'

Beside of that, i have/had an async import that is failing. Seems like module is not created at all or the exported class gets not exported.

Some simplified version what i am doing (no working example):

export class TestClass {}
const asyncFunction = async (doAsync = false) => {
  if (doAsync) {
   new (await import('./test-class.ts).TestClass()
  }
}

await asyncFunction(true)

And yes, this is working in beta.3.1 :-)

KillerCodeMonkey commented 2 years ago

somebody else having one of the issues?

ciocan commented 2 years ago

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"
  }
}
roelandxyz commented 2 years ago

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.

KillerCodeMonkey commented 2 years ago

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

henriquemattos commented 2 years ago

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

"engines": {
  "node": ">=17"
}
humphd commented 2 years ago

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
janjaali commented 2 years ago

Could we reopen this, issue still remains?

mischnic commented 2 years ago

Please share your package.json if this happens for you and you think it's a bug

liby commented 2 years ago

Please share your package.json if this happens for you and you think it's a bug

I encountered a similar error, but when I added the browserslist field, the error disappeared. But I'm still a little confused. I didn't find the answer in the document. Maybe I missed something.

milne-dev commented 2 years ago

Why is this issue closed? It's obviously a bug.

gcp commented 2 years ago

It looks like this was duplicated to https://github.com/parcel-bundler/parcel/issues/7636

janjaali commented 2 years ago

Please share your package.json if this happens for you and you think it's a bug

Please find attached my current package.json file for which this error occurs: https://github.com/janjaali/sendGrid-mock/blob/6ffc1ab50be6220c13d9f78dfca0e47e29eb1514/package.json.

janjaali commented 2 years ago

Adding the code snippet, that was suggested in #7636, however fixed the error. Not sure if this is the intended behavior, for me still the error was very surprising, and I hope the fix won't be to add something in that regards only to the docs ;) 

targets": {
    "default": {
      "engines": {
        "browsers": ">= 50%"
      }
    }
  }
andygup commented 2 years ago

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"
  },
CristhianF7 commented 1 year ago

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

andrewriveradev commented 1 year ago

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"
  }
}
imdoingotherthings commented 7 months ago

Hello everyone, I am receiving this issue

yarn run v1.22.10
$ yarn buildFE && parcel src/index.html --no-cache
$ parcel build src/index.html
🚨 Build failed.

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

  /Users/arade/Documents/code/Tipt/src/index.js:1:1
  > 1 | // Import Packages
  >   | ^
    2 | import { createRoot } from 'react-dom/client';
    3 | import { createBrowserRouter, RouterProvider } from 'react-router-dom';

I tried a few solutions above and @humphd solution to remove the engines worked for me. Not sure why it's not working with engines but I noticed when I named a react component TOS it broke.

Not sure if it was a namespace issue that broke. I also removed all parcel related files, the node_modules folder, .lock files and reinstalled parcel using yarn 1.22.10, still not working. Only remove the engines.

Yohaesmi commented 7 months ago

2024 is here, error still occurs.

Adding "browserlist" still fixes it, and we can use "engines".

{ 
  "browserslist": "> 0.5%, last 2 versions, not dead",
}
imdoingotherthings commented 7 months ago

@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"
    }
}
Yohaesmi commented 7 months ago

@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"
 ],
mathieucaroff commented 1 month ago

I've experienced this error recently and I was able to get rid of the error by removing the "engine" entry from my package.json.