Parcel: Unexpected token error happening for no reason

[Arrow7000]

🐛 bug report

Getting an unexpected token error for no reason I can discern.

Unexpected token, expected ";" 

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

Don't have a Babel config, I'm just running the command like this

parcel src/index.html

🤔 Expected Behavior

It should compile my React code.

😯 Current Behavior

I'm getting this in the console

$ parcel src/index.html
Server running at http://localhost:1234
×  C:\projects\dfe\src\router\WithNavBar.tsx:5:10: Unexpected token, expected ";" (5:10)
  3 | import NavBar from "../components/NavBar/NavBar";
  4 |
> 5 | interface WithNavBarProps<T> {
    |          ^
  6 |   component: React.ComponentClass<T> | React.StatelessComponent<T>;
  7 |   path: string;
  8 | }

🔦 Context

This is the file where the problem is happening

import * as React from "react";
import { Route } from "react-router-dom";
import NavBar from "../components/NavBar/NavBar";

interface WithNavBarProps<T> {
  component: React.ComponentClass<T> | React.StatelessComponent<T>;
  path: string;
}

function WithNavBar<T>({ component }: WithNavBarProps<T>) {
  return (
    <>
      <NavBar />
      <Route component={component} />
    </>
  );
}

export default WithNavBar;

It is valid TypeScript using JSX so I don't understand what the problem is.

💻 Code Sample

It looks like the problem persists even when getting rid of my own project's imports. Trying to compile this file still gives the same error.

import * as React from "react";
import { Route } from "react-router-dom";

interface WithNavBarProps<T> {
  component: React.ComponentClass<T> | React.StatelessComponent<T>;
  path: string;
}

function WithNavBar<T>({ component }: WithNavBarProps<T>) {
  return (
    <>
      <Route component={component} />
    </>
  );
}

export default WithNavBar;

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.10.3
| Node | 8.11.3
| npm/Yarn | npm 5.6.0/Yarn 1.10.1
| Operating System | Windows 10 Version 10.0.17134 Build 17134

Note that I'm also using parcel-plugin-typescript version 1.0.0

[9oelM]

Could you provide a clone of your repo?

[aih8]

@Arrow7000
you should replace ; with ,

[Arrow7000]

@aih8 TypeScript interface items are separated by semicolons, not commas. See https://www.typescriptlang.org/docs/handbook/interfaces.html.

@9oelM I can't share my repo but I've given clear instructions on how to reproduce the error. Let me know if you have trouble reproducing it.

[wayou]

Has something to do with the plugin parcel-plugin-typescript, see also https://github.com/fathyb/parcel-plugin-typescript/issues/60.

Once remove the plugin, everything goes well.

[Arrow7000]

@wayou isn't that plugin what allows Parcel to do type checking?

[DeMoorJasper]

@Arrow7000 yes it is, but you could use parcels built-in ts support for compiling ts code as well. However this doesn’t check types.

_{Sent with GitHawk}

[benpolinsky]

@DeMoorJasper Which eliminates the whole point of ts.

[apm963]

I was having a similar issue to this where Typescript wasn't being handled with the built-in parcel-bundler when parcel-plugin-typescript was enabled. I found a temporary solution in this thread by downgrading to [email protected].

I actually have a different use-case than having my bundler do type-checking (which is a function I let my IDE handle). My issue is that Mobx supports experimental decorators which are widely used the Mobx userbase. When I use the decorator syntax with only parcel-bundler (and not parcel-plugin-typescript) then the decorators are not transformed in the way TS would transform them on their own. I am not sure if this is because tsconfig.json's compilerOptions.experimentalDecorators flag is not being applied properly or if there are other transformations being done before it is passed of to TS.

Edit: I was able to apply this patch locally to fix the issue in [email protected] to packages/core/parcel-bundler/src/assets/TypeScriptAsset.js:

class TypeScriptAsset extends Asset {
  // ...
  async generate() {
    // ...
    let tsconfig = await this.getConfig(['tsconfig.json']);

    if (tsconfig && tsconfig.extends) {
      const extendedTsconfig = await this.getConfig([tsconfig.extends]);
      if (extendedTsconfig) {
        Object.keys(extendedTsconfig).forEach(key => {
          tsconfig[key] = { ...(tsconfig[key] || {}), ...(extendedTsconfig[key] || {}) };
        });
      }
    }
    // ...
  }
  // ...
}

This should be made recursive if a PR is created. I will try to make one but may not have the immediate availability.

[DeMoorJasper]

I'm closing this as it's not an issue with Parcel-Bundler but with a Typescript plugin and it's kinda going off-topic.

Types is a whole other discussion that got resolved with the release of parcel-plugin-ts but this unfortunately was a bit hacky and no longer works.

If anyone wants to add typechecking in Parcel core I'm all for it but think it should be optional and probably a plugin for Parcel 2 once it comes out.