[Parcel 2] TypeError: 'fetch' / Uncaught TypeError: global is undefined

[NorbertBodziony]

🐛 bug report

During refactor from react-app-rewired to parcel v2 i encoutered two problems.

1. First when script in index.html includes type='module'
<script type="module" src="./index.tsx"></script>
   parcel build works but app crashes with Uncaught TypeError: global is undefined

2. Whentype='module' is removed app runs but one of packages causes error
   TypeError: 'fetch' called on an object that does not implement interface Window.

🎛 Configuration (.babelrc, package.json, cli command)

.parcelrc

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.svg": ["@parcel/transformer-svgo", "@parcel/transformer-svg-react"],
    "*.{jpg,png,mp4,gif}": ["@parcel/transformer-raw"],
  }
}

.package.json

{
   "parcel": "^2.0.0-beta.3.1",
   "@parcel/transformer-raw": "^2.0.0-alpha.3",
   "@parcel/transformer-svg-react": "^2.0.0-nightly.1739",
   "@parcel/transformer-svgo": "^2.0.0-nightly.1739",
   "@parcel/transformer-typescript-tsc": "^2.0.0-alpha.3"
   "scripts": {
    "start": "parcel serve ./src/index.html",
    "build": "parcel build ./src/index.html", 
  }
  }
}

🤔 Expected Behavior

In both cases app should work just fine.

😯 Current Behavior

Error with type=module

Uncaught TypeError: global is undefined
    ["7dwPW"]< index.js:36
    newRequire index.ad6fbba7.js:71
    localRequire index.ad6fbba7.js:83
    ["7g8rC"]< index.ad6fbba7.js:76577
    newRequire index.ad6fbba7.js:71
    localRequire index.ad6fbba7.js:83
    ["2l7vB"]< index.ad6fbba7.js:76454
    newRequire index.ad6fbba7.js:71
    localRequire index.ad6fbba7.js:83
    ["2FTZ8"]< index.ad6fbba7.js:76354
    newRequire index.ad6fbba7.js:71
    localRequire index.ad6fbba7.js:83
    ["1I6tK"]< index.ad6fbba7.js:72339
    newRequire index.ad6fbba7.js:71
    localRequire index.ad6fbba7.js:83
    ["5UGP1"]< index.ad6fbba7.js:65940
    newRequire index.ad6fbba7.js:71
    localRequire index.ad6fbba7.js:83
    ["3gvu8"]< index.ad6fbba7.js:21034
    newRequire index.ad6fbba7.js:71
    localRequire index.ad6fbba7.js:83
    ["2AJ90"]< index.ad6fbba7.js:874
    newRequire index.ad6fbba7.js:71
    <anonymous> index.ad6fbba7.js:120
    <anonymous> index.ad6fbba7.js:143
index.js:36:17

Error without type=module

Error: failed to get info about account 7mvq8tBnbgZyfEVxpe2Gbmq8TCx7Xt8sRoqghMpeqvpT: TypeError: 'fetch' called on an object that does not implement interface Window.
    getAccountInfo index.ad6fbba7.js:80961
    state state.ts:53
    getState exchange.js:90
    __awaiter exchange.js:8
    __awaiter index.ad6fbba7.js:123163
    getState exchange.js:89
    build exchange.js:54
    __awaiter exchange.js:8
    __awaiter index.ad6fbba7.js:123163
    build exchange.js:52
    getExchangeProgram exchange.ts:22
    Redux 17
        runCallEffect
        runEffect
        digestEffect
        next
        proc
        runCallEffect
        runEffect
        digestEffect
        next
        currCb
        end
        cont
        next
        currCb
        runCallEffect
        runEffect
        digestEffect
connection.ts:42:12

💁 Possible Solution

🔦 Context

I want to migrate from webpack to parcel since i use webpack 5 for storybook and
react-scripts does not supports it at this moment.

💻 Code Sample

Here is full repository: https://github.com/Synthetify/synthetify-webapp/tree/parcel

🌍 Your Environment

Software	Version(s)
Parcel	2.0.0-beta.3.1
Node	14.17.0
npm/Yarn	6.14.13
Operating System	MacOs 11.4

[mischnic]

I'm getting this error with your repo:

@parcel/core: src/static/svg/depo_ic.svg does not export 'ReactComponent'
synthetify-webapp/src/containers/Modals/DepositModal.tsx:11:10
  10 | import { SvgIcon } from '@material-ui/core'
> 11 | import { ReactComponent as DepositIcon } from '#static/svg/depo_ic.svg'
>    |          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  12 |
  13 | export const SendMoneyModal = () => {

[NorbertBodziony]

Maybe there is something wrong with .parcelrc

  "extends": "@parcel/config-default",
  "transformers": {
    "*.svg": ["@parcel/transformer-svgo", "@parcel/transformer-svg-react"],
    "*.{jpg,png,mp4,gif}": ["@parcel/transformer-raw"],
  }
}

I have cleared package-lock.json and fixed your error but problem still persist.
This time I was forced to include type=module and encountered another error

@parcel/packager-raw: Raw bundles must only contain one asset

Removed some assets to fix this issue since i think this is unrelated to this.
Pushed updated version to https://github.com/Synthetify/synthetify-webapp/tree/parcel
Problem with TypeError: 'fetch' called on an object that does not implement interface Window. still persist.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.