Typescript + React: Unexpected token: "("

[Anupheaus]

🐛 bug report

Using a .pug file as the entry point, I'm including a script file which is a .tsx file and yet the React part of it seems to be failing.

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

I do not have a .babelrc file - do I need one and why?

My configuration is a bit...complex, basically I'm creating a package that I can use as a dependency that renders react components within the main package in a harness page. If I get chance I'll create a simpler repo with the issue though.

🤔 Expected Behavior

Parcel should transpile the TypeScript and React TSX into javascript.

😯 Current Behavior

I'm getting an error:

Unexpected token (53:12)
  51 | }
  52 | function renderHarnessSelector(harness, index) {
> 53 |     return (<div className="harness-selector" key={index} onClick={function () { return loadHarness(harness); }}>
     |            ^
  54 |       {harness.name}
  55 |     </div>);
  56 | }

💻 Code Sample

Will add asap

🌍 Your Environment

Software	Version(s)
Parcel	1.12.3
Node	10.16.0
npm/Yarn	pnpm 3.7.0 (using flattened node_modules)
Operating System	Win 10

[embeddedt]

I think you either need a tsconfig.json that tells TypeScript to transpile the JSX, or a .babelrc that tells Babel to transpile the JSX. In this case if you don't need downlevelling I would recommend the tsconfig.json method.

Unless you're already using one of those, this might not be a bug in Parcel itself.

[chrisands]

Have the same issue, but I'm using lerna monorepo with yarn workspaces. And issue occurs when I import with namespace like import { Component } from '@ns/ui/src/component' and doesn't if i use ../../../ instead of namespaces.

Also TS with React.

[embeddedt]

@chrisands Do you have import React from 'react' or something similar at the top of your file? I found that the compiler requires React to be in scope for JSX even if you never use the keyword React directly.

[chrisands]

@embeddedt yes, I do have import * as React from 'react' in every file where I use jsx.

[chrisands]

@embeddedt I created repository example with issue
https://github.com/chrisands/parcel-ts-react-example

[hwatersiv]

Our team is build a package and are receive the exact same error in the exact same spot.

[kirillrogovoy]

Curiously, in Parcel 2.0.0-alpha.1.1 I get

🚨 transform-react-jsx: pragma has been set but pragmafrag has not been set
    at PluginPass.exit (/Users/kirillrogovoy/Projects/parcel/node_modules/@babel/plugin-transform-react-jsx/lib/
index.js:117:15)
    at newFn (/Users/kirillrogovoy/Projects/parcel/node_modules/@babel/traverse/lib/visitors.js:193:21)
    at NodePath._call (/Users/kirillrogovoy/Projects/parcel/node_modules/@babel/traverse/lib/path/context.js:53:
20)
    at NodePath.call (/Users/kirillrogovoy/Projects/parcel/node_modules/@babel/traverse/lib/path/context.js:40:1
7)
    at NodePath.visit (/Users/kirillrogovoy/Projects/parcel/node_modules/@babel/traverse/lib/path/context.js:97:
8)
    at TraversalContext.visitQueue (/Users/kirillrogovoy/Projects/parcel/node_modules/@babel/traverse/lib/contex
t.js:118:16)
    at TraversalContext.visitSingle (/Users/kirillrogovoy/Projects/parcel/node_modules/@babel/traverse/lib/conte
xt.js:90:19)
    at TraversalContext.visit (/Users/kirillrogovoy/Projects/parcel/node_modules/@babel/traverse/lib/context.js:
146:19)
    at Function.traverse.node (/Users/kirillrogovoy/Projects/parcel/node_modules/@babel/traverse/lib/index.js:94
:17)
    at traverse (/Users/kirillrogovoy/Projects/parcel/node_modules/@babel/traverse/lib/index.js:76:12)

[kirillrogovoy]

For some reason, #2486 hasn't got ported to v2.

I've basically applied the same fix locally and now the error is:

🚨 Destination name index.tsx extension does not match bundle type "html"
    at BundlerRunner.nameBundle (/Users/kirillrogovoy/Projects/parcel/packages/core/core/src/BundlerRunner.js:14
7:17)

It made me change "main" in packages/dashboard/package.json from index.tsx to index.html.

---

Now, the error is:

🚨 External modules are not supported when building for browser
    at Object.generateExternalImport (/Users/kirillrogovoy/Projects/parcel/packages/shared/scope-hoisting/src/fo
rmats/global.js:32:9)
    at generateExternalImport (/Users/kirillrogovoy/Projects/parcel/packages/shared/scope-hoisting/src/link.js:5
38:25)
    at NodePath._call (/Users/kirillrogovoy/Projects/parcel/node_modules/@babel/traverse/lib/path/context.js:53:
20)
    at NodePath.call (/Users/kirillrogovoy/Projects/parcel/node_modules/@babel/traverse/lib/path/context.js:40:1
7)
    at NodePath.visit (/Users/kirillrogovoy/Projects/parcel/node_modules/@babel/traverse/lib/path/context.js:97:
8)
    at TraversalContext.visitQueue (/Users/kirillrogovoy/Projects/parcel/node_modules/@babel/traverse/lib/contex
t.js:118:16)
    at TraversalContext.visitSingle (/Users/kirillrogovoy/Projects/parcel/node_modules/@babel/traverse/lib/conte
xt.js:90:19)
    at TraversalContext.visit (/Users/kirillrogovoy/Projects/parcel/node_modules/@babel/traverse/lib/context.js:
146:19)
    at Function.traverse.node (/Users/kirillrogovoy/Projects/parcel/node_modules/@babel/traverse/lib/index.js:94
:17)
    at traverse (/Users/kirillrogovoy/Projects/parcel/node_modules/@babel/traverse/lib/index.js:76:12)

[kirillrogovoy]

I've managed to reduce the example app to just index.html and index.tsx which renders a dummy React component and now Parcel just silently fails. 😦

>  ~/p/parcel/packages/core/parcel/src/bin.js build --no-cache index.html
⠦ Building index.tsx...

and then exits with status=1

[mischnic]

and then exits with status=1

Could you share that example code?

[jacktan165]

Any luck on this issue?

[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.