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

[qwertie]

🐛 bug report

Previously I have used React with Parcel without any problems. But for some reason a new, small project isn't working ("Error: Cannot find module 'react'" appears in the browser console), and I found out that the problem disappears if I delete my tsconfig.json file. I tried fiddling with the settings in tsconfig.json but so far didn't find a solution other than deleting/renaming the file.

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

• package.json

🤔 Expected Behavior

It should find React.

😯 Current Behavior

It doesn't.

💻 Code Sample

Repository

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.9.7 |
| Node | 10.4.1 |
| npm/Yarn | 6.1.0 |
| Operating System | Windows 10 |

[DeMoorJasper]

You could let babel handle jsx, that's how the default config works

[qwertie]

Wow, it happened twice on the same day. The second time was a little different: I have an "app" that consists of a set of React examples. All of the examples are able to import 'react' successfully except my newest example, 5-SimpleForm. This example imports 'holders', the npm package published from the repository I just posted above. So the examples themselves can import 'react', but when node_modules/holders imports 'react' there is a "Error: Cannot find module 'react'" error.

Note that this new case is fundamentally different from the first: the published npm package is JavaScript (elements.js), not TypeScript, so there is no tsconfig.json involved. I thought perhaps the problem was that holders has React as a "peer dependency" instead of a normal dependency. However, I tried editing package.json so that React is a normal dependency and the problem was not fixed.

@DeMoorJasper I don't see how your comment is related to my issue.

[DeMoorJasper]

Nvm thought you said react wasn't working, but it just doesn't find the module...

[qwertie]

Is there anything I can do to diagnose this? The second version of the issue is totally blocking, so either I have to switch to WebPack or get a diagnosis.

[DeMoorJasper]

You could try downgrading to older versions of parcel until you find one that works, besides that you can dig into the part where parcel collects dependencies and try debug that or the resolver or some typescript transform. There are a lot of place where things can go wrong.

[qwertie]

Aha! I discovered that version 1.6.2 works while the next version, 1.7.0, is broken (as well as 1.7.1, 1.8.1 and 1.9.7).

[qwertie]

And I can confirm that both versions of the bug - the "tsconfig" one and the "import from inside published npm package" one - appeared in 1.7.0.

[alidlorenzo]

this might be related to https://github.com/parcel-bundler/parcel/issues/1199 doing import * as React vs import React. the latter only works with typescript's esModuleInterop: true and jsx: react (if you set jsx: preserve, to let babel handle it, then modules are not interpolated)

[qwertie]

I doubt it, Alid. Remember, this bug can be triggered without TypeScript. Edit: well, maybe not. The bug was triggered by React being imported by a plain JS Node module, but within the context a TypeScript project.

[github-actions[bot]]

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.

[qwertie]

The issue may be stale, but the bug is still there. Parcel 1.6.2 forever!!!1

[qwertie]

Note: I notice that the code I pointed to does not include "react" in package.json's normal dependencies (it's a peer dependency). However, npm i [email protected] --save-dev doesn't help.

[GGAlanSmithee]

@qwertie I have the same issue and found that "module": "umd" in tsconfig.json won't work. Try another module code generation, like "esnext". However, this might mess up things for you if you want to use the same tsconfig.json for both server and client. Haven't found a good way to fix this yet though, and I am currently using two different tsconfig.json for server / client.

@DeMoorJasper Is this the expected behavior? That parcel-bundler does not support UMD modules? Does this option even affect parcel?

EDIT

I found out that "module": "CommonJS" seems to work for both server and client in my case. Maybe try that?

EDIT 2

Here's my tsconfig:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "outDir": "dist",
    "module": "CommonJS",
    "target": "ES5",
    "jsx": "react",
    "moduleResolution": "Node",
    "experimentalDecorators": true,
    "skipDefaultLibCheck": true,
    "sourceMap": true,
    "allowJs": true,
    "strict": true,
    "lib": ["ESNext", "DOM"]
  },
  "include": ["src/**/*", "types/"],
  "exclude": ["dist/**/*"]
}