Skip to content

Support query params in import map paths for raw import plugin #1539

@thescientist13

Description

@thescientist13

Current State

Discovered in a project that I was working on where in I wanted to import some SVGs from an NPM package, e.g.

import pauseSvg from 'heroicons/24/solid/pause.svg?type=raw';

I would get an error about the path not being ESM compatible
Image

Note: heroicons technically doesn't have an exports field but even after patching one in, this error still occurred

Desired State

The issue as it turned out is that import maps treat every import path uniquely, so these two are not the same

import pauseSvg from 'heroicons/24/solid/pause.svg';

import pauseSvg from 'heroicons/24/solid/pause.svg?type=raw';

This we would need to add some sort of configuration capability to the Raw import plugin to support creating additional import map entries that include the ?type=raw query parameter, e.g,

import { greenwoodPluginImportRaw } from "@greenwood/plugin-import-raw";

export default {
  plugins: [
    greenwoodPluginImportRaw({
      importMapExtensions: ['.svg'] // name TBD
    })
  ],
};

Would then find any entries in the current import map that end in svg (for example) and create corresponding entries that also include the ?type=raw query param

Additional Context

Additionally, as seen in the linked PR, might be good to add some additional docs to the import maps page about how to "shim" in import map entries for those packages that don't support them, like heroicons, to work around limitations like this and the ones described on the page
https://greenwoodjs.dev/docs/introduction/web-standards/#import-maps

Metadata

Metadata

Assignees

No one assigned

    Labels

    PluginsGreenwood PluginsTypes(cript)Requires type definition or TypeScript related work / documentationalpha.1documentationGreenwood specific docsenhancementImprove something existing (e.g. no docs, new APIs, etc)v0.34.0

    Projects

    Status

    🔖 Ready

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions