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.
.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"]
}
It should parse Typescript correctly.
Unexpected Token error occurs
This error only happens in [email protected]
When using [email protected] this works just fine.
| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 2.0.0-alpha.3.2
| Node | v12.12.0
| npm/Yarn | 1.17.3
| Operating System | MacOS Catalina
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
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-envand@babel/preset-typescriptin 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:to use tsc for handling Typescript.