fix: can't import transform in vite project without `type: module`

[Hassan Zahirnia]

🐛 The bug

When I try to use magic-regexp in a Laravel + Vite project I get the following errors:

Error [ERR_REQUIRE_ESM]: require() of ES Module /home/hassan/project/node_modules/.pnpm/magic-regexp@0.2.1_vite@3.0.1/node_modules/magic-regexp/dist/transform.mjs not supported.

🛠️ To reproduce

You can easily reproduce by following these steps:

laraven new
npx @preset/cli apply laravel:inertia
php artisan serve
npm run dev

When you add the vite plugin, you will see the dev command will fail with error.

🌈 Expected behaviour

I expect it to work based on the project readme instructions and code examples.

ℹ️ Additional context

No response

[Daniel Roe]

Current solution is to use vite.config.mjs and update it as follows:

  import { defineConfig } from "vite";
  import { default as laravel}  from "laravel-vite-plugin";
  import { MagicRegExpTransformPlugin } from "magic-regexp/transform";
  
  export default defineConfig({
      plugins: [
          MagicRegExpTransformPlugin.vite(),
-         laravel({
+         laravel.default({
              input: ["resources/css/app.css", "resources/js/app.js"],
              refresh: true,
          }),
      ],
  });

This is likely a bug in Vite when working with CJS context, or could be resolved by outputting native ESM from laravel-vite-plugin.

[Hassan Zahirnia]

Glad you figured this out, but unfortunately the (I'm assuming temporary) solution isn't ideal. Using .mjs for vite config will break the types and everything related. Also I'm not using the official vite plugin yet and this wouldn't work with that ( given the initial repro which was based off that ).

So I guess we have to wait for a possible (unintended) Vite change in the future that fixes this issue ?
Is there no way to use this library in a normal TS/JS/Vue app ? Does it needs a transformer to work?

[Daniel Roe]

No, it doesn't need the transformer to work as a library, just to compile to native RegExp. Using .mjs shouldn't break anything type related unless you're using typescript within your config... Have you tried it?

[Daniel Roe]

You can also set "type": "module" in your package.json to continue using a .ts vite config file.

[Hassan Zahirnia]

No, it doesn't need the transformer to work as a library, just to compile to native RegExp. Using .mjs shouldn't break anything type related unless you're using typescript within your config... Have you tried it?

Yeah I did try .mjs but my types broke in my SFCs.

You can also set "type": "module" in your package.json to continue using a .ts vite config file.

I tried that as well but the whole dev stopped working with tons of errors.

I guess the only way to use this, is to have it decoupled from my vite/ts app and basically compile the regexes manually and copy them over to any place where I use them

[Daniel Roe]

If you give me an example of your code, I can probably help resolve.

I'm guessing you might have a /// <reference at the top of your vite.config file. If so, just copy that to another TS file in your project and you can then rename your config file .mjs.

[Daniel Roe]

Released 0.3.0 with a workaround - let me know how it goes.