Autoinstalling react: Unexpected token

[mischnic]

🐛 bug report

Autoinstalling react doesn't work in a "completely clean" project.

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

No babelrc, no package.json

🤔 Expected Behavior

Parcel should install react, react-dom and then bundle.

😯 Current Behavior

Parcel doesn't recognize the JSX syntax?

🚨  ...../index.js:5:1: Unexpected token (5:1)
  3 |
  4 | const MyComponent = () => (
> 5 | 	<button>Hello</button>
    | ^
  6 | );
  7 |
  8 | ReactDOM.render(<MyComponent />, document.getElementById("root"));

💁 Possible Solution

Workaround: install react as a dependency. Running parcel index.html will then corretly install react-domand build successfully.

💻 Code Sample

index.js

import React from "react";
import ReactDOM from "react-dom";

const MyComponent = () => (
	<button>Hello</button>
);

ReactDOM.render(<MyComponent />, document.getElementById("root"));

Command:

parcel index.js

🌍 Your Environment

Software	Version(s)
Parcel	38df513
Node	11.6.0
npm/Yarn
Operating System	macOS 10.13.6

[lustoykov]

I think if it was index.jsx as opposed to index.js it should work. Having that in mind - looks ok to me?

[DeMoorJasper]

@lustoykov this should also work with .js

_{Sent with GitHawk}

[lustoykov]

For the protocol, using a normal .js extension, without JSX syntax, works fine too.

import React from 'react';
import ReactDOM from 'react-dom';

const MyComponent = () => (
  React.createElement('div', null, 'Hello')
);

ReactDOM.render(
  React.createElement(MyComponent, null, null), 
  document.getElementById('root')
);

[lustoykov]

I think babel is not even able to generate AST currently because the condition to add @babel/plugin-transform-react-jsx fails.

parcel/packages/core/parcel-bundler/src/transforms/babel/jsx.js

Line 40 in 6566e16

if (pragma || JSX_EXTENSIONS[path.extname(asset.name)]) {

So one possible (but pretty ugly) solution would be to add an additional check if the contents of the asset include ...from 'react/preact/etc' or ...require('react/preact/etc') to the condition above.

This would enable jsx compilation. If I interpret correctly, as a result, babel would be able to generate AST, parcel collect dependencies and set the correct pragma.

Do you see some better options?

[mischnic]

Do you see some better options?

Always using @babel/plugin-syntax-jsx ?

[DeMoorJasper]

Dependencies have been collected before transform runs, so in theory the jsx check could check if react or preact is a dependency and enable the correct babel plugin.

This would probably even make the jsx extension check obsolete as react should be imported on every file using jsx afaik

[lustoykov]

@DeMoorJasper,

Dependencies have been collected before transform runs

my bad, that's correct, however parcel fails on pretransform due to missing plugin, not on transform. Since collectDependencies is a visitor, it relies on AST being generated (but babel ast generation fails).

---

Here is what I see - an asset starts with process()

parcel/packages/core/parcel-bundler/src/Asset.js

Line 191 in 6566e16

async process() {

There we can see in order

await this.pretransform(); // Fails, See (*)
await this.getDependencies(); // Only then parcel would collects dependencies
await this.transform();

pretransform() // fails due to missing plugin (*) 👇

parcel/packages/core/parcel-bundler/src/assets/JSAsset.js

Line 156 in 6566e16

await babel(this);

[DeMoorJasper]

@lustoykov you're right forgot for a second Babel can't create an ast with jsx by default.

Than I'm not sure how to fix this, besides from catching errors and retrying after the install finished which parcel should kinda already though.
Perhaps it doesn't reload the package.json?

Should be a fairly easy fix I think

[mischnic]

The PR added autoinstall (that part works), but on the invocation where react is installed, several similar errors are printed (console and server):

🚨  /Users/niklas/.../react/Users/niklas/.../react/node_modules/react/index.js: ENOENT: no such file or directory, open '/Users/niklas/.../react/Users/niklas/.../react/node_modules/react/index.js'
Error: ENOENT: no such file or directory, open '/Users/niklas/.../react/Users/niklas/.../react/node_modules/react/index.js'

The path is somehow duplicated.

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