fix: can't import transform in vite project without `type: module` about magic-regexp

[danielroe]

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.

[danielroe]

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

[HassanZahirnia]

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?

[danielroe]

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?

[danielroe]

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

[HassanZahirnia]

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

[danielroe]

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.