Parcel: ENOENT: no such file or directory, open '.../icons/*'

[samuelgozi]

🐛 bug report

Im trying to import many icons at once from a directory, but it doesn't build after that.
The reason I want to do that because I get the name of the icon from the database, and I need to later 'dynamically'(not really lazy loading, but I don't know in advance the name of the file) load the icon.

import icons from '../icons/*';

// with jsx later
<img src={icons[nameOfIconFromUserInpus]} />

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

.babelrc

{
  "presets": ["env", "react"]
}

package.json

{
  "scripts": {
    "cleanup": "rm -rf .cache dist",
    "dev": "npm run cleanup && parcel ./src/index.html",
    "build": "npm run cleanup && parcel build ./src/index.html"
  },
  "devDependencies": {
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "eslint": "^4.19.1",
    "eslint-plugin-react": "^7.9.1",
    "less": "^3.0.4",
    "parcel-bundler": "^1.9.3"
  },
  "dependencies": {
    "firebase": "^5.2.0",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-router-dom": "^4.3.1"
  }
}

🤔 Expected Behavior

The project should build, and the import should contain an array with the file names

😯 Current Behavior

⏳  Building *...
events.js:167
      throw er; // Unhandled 'error' event
      ^

Error: ENOENT: no such file or directory, open '/Users/samuel/Documents/GitHub/doctorice-acp/src/assets/icons/*'
Emitted 'error' event at:
    at fs.open (internal/fs/streams.js:100:12)
⏳  Building camelize.js...
events.js:167
      throw er; // Unhandled 'error' event
      ^

Error: ENOENT: no such file or directory, open '/Users/samuel/Documents/GitHub/doctorice-acp/src/assets/icons/*'
Emitted 'error' event at:
    at fs.open (internal/fs/streams.js:100:12)
🚨  /Users/samuel/Documents/GitHub/doctorice-acp/node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js: Cannot read property 'process' of und    at Object.run (/Users/samuel/Documents/GitHub/doctorice-acp/node_modules/parcel-bundler/src/worker.js:23:27)
    at Child.handleRequest (/Users/samuel/Documents/GitHub/doctorice-acp/node_modules/parcel-bundler/src/workerfarm/child.js:59:49)
    at Child.messageListener (/Users/samuel/Documents/GitHub/doctorice-acp/node_modules/parcel-bundler/src/workerfarm/child.js:34:19)
    at process.emit (events.js:182:13)
    at emit (internal/child_process.js:811:12)
    at process._tickCallback (internal/process/next_tick.js:63:19)

💁 Possible Solution

I wish I had any idea.

🔦 Context

Basically im trying to load multiple icons, and then show them based on user input.
I don't even know if this works because it doesn't build but it should look like this:

import icons from '../icons/*';

// with jsx later
<img src={icons[nameOfIconFromUserInpus]} />

💻 Code Sample

...mmm...
Any project with an import that ends with a "*" throws this error for me.

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel |1.9.3|
| Node |10.5.0|
| npm/Yarn |6.1.0 / 1.7.0|
| Operating System | macOS 10.13.5 |

[collegeimprovements]

Thanks, i learn something new. "dev": "npm run cleanup && parcel ./src/index.html", 👍

[DeMoorJasper]

Could you create a minimal reproduction repository?

[samuelgozi]

@DeMoorJasper Yes here you have two.
https://github.com/samuelgozi/parcel-error-1642
https://codesandbox.io/s/211yk565xp

I hope im doing something wrong because I need to find a solution fast or ill need to return to webpack.... the horrors...

[DeMoorJasper]

@samuelgozi I see the codesandbox is giving an error, I'm not able to get it to go away, I guess this is a codesandbox bug.

But I could fix it locally, I think your glob import is just incorrect.
I've changed it to the following, and now it works perfectly: import icons from '../assets/*.svg';

[samuelgozi]

@DeMoorJasper Amazing, thanks it works!

[llorenspujol]

Hi @DeMoorJasper , this is not working in my project with [email protected], even with the *.png. It worked in [email protected].

This is the output error, if you see, I am using the notation /*.png as described in this thread:

Here is a GitHub project where you can see it is failing. If you downgrade the parcel version to 1.9.3, you will see it works:
https://github.com/llorenspujol/parcel-pixijs-quickstarter

[vudzero]

If you want to import different files extensions, it seems that /myimport/*.* works for any extensions

[shripriyaprabhakar]

Thanks, i learn something new. "dev": "npm run cleanup && parcel ./src/index.html", 👍

Awesome!! worked for me!

[samuelgozi]

Thanks, i learn something new. "dev": "npm run cleanup && parcel ./src/index.html", 👍

Awesome!! worked for me!

Just remember to add the cleanup script:

"cleanup": "rm -rf .cache dist",

And it works with parcel too because npm is installed by default.

[aleonov-virtru]

Thanks, i learn something new. "dev": "npm run cleanup && parcel ./src/index.html", 👍

Awesome!! worked for me!

Just remember to add the cleanup script:

"cleanup": "rm -rf .cache dist",

And it works with parcel too because npm is installed by default.

Thanks! Works for me too.