babel-vite icon indicating copy to clipboard operation
babel-vite copied to clipboard

eager: true emits require (doesn't exist in browsers) instead of import.

Open NullVoxPopuli opened this issue 1 year ago • 1 comments

"babel-plugin-transform-vite-meta-glob": "^1.1.2",

Relevant code or config:

const definedScenarios = import.meta.glob('./scenarios/*', {
  eager: true,
});

output:

const __glob__0_0 = require("./scenarios/baseline-handlebars-list.gjs");
const __glob__0_1 = require("./scenarios/baseline-inner-html.gjs");
const __glob__0_2 = require("./scenarios/ember-get.gjs");
const definedScenarios = {
  "./scenarios/baseline-handlebars-list.gjs": __glob__0_0,
  "./scenarios/baseline-inner-html.gjs": __glob__0_1,
  "./scenarios/ember-get.gjs": __glob__0_2
};

I would expect this:

import * as __glob__0_0 from "./scenarios/baseline-handlebars-list.gjs";
import * as __glob__0_1 from "./scenarios/baseline-inner-html.gjs";
import * as __glob__0_2 from "./scenarios/ember-get.gjs";
const definedScenarios = {
  "./scenarios/baseline-handlebars-list.gjs": __glob__0_0,
  "./scenarios/baseline-inner-html.gjs": __glob__0_1,
  "./scenarios/ember-get.gjs": __glob__0_2
};

NullVoxPopuli avatar Aug 02 '24 17:08 NullVoxPopuli

I was running into the same issue for this. I actually think the import even needs to end up being something like:

import  __glob__0_0 from "./scenarios/baseline-handlebars-list.gjs";

Because otherwise you're grabbing a reference to the entire module. I'm using this for importing assets and in that case I just need the default export.

This pnpm patch seems to do the trick for me:

diff --git a/lib/index.js b/lib/index.js
index e928575b3063555fe9a6fb097c25335af952c11d..180fff32ec8ca6421e12831ba93ec5799c4e5379 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -64,7 +64,10 @@ function viteMetaGlobBabelPlugin({
             const identifiers = globPaths.map((_, idx) => t.identifier(`__glob__0_${idx}`));
             const imports = globPaths.map((globPath, idx) => {
               const modulePath = t.stringLiteral(globPath);
-              return t.variableDeclaration('const', [t.variableDeclarator(identifiers[idx], t.callExpression(t.identifier('require'), [modulePath]))]);
+              return t.importDeclaration(
+                [t.importDefaultSpecifier(identifiers[idx])],
+                modulePath
+              );
             });
             const variable = t.variableDeclaration('const', [t.variableDeclarator(identifier, t.objectExpression(globPaths.map((globPath, idx) => t.objectProperty(t.stringLiteral(globPath), identifiers[idx]))))]);
             path.replaceWithMultiple([...imports, variable]);

ArnaudWeyts avatar Sep 20 '24 15:09 ArnaudWeyts