Skip to content

SyntaxError when using with Vite — import and export as class method names #20

Description

@alyssonbarrera

Environment

  • @lexkit/editor: 0.1.0
  • Bundler: Vite 8 + esbuild (project scaffolded with Nx)
  • Package manager: pnpm
  • Browser: Safari (Chrome and Firefox unaffected)

Description

When using @lexkit/editor in a Vite project, the app fails to load in Safari with:

SyntaxError: Unexpected token '('. Expected a ')' or a ',' after a parameter declaration.
— @lexkit_editor.js:32706

The error points to the MarkdownExtension manager class in dist/index.js, which defines two methods using reserved keywords as names:

var lt = class {
  export() { ... }         // ← parse error
  import(t, e, o) { ... }  // ← parse error
}

When Vite pre-bundles this file with esbuild, import and export are kept as literal method names. Safari rejects this, likely interpreting import( as a dynamic import() call instead of a class method definition.

Workaround (for Vite users)

import { readFileSync } from "node:fs";

const lexkitReservedKeywordFix = {
  name: "lexkit-reserved-keyword-fix",
  setup(build: any) {
    build.onLoad({ filter: /\.js$/ }, (args: any) => {
      if (!args.path.includes("@lexkit")) return undefined;
      const code = readFileSync(args.path, "utf8")
        .replace(/\}export\(\)\{/g, '}["export"](){')
        .replace(/\}import\(([^)]+)\)\{/g, '}["import"]($1){');
      return { contents: code, loader: "js" };
    });
  },
};

export default defineConfig({
  optimizeDeps: {
    esbuildOptions: { plugins: [lexkitReservedKeywordFix] },
  },
});

Suggested fix

Rename the methods to non-reserved identifiers in the source:

fromMarkdown(content: string, ...) { ... }
toMarkdown() { ... }

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions