ESBuild alias

[tbm206]

I'm currently trying to transpile .civet files with JSX content using Civet's esbuild plugin. However, I'm getting the following error:

    src/Component.civet:2:2:
      2 │   <div>
        ╵   ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

I've read through this issue but not certain if it's relevant to this situation or if I'm missing something?

[edemaine]

Civet actually has two esbuild plugins. Could you clarify which one you're using, and maybe include your esbuild config?

[tbm206]

Apologies for the late response. Here's the esbuild configuration:

import civetPlugin from "@danielx/civet/esbuild-plugin";
import * as esbuild from "esbuild";

const config = {
  entryPoints: ["./src/main"],
  jsxFactory: "h",
  jsxFragment: "Fragment",
  jsx: "automatic",
  bundle: true,
  minify: process.env.NODE_ENV === "production",
  metafile: process.env.NODE_ENG !== "production",
  chunkNames: "[name]",
  target: "es6",
  loader: { ".js": "jsx" },
  alias: { "~": "./src", react: "preact/compat", "react-dom": "preact/compat" },
  plugins: [
    civetPlugin({
      // Options and their defaults:
      // dts: false,                     // generate .d.ts files?
      // outputExtension: '.civet.tsx',  // replaces .civet in output
      js: true, // use Civet's TS -> JS transpiler?
    }),
  ],
};

esbuild
  .build(config)
  .then((result) => {
    console.log("⚡ Done");

    if (process.env.NODE_ENG !== "production") {
      esbuild
        .analyzeMetafile(result.metafile)
        .then((analysis) => console.log(analysis));
    }
  })
  .catch((error) => {
    console.error(error);
    process.exit(1);
  });

[STRd6]

@tbm206 I was able to reproduce the issue. I fixed it by using import civetPlugin from "@danielx/civet/esbuild" instead of "@danielx/civet/esbuild-plugin" which is our older esbuild plugin.

Let me know if that fixes it for you and I'll try and update our docs and build to only use the newer plugin.

[tbm206]

Thanks @STRd6, that gives me the following error

node:internal/errors:490
    ErrorCaptureStackTrace(err);
    ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'vscode-languageserver' imported from /home/client/node_modules/.pnpm/@danielx+civet@0.6.38_typescript@5.2.2/node_modules/@danielx/civet/dist/ts-diagnostic.mjs
    at new NodeError (node:internal/errors:399:5)
    at packageResolve (node:internal/modules/esm/resolve:889:9)
    at moduleResolve (node:internal/modules/esm/resolve:938:20)
    at defaultResolve (node:internal/modules/esm/resolve:1153:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:838:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
    at link (node:internal/modules/esm/module_job:76:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

I use vscode but not sure how that affects esbuild?

[STRd6]

@tbm206 Try updating to @danielx/civet@0.6.43.

[tbm206]

I now get two types of error:

✘ [ERROR] The JSX syntax extension is not currently enabled

    src/index.js:57:2:
      57 │   <Provider store={store}>
         ╵   ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

and

✘ [ERROR] ENOENT: no such file or directory, open '/home/src/routesMap.civet' [plugin unplugin-civet]

    src/index.js:17:26:
      17 │ import { routesMap } from "./routesMap.civet";
         ╵                           ~~~~~~~~~~~~~~~~~~~~

  This error came from the "onLoad" callback registered here:

    node_modules/.pnpm/esbuild@0.19.4/node_modules/esbuild/lib/main.js:1293:20:
      1293 │       let promise = setup({

[tbm206]

I got it working now. Basically, with the civet plugin enabled, I cannot use aliases like ~/components

Thanks a lot