Search code examples
javascriptbundling-and-minificationparceljs

How to import with concatenation using Parcel?

I have a directory full of JSON files. I am trying to write a function to load one of them by name at runtime. When I am using Webpack, I can just do something like this:

const data = await import(`~/resources/levels-progression/${chapterName}.json`);

However, I am currently using Parcel, and doing that just results in an error:

TypeError: error resolving module specifier '~/resources/levels-progression/functions.json'

It seems that Parcel ignores my import when I do it this way. How can I fix this?

Solution

  • At the time of writing, there is no way to do this with code-splitting, asynchronous goodness in Parcel (GitHub Issue). However, we can get (kind of) close by using a glob import:

    const allData = require("../resources/levels-progression/*.json");

    allData will be a JS object with a key for each file that was present in the directory.

    Note that this doesn't seem to work with tilde imports.