Giter VIP home page Giter VIP logo

Comments (3)

evanw avatar evanw commented on July 21, 2024 1

Thanks, I can reproduce the issue. Glob-style imports should support import attributes. This problem also affects uses of glob-style imports that don't involve plugins at all.

from esbuild.

evanw avatar evanw commented on July 21, 2024

How do you reproduce this? Here's what I tried:

require('esbuild').build({
  bundle: true,
  write: false,
  stdin: {
    contents: `
      import 'foo' with { type: 'foo' }
      import('bar', { with: { type: 'bar' } })
    `,
  },
  plugins: [{
    name: 'example',
    setup(build) {
      build.onResolve({ filter: /./ }, args => {
        return { path: args.path, namespace: 'temp' }
      })
      build.onLoad({ filter: /./ }, args => {
        console.log({ path: args.path, with: args.with })
        return { contents: args.path }
      })
    },
  }],
})

That prints this, which seems to work fine:

{ path: 'bar', with: { type: 'bar' } }
{ path: 'foo', with: { type: 'foo' } }

Marking as unactionable because the issue reporting instructions weren't followed (no reproduction instructions were provided).

from esbuild.

tiagomta avatar tiagomta commented on July 21, 2024

Hi @evanw,

Yeah, the example to this is a bit more complex than that, but I was able to reproduce this using a example like that.
I've found out that this only happens when the path is dynamic, here is an example:

import { build } from "esbuild";
import path from "path";
import { readFileSync } from "fs";

const { outputFiles } = await build({
  entryPoints: ["./code.js"],
  bundle: true,
  write: false,
  format: "esm",
  plugins: [
    {
      name: "demo",
      setup: (build) => (
        build.onResolve({ filter: /.*/ }, resolve.bind(this)),
        build.onLoad({ filter: /.*/ }, load.bind(this))
      ),
    },
  ],
});

function resolve(args) {
  return { path: path.resolve(args.path) }
}

function load(args) {
  if (args.with.type === "reader") return { contents: readFileSync(args.path, "utf8") };
  return { contents: readFileSync(args.path, "utf8"), loader: "js" };
}

this is the main script, then we have the "code.js":

import "./README.md" with { type: "reader" };
const target = "example";
const test = await import(`./${target}/README.md`, {
  with: { type: "reader" },
});
console.log(test);

Then for this to behave unexpectedly, I had multiple folders with a README.md file, and when the esbuild tries to parse them, it does not use the "with reader", uses the default javascript

from esbuild.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.