I'm setting up a new project with Parcel, TypeScript, and SolidJS. With the exception of TypeScript, I'm fairly new to this tech stack. I've gotten the ts and tsx targets building exactly the way I want, but the html file is giving me a headache.
The serve command:
> npx parcel ./static/index.html
Correctly transforms the HTML and all linked files and dumps the result into the dist folder, then starts a development server. I've inspected the resulting files, and the output is precisely what I need.
However, when I try to run just the build command:
> npx parcel build ./static/index.html
It spits out this error:
× Build failed.
@parcel/transformer-js: Unexpected token `,`. Expected this, import, async, function, [ for array literal, { for object literal, @ for decorator,
function, class, null, true, false, number, bigint, string, regexp, ` for template literal, (, or an identifier
path\to\project\src\renderer\index.tsx:6:21
3 |
> 4 | render(() => <App />, document.getElementById('root')!);
> | ^
5 |
Since the serve command works, I know there must be something I've missed in configuring the build command, but I just can figure out what's wrong.
Here are what I think are all the relevant files:
// src/renderer/index.tsx
import { render } from "solid-js/web";
import App from "./App";
render(() => <App />, document.getElementById('root')!);
// src/renderer/App.tsx
import { createEffect, Component } from 'solid-js';
const App: Component = () => {
createEffect(() => console.log('launched'));
return (<p>Simple compontent to demonstrate SolidJS is working.</p>);
}
export default App;
// static/index.html
<!DOCTYPE html>
<html>
<head>
<title>App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="../src/renderer/index.tsx"></script>
</body>
</html>
// package.json
{
...
"main": "dist/main/main.js",
"static": "dist/index.html",
"targets": {
"main": {
"context": "electron-main",
"source": "src/main/main.ts",
"distDir": "dist"
},
"static": {
"context": "browser",
"source": "static/index.html",
"distDir": "dist"
}
},
"dependencies": {
"solid-js": "^1.3.10",
...
},
"devDependencies": {
"@parcel/babel-preset-env": "^2.3.2",
"@parcel/transformer-typescript-tsc": "^2.3.2",
"parcel": "^2.3.2",
"typescript": ">=3.0.0",
...
}
}
// .babelrc
{
"plugins": [
["babel-plugin-jsx-dom-expressions", { "moduleName": "solid-js/web" }],
"@babel/plugin-transform-runtime"
]
}
// .parcelrc
{
"extends": "@parcel/config-default",
"transformers": {
"*.{ts,tsx}": [
"@parcel/transformer-typescript-tsc",
"@parcel/transformer-babel"
]
}
}
// .tsconfig.json
{
"compilerOptions": {
"outDir": "./dist",
"rootDir": ".",
"jsx": "preserve",
"jsxImportSource": "solid-js",
"target": "esnext",
"module": "esnext",
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.d.ts"
]
}