Parcel: export interface unexpected token

Created on 21 Apr 2020  ยท  3Comments  ยท  Source: parcel-bundler/parcel

Latest version of [email protected] doesn't work with TypeScript.

error:
@parcel/transformer-babel: Unexpected token (13:17)

here's the code that causes the error:

export interface AdminPropsType {
  specUrl: string;
  setAuthToken: any;
  authToken: string;
  setSpec: any;
  showAllResources?: boolean;
  theme?: any;
}

using "interface" breaks the parcel bundler.

๐ŸŽ› Configuration (.babelrc, package.json, cli command)

.babelrc

module.exports = {
  presets: ["@babel/preset-react"],
  plugins: [
    "styled-components",
    "@babel/plugin-syntax-export-default-from",
    [
      "module-resolver",
      {
        root: ["."],
        alias: {
          "~": "./src/",
          common: "./src/common",
          Admin: "./src/Admin",
          tests: "./tests",
        },
      },
    ],
  ],
};

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "module": "esNext",
    "strictNullChecks": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "jsx": "react",
    "noUnusedParameters": true,
    "noUnusedLocals": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "declaration": true,
    "allowSyntheticDefaultImports": true,
    "emitDecoratorMetadata": true,
    "target": "es2019",
    "lib": ["es5", "es6", "es7", "es2017", "dom"],
    "sourceMap": true,
    "types": ["react", "jest", "node"],
    "baseUrl": ".",
    "paths": {
      "~*": ["./src/*"],
      "common/*": ["src/common/*"],
      "tests/*": ["tests/*"]
    }
  },
  "include": ["src/**/*", "src/typings.d.ts", "@types"],
  "exclude": ["./node_modules", "dist"]
}

๐Ÿค” Expected Behavior

It should parse Typescript correctly.

๐Ÿ˜ฏ Current Behavior

Unexpected Token error occurs

๐Ÿ”ฆ Context

This error only happens in [email protected]
When using [email protected] this works just fine.

๐ŸŒ Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 2.0.0-alpha.3.2
| Node | v12.12.0
| npm/Yarn | 1.17.3
| Operating System | MacOS Catalina

Question โœจ Parcel 2

Most helpful comment

By default, Parcel uses babel to transpile typescript. You created your own babelrc so Parcel's default babel config (which would specify @babel/preset-env and @babel/preset-typescript in this case) isn't being used. (Also Babel doesn't read your tsconfig at all.)

Either you add the typescript preset to your babel config or add a .parcelrcfile:

{
  "extends": "@parcel/config-default",
  "transforms": {
    "*.{ts,tsx}": ["@parcel/transformer-typescript-tsc"]
  }
}

to use tsc for handling Typescript.

All 3 comments

By default, Parcel uses babel to transpile typescript. You created your own babelrc so Parcel's default babel config (which would specify @babel/preset-env and @babel/preset-typescript in this case) isn't being used. (Also Babel doesn't read your tsconfig at all.)

Either you add the typescript preset to your babel config or add a .parcelrcfile:

{
  "extends": "@parcel/config-default",
  "transforms": {
    "*.{ts,tsx}": ["@parcel/transformer-typescript-tsc"]
  }
}

to use tsc for handling Typescript.

@mischnic ohh thank you!

That makes sense. Just didn't realize as it wasn't needed to specify it in v1.

Worth adding in the upgrade guide when v2 is stable :)

Worth adding in the upgrade guide ~when v2 is stable~

Or now: ๐Ÿ˜„ https://parcel2-docs.now.sh/getting-started/migration/#typescript

Was this page helpful?
0 / 5 - 0 ratings

Related issues

medhatdawoud picture medhatdawoud  ยท  3Comments

davidnagli picture davidnagli  ยท  3Comments

urbanhop picture urbanhop  ยท  3Comments

devongovett picture devongovett  ยท  3Comments

algebraic-brain picture algebraic-brain  ยท  3Comments