Bug: React not defined (with TypeScript) #1199

felixrabe · 2018-04-16T23:02:42Z

I'm aware that this is very likely a duplicate of some other bug. I'll research and close ASAP, just dumping my findings here for reference.

Edit – Related issues:

Typescript + Preact doesn't work right now Typescript + Preact doesn't work right now #1095

Edit – Using Node v9.11.1 btw. (Forgot to mention it below.)

Creating a new project like this (I've copy and pasted these lines to verify): (macOS 10.13.4, yarn 1.6.0, Parcel 1.7.1)

mkdir 054-parcel-typescript-react
cd 054-parcel-typescript-react

yarn add --dev parcel-bundler

echo '<div id="app"></div> <script src="./app.tsx"></script>' > index.html

echo $'import React from "react"\nimport {render} from "react-dom"\nrender(<h1>Hi there</h1>, document.getElementById("app"))' > app.tsx

... running Parcel:

./node_modules/.bin/parcel index.html

😯 Current Behavior

... leads to an empty page on http://localhost:1234/ and this console message: (Firefox 59)

ReferenceError: React is not defined

🤔 Expected Behavior

I'd expect the page to contain a big fat Hi there and no console error.

Resulting files from above process

(plus a .gitignore can be found here: https://github.com/felixrabe/e-2018-054-parcel-typescript-react)

package.json

{
  "devDependencies": {
    "parcel-bundler": "^1.7.1",
    "typescript": "^2.8.1"
  },
  "dependencies": {
    "react": "^16.0.0",
    "react-dom": "^16.3.2"
  }
}

index.html

<div id="app"></div> <script src="./app.tsx"></script>

app.tsx

import React from "react"
import {render} from "react-dom"
render(<h1>Hi there</h1>, document.getElementById("app"))

The text was updated successfully, but these errors were encountered:

felixrabe · 2018-04-16T23:07:40Z

Just TypeScript (leaving out React) works

mkdir 055-parcel-just-typescript-works
cd 055-parcel-just-typescript-works
yarn add --dev parcel-bundler
echo '<body><script src="app.tsx"></script></body>' > index.html
echo 'const s: string = "hi there" ; document.body.appendChild(document.createElement("div")).textContent = s' > app.tsx
./node_modules/.bin/parcel index.html

This gives the expected result at http://localhost:1234/: "hi there" and no console error.

(Repo: https://github.com/felixrabe/e-2018-055-parcel-just-typescript-works)

felixrabe · 2018-04-16T23:13:59Z

(This is not a duplicate of the above comment, but the opposite variant – trying out just React instead of just TypeScript.)

Just React (leaving out TypeScript) works

mkdir 056-parcel-just-react-works
cd 056-parcel-just-react-works
yarn add --dev parcel-bundler
echo '<div id="app"></div> <script src="app.jsx"></script>' > index.html
echo $'import React from "react"\nimport {render} from "react-dom"\nrender(<h1>Hi there</h1>, document.getElementById("app"))' > app.jsx
./node_modules/.bin/parcel index.html

This gives the expected result at http://localhost:1234/: big "Hi there" and no console error.

(Repo: https://github.com/felixrabe/e-2018-056-parcel-just-react-works)

felixrabe · 2018-04-16T23:33:57Z

I've just read in the 1.7 blog post something about a rewritten resolver. So I tried again using Parcel 1.6.2 to compare former behavior:

First example: TypeScript AND React in Parcel 1.6.2

mkdir 054-parcel-typescript-react
cd 054-parcel-typescript-react
yarn add --dev [email protected]  # <= NEW: added '@1.6.2'
echo '<div id="app"></div> <script src="./app.tsx"></script>' > index.html
echo $'import React from "react"\nimport {render} from "react-dom"\nrender(<h1>Hi there</h1>, document.getElementById("app"))' > app.tsx
./node_modules/.bin/parcel index.html

This already fails in the Terminal (which to me is an improvement compared to 1.7's silent non-Terminal console-only failure):

Felixs-iMac:054-parcel-typescript-react fr$ ./node_modules/.bin/parcel index.html
Server running at http://localhost:1234 
⏳  Building app.tsx...
yarn add v1.6.0
warning package.json: No license field
warning No license field
[1/4] Resolving packages...
yarn add v1.6.0
warning package.json: No license field
warning No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ [email protected]
info All dependencies
└─ [email protected]
warning No license field
Done in 1.83s.
🚨  /Users/fr/j/2018/experiments/p-1.6/054-parcel-typescript-react/app.tsx:4:26: Cannot resolve dependency 'react-dom'
  2 | import {render} from "react-dom"
  3 | render(<h1>Hi there</h1>, document.getElementById("app"))
> 4 | 
    | ^
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
🚨  /Users/fr/j/2018/experiments/p-1.6/054-parcel-typescript-react/app.tsx:3:22: Cannot resolve dependency 'react'
  1 | import React from "react"
  2 | import {render} from "react-dom"
> 3 | render(<h1>Hi there</h1>, document.getElementById("app"))
    |                       ^
  4 |

(I did not bother checking the page in the browser after that message. Just ^C-ed the server.)

Second example: TypeScript ONLY in Parcel 1.6.2

mkdir 055-parcel-just-typescript-works
cd 055-parcel-just-typescript-works
yarn add --dev [email protected]  # <= NEW: added '@1.6.2'
echo '<body><script src="app.tsx"></script></body>' > index.html
echo 'const s: string = "hi there" ; document.body.appendChild(document.createElement("div")).textContent = s' > app.tsx
./node_modules/.bin/parcel index.html

Works correctly as with Parcel 1.7.1.

Third example: React ONLY in Parcel 1.6.2

mkdir 056-parcel-just-react-works
cd 056-parcel-just-react-works
yarn add --dev [email protected]  # <= NEW: added '@1.6.2'
echo '<div id="app"></div> <script src="app.jsx"></script>' > index.html
echo $'import React from "react"\nimport {render} from "react-dom"\nrender(<h1>Hi there</h1>, document.getElementById("app"))' > app.jsx
./node_modules/.bin/parcel index.html

This time, Parcel 1.6.2 behaves worse than Parcel 1.7.1 and gives me this Terminal error message, similar to the first example above:

Felixs-iMac:056-parcel-just-react-works fr$ ./node_modules/.bin/parcel index.html
Server running at http://localhost:1234 
🚨  /Users/fr/j/2018/experiments/p-1.6/056-parcel-just-react-works/app.jsx:1:18: Cannot resolve dependency 'react'
> 1 | import React from "react"
    |                   ^
  2 | import {render} from "react-dom"
  3 | render(<h1>Hi there</h1>, document.getElementById("app"))
  4 |

The browser page at http://localhost:1234/ shows:

🚨 Build error, check the console for details.

But the Browser console is empty (probably referring to the system console here).

To fix it, I can ^C the server, manually install the missing deps, and restart the server:

yarn add react react-dev
./node_modules/.bin/parcel index.html

... and http://localhost:1234/ correctly greets me with a big fat "Hi there" and no error.

gnijuohz · 2018-04-17T02:57:56Z

I encountered this as well recently. Using import * as React from 'react' worked for me. Maybe you can use it as a workaround for now.

shunia · 2018-04-17T07:59:35Z

@felixrabe Use what @gnijuohz suggests and it will be fine.
BTW, this is not a parcel issue, the way react output it's definition file and to export a general(cjs and umd and es compatible export) namespace caused this.

marvinhagemeister · 2018-04-17T12:06:16Z

@felixrabe This is a known difference between how babel and typescript handle es5 code when imported via es6 imports respectively. If you want the babel behaviour in TypeScript you can enable it via the --allowSyntheticDefaultImports option.

gnijuohz · 2018-04-17T16:26:43Z

Thanks @shunia and @marvinhagemeister, I'm new to Typescript :)
I tried using the following tsconfig.json,

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true
    }
}

and that didn't fix it. Went back to the docs for this option and it says,

Allow default imports from modules with no default export. This does not affect code emit, just typechecking.

Since it doesn't affect code emit, then it's expected nothing changes in our case...

dtinth · 2018-04-18T08:51:46Z

This tsconfig.json solved it for me:

{
  "compilerOptions": {
    "esModuleInterop": true,
    "jsx": "react"
  }
}

(Make sure to make a small change to the .jsx file to invalidate the compilation cache.)

esModuleInterop makes TypeScript module resolution from ES→CommonJs behave like webpack’s and Babel’s behavior (create a synthetic namespace with only default export). This allows import React from 'react' to work fine. In my opinion, Parcel should turn this option on by default.

gnijuohz · 2018-04-18T15:43:27Z

@dtinth esModuleInterop: true is in fact the default in Parcel. If you just use tsx: react in the config, it works as well.

So currently two approaches work:

no tsconfig.json, use import * as React from 'React'
tsconfig.json, with the following,

{
  "compilerOptions": {
    "jsx": "react"
  }
}

gnijuohz · 2018-04-18T16:09:55Z

Hi @DeMoorJasper currently Parcel's default for jsx is preserve, what are the downsides of changing it to 'react'? (then react native users will have to override this option?)

DeMoorJasper · 2018-04-18T16:16:22Z

@gnijuohz the original thought behind it was the whole pipeline concept inside parcel. Where it starts with typescript and than goes through ts-compiler than babel, therefore I thought this was a good default as babel would take care of JSX

DeMoorJasper · 2018-04-20T13:06:37Z

I'll close this off as there are several responses that answer the question

felixrabe · 2018-04-25T22:42:19Z

Yes, this is fine to be closed. I'm still investigating, but the key to resolve my issue seems to be (exactly as @gnijuohz stated above) to add tsconfig.json with

{
  "compilerOptions": {
    "jsx": "react"
  }
}

This seems to be all that is required, and it makes sense to require it. The option esModuleInterop is already activated by default in Parcel itself, which also makes sense to me as it is "highly recommended" by the TypeScript project itself.

fitfab · 2018-05-01T14:20:39Z

clearing the cache rm .cache/* and adding this to the tsconfig.json worked for me.

{
  "compilerOptions": {
    "jsx": "react"
  }
}

dtinth · 2018-05-01T14:45:14Z

IMO, "jsx": "react" should also be the default in parcel-bundler to maintain the spirit of zero configuration. I would expect import React from 'react' to just work regardless of whether I use TypeScript or JavaScript.

DeMoorJasper · 2018-05-01T14:52:30Z

@dtinth Feel free to open a PR, the original thought behind the configuration of ts-compiler was that react should be processed by babel, as we use something we call the processing pipeline, which basically processes, the asset as follows
.ts => ts-compiler => .js => babel => js packager => bundle

But after thinking about it, it might not make so much sense after all, because using the original concept you would have to config babel to process react (although in theory parcel should detect react code automatic and change babel config accordingly)

Feel free to open a PR with the improved config

ryasmi · 2018-08-13T13:55:27Z

@felixrabe thanks for this bit in particular...

The option esModuleInterop is already activated by default in Parcel itself, which also makes sense to me as it is "highly recommended" by the TypeScript project itself.

Just caught us out when importing "react-focus-trap" in our component library because we were using Parcel to preview the component in development and the TypeScript compiler without that option for production.

Offirmo · 2019-01-04T22:01:10Z

This should be in the doc. Will try to add it.

tj · 2019-01-28T11:52:21Z

I had to do:

import * as React from 'react'
import _, { PureComponent } from 'react'

not super clean haha

Offirmo · 2019-01-30T04:41:01Z

@tj did you try the solutions above?

{
  "compilerOptions": {
    "esModuleInterop": true,
    "jsx": "react"
  }
}

denkristoffer · 2019-03-28T20:57:23Z

We ran into this even though the TS config we extend already included "jsx": "react", so I guess Parcel overrides it. Setting it again worked:

{
  // This config already sets "jsx" to "react"
  "extends": "shared/tsconfig",
  // But we still have to override Parcel's default config
  "compilerOptions": {
    "jsx": "react"
  }
}

JounQin · 2019-08-31T06:56:32Z

@denkristoffer Thx for saving my life! And it seems a bug to me.

SleepWalker · 2020-01-11T21:10:06Z

One more important thing. You'll need to rm -rf .cache after changing tsconfig.json

parcel-bundler/parcel#1199 (comment)

`https://github.com/parcel-bundler/parcel/issues/1199#issuecomment-382314051`

StarpTech · 2020-05-21T09:16:04Z

I have the same issue and I don't use typescript at all. This already produces the error:

index.jsx

import { useState } from "react"

StarpTech · 2020-05-21T10:03:18Z

I could fix it by simply adding import React from "react" to the top of each imported React Component.

MeliodasSAMAi · 2020-06-02T02:55:46Z

When I install both parcel and typescript on my computer, how can I make parcel use the global typescript instead of downloading a copy when I run the parcel command

mvasin · 2020-08-04T09:57:36Z

You'll need to rm -rf .cache after changing tsconfig.json

That's the main catch here. Why doesn't this happen automatically?

margox · 2020-11-29T12:19:05Z

 "jsx": "react"

You saved me!!

adjenks · 2021-04-14T20:30:07Z

So a general question @marvinhagemeister , or anyone else who can explain. If typescript requires --allowSyntheticDefaultImports, and babel does not do this by default, does this mean that babel does something "synthetic" by default? In the future, if you were to disable babel and use the latest browser, would the code not run? What I mean is, is this just a feature to encourage some sort of bad pattern? It's making up code that isn't there, but that doesn't seem to be a "spec" of any sort. I don't really want babel to allow me to do anything that browsers wouldn't allow me to do later on, if you get what I mean.

marvinhagemeister · 2021-04-14T22:55:50Z

@adjenks The topic here only affects modules authored in commonjs or any other module system than es modules. They are not compatible out of the box and both Typescript and babel try to do their best to translate those to es modules. And that's where the slight difference in behavior of these tools resides. There is no right or better way to do the translation, hence the difference in babel and TS.

Browsers straight up refuse to load anything other than es modules (or classic script tags). The issue here only pops up if you mix and match different module systems which is common in the react ecosystem as react isn't authored in es modules.

Will one be able to stop transpiling module formats and have the code continue to work? That's the hope here, but it requires cooperation from library authors.

adjenks · 2021-04-14T22:58:44Z

@marvinhagemeister Okay, that makes sense, thank you for clarifying that. 👍

amatiasq · 2021-05-03T10:20:46Z

You'll need to rm -rf .cache after changing tsconfig.json

That's the main catch here. Why doesn't this happen automatically?

This. All my projects with parcel have a npm start such as

  "start": "rm -rf .cache && parcel src/index.html"

Why isn't this automated?

This commit adds the typescript declaration file. It further upgrades parcel to version 2. This needed to be done to get rid of the `Invalid Version: undefined` error (see parcel-bundler/parcel#5943). While doing so I also had to change the react import in the `example/index.js` due to a parcel bug (see parcel-bundler/parcel#1199).

DeMoorJasper added ❔ Question 🕐 Waiting labels Apr 17, 2018

DeMoorJasper closed this as completed Apr 20, 2018

This was referenced Dec 28, 2018

My tsconfig.json somehow causes "Error: Cannot find module 'react'" #1904

Closed

transform commonjs modules in preserved jsx files #2481

Closed

kjirou mentioned this issue Apr 14, 2019

Use TypeScript kjirou/tower-offense-7x7#2

Closed

szhu added a commit to Recidiviz/covid19-dashboard that referenced this issue Apr 24, 2020

Fix error

51ad773

parcel-bundler/parcel#1199 (comment)

szhu referenced this issue in Recidiviz/covid19-dashboard Apr 24, 2020

Fix error

4bdeac6

`https://github.com/parcel-bundler/parcel/issues/1199#issuecomment-382314051`

kujtimprenkuSQA mentioned this issue Feb 18, 2022

#150 Convert Example to TypeScript near/wallet-selector#152

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bug: React not defined (with TypeScript) #1199

Bug: React not defined (with TypeScript) #1199

felixrabe commented Apr 16, 2018 •

edited

Loading

felixrabe commented Apr 16, 2018 •

edited

Loading

felixrabe commented Apr 16, 2018 •

edited

Loading

felixrabe commented Apr 16, 2018 •

edited

Loading

gnijuohz commented Apr 17, 2018

shunia commented Apr 17, 2018

marvinhagemeister commented Apr 17, 2018

gnijuohz commented Apr 17, 2018 •

edited

Loading

dtinth commented Apr 18, 2018

gnijuohz commented Apr 18, 2018 •

edited

Loading

gnijuohz commented Apr 18, 2018

DeMoorJasper commented Apr 18, 2018 •

edited

Loading

DeMoorJasper commented Apr 20, 2018

felixrabe commented Apr 25, 2018 •

edited

Loading

fitfab commented May 1, 2018

dtinth commented May 1, 2018

DeMoorJasper commented May 1, 2018

ryasmi commented Aug 13, 2018

Offirmo commented Jan 4, 2019

tj commented Jan 28, 2019 •

edited

Loading

Offirmo commented Jan 30, 2019

denkristoffer commented Mar 28, 2019

JounQin commented Aug 31, 2019

SleepWalker commented Jan 11, 2020

StarpTech commented May 21, 2020

StarpTech commented May 21, 2020

MeliodasSAMAi commented Jun 2, 2020

mvasin commented Aug 4, 2020

margox commented Nov 29, 2020

adjenks commented Apr 14, 2021

marvinhagemeister commented Apr 14, 2021

adjenks commented Apr 14, 2021

amatiasq commented May 3, 2021

Bug: React not defined (with TypeScript) #1199

Bug: React not defined (with TypeScript) #1199

Comments

felixrabe commented Apr 16, 2018 • edited Loading

Edit – Related issues:

😯 Current Behavior

🤔 Expected Behavior

Resulting files from above process

felixrabe commented Apr 16, 2018 • edited Loading

Just TypeScript (leaving out React) works

felixrabe commented Apr 16, 2018 • edited Loading

Just React (leaving out TypeScript) works

felixrabe commented Apr 16, 2018 • edited Loading

First example: TypeScript AND React in Parcel 1.6.2

Second example: TypeScript ONLY in Parcel 1.6.2

Third example: React ONLY in Parcel 1.6.2

gnijuohz commented Apr 17, 2018

shunia commented Apr 17, 2018

marvinhagemeister commented Apr 17, 2018

gnijuohz commented Apr 17, 2018 • edited Loading

dtinth commented Apr 18, 2018

gnijuohz commented Apr 18, 2018 • edited Loading

gnijuohz commented Apr 18, 2018

DeMoorJasper commented Apr 18, 2018 • edited Loading

DeMoorJasper commented Apr 20, 2018

felixrabe commented Apr 25, 2018 • edited Loading

fitfab commented May 1, 2018

dtinth commented May 1, 2018

DeMoorJasper commented May 1, 2018

ryasmi commented Aug 13, 2018

Offirmo commented Jan 4, 2019

tj commented Jan 28, 2019 • edited Loading

Offirmo commented Jan 30, 2019

denkristoffer commented Mar 28, 2019

JounQin commented Aug 31, 2019

SleepWalker commented Jan 11, 2020

StarpTech commented May 21, 2020

StarpTech commented May 21, 2020

MeliodasSAMAi commented Jun 2, 2020

mvasin commented Aug 4, 2020

margox commented Nov 29, 2020

adjenks commented Apr 14, 2021

marvinhagemeister commented Apr 14, 2021

adjenks commented Apr 14, 2021

amatiasq commented May 3, 2021

felixrabe commented Apr 16, 2018 •

edited

Loading

felixrabe commented Apr 16, 2018 •

edited

Loading

felixrabe commented Apr 16, 2018 •

edited

Loading

felixrabe commented Apr 16, 2018 •

edited

Loading

gnijuohz commented Apr 17, 2018 •

edited

Loading

gnijuohz commented Apr 18, 2018 •

edited

Loading

DeMoorJasper commented Apr 18, 2018 •

edited

Loading

felixrabe commented Apr 25, 2018 •

edited

Loading

tj commented Jan 28, 2019 •

edited

Loading