parcel serve works but parcel build does not

Question

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"
  ]
}

Does upgrading `parcel` to `2.6.2` resolve the issue? – nwxdev Jul 19 '22 at 21:38 — nwxdev, Jul 19 '22 at 21:38

snnsnn · Answer 1 · 2023-03-05T12:53:21.617

Your babel configuration is excessive since you don't need transform runtime. Just install babel-preset-solid and @babel/core and you are done.

Parcel supports both project wide config files such as babel.config.json, as well as file relative configs such as .babelrc.

Note: JavaScript Babel configs (e.g. babel.config.js) should be avoided. These cause Parcel’s caching to be less effective, which means all of your JS files will be recompiled each time you restart Parcel. https://parceljs.org/languages/javascript/#babel

Create a .babelrc file with the following content:

{
  "presets": ["solid"]
}

You can check out this answer for other details: https://stackoverflow.com/a/75641238/7134134

parcel serve works but parcel build does not

1 Answers1