Parcel: Add support for glob imports to Parcel 2

Created on 3 Jun 2020 · 5Comments · Source: parcel-bundler/parcel

🐛 bug report

Parcel 2 does not return transformed URLs when importing raw files specified using a glob pattern from JavaScript with any of

import asset from 'url:/assets/**/*';
import asset from 'url:/assets/*';
import asset from 'url:/assets/*.ext';

🎛 Configuration (.babelrc, package.json, cli command)

package.json

{
  "name": "test",
  "dependencies": {
    "parcel": "next"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0"
  }
}

🤔 Expected Behavior

From what I understand from the old Parcel docs, an object containing a mapping of files to transformed URLs should be returned, such as the following:

{
   'file-1': '/file-1.8e73c985.png',
   'file-2': '/file-1.8e73c985.png'
}

😯 Current Behavior

Parcel fails during bundling with the following error:

$ yarn parcel index.html
ℹ Server running at http://localhost:1234
Building index.html...
× Build failed.
@parcel/core: Failed to resolve 'url:/assets/*' from './index.html'
C:\Users\User\Workspace\test\index.html:1:20
> 1 | <html>
>   |       ^
  2 |   <head>
  3 |     <script>
@parcel/resolver-default: Cannot load file './assets/*' in './'.
Did you mean ./assets?

💁 Possible Solution

4055

🔦 Context

I am writing a game using three.js and was trying to import my images so that I can load them as textures.

💻 Code Sample

Folder Structure

/root
 |-- /assets
 |    |-- test.png
 |-- index.html
 |-- package.json

index.html

<html>
    <head>
        <script>
            import assets from 'url:/assets/*';
            console.log(assets);
        </script>
    </head>
</body>

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 2.0.0-alpha.3.2 (also reproducible on 2.0.0-nightly.277+149c00b7) |
| Node | v12.17.0 |
| npm/Yarn | yarn 2.0.0-rc.33 |
| Operating System | Windows 10 1909 |

Feature ✨ Parcel 2

Source

Smiley43210

👍1

All 5 comments

Parcel 2 doesn't support globs (yet).

mischnic on 3 Jun 2020

😕5

Parcel 2 doesn't support globs (yet).

Is there workaround to import multiple files for the time being? I need to access the generated file names dynamically. Is this also about the resolver, I mean can I simply add this functionality by creating my own resolver?

0xbkt on 9 Jun 2020

Something like https://www.npmjs.com/package/babel-plugin-transform-glob-import (the only downside: you need to manually clear the cache when changing one of the imported file)

Is this also about the resolver?

No, at the moment a resolver plugin can only return a single result, so this would need further further in core.

mischnic on 9 Jun 2020

No, at the moment a resolver plugin can only return a single result, so this would need further further in core.

Correction: the problem at the moment is that the resolver couldn't add the directory to the watcher.

mischnic on 9 Jun 2020

Are there any plans to support this behaviour some time soon? This was one of the things I liked about parcel. I would keep using v1 since it's a lot easier, but it seems it's not very well supported (but neither is v2 it seems)