Cannot dynamically import translation files using webpack due to `/dist/translations` directory not being exported in `package.json`

[Zozman]

Describe the bug

Say I have the following function to dynamically import Shoelace translations when bundling Shoelace using Webpack:

const loadShoelaceLocale = (locale:string) => import(
  /* webpackChunkName: "shoelace-locale-[request]" */
  `@shoelace-style/shoelace/dist/translations/${locale}.js`
);

When including this function, I get the following error:

ERROR in ./src/utils/localization.ts 11:46-13:58
Module not found: Error: Package path ./dist/translations is not exported from package /home/project/node_modules/@shoelace-style/shoelace (see exports field in /home/project/node_modules/@shoelace-style/shoelace/package.json)

Because Shoelace's package.json only exports the contents of the ./dist/translations directory and not the directory itself, Webpack refuses to let me consume it.

If I go into node_modules and manually add the ./dist/translations directory in addition to the other imports like this:

"exports": {
    ".": {
      "types": "./dist/shoelace.d.ts",
      "import": "./dist/shoelace.js"
    },
    "./dist/custom-elements.json": "./dist/custom-elements.json",
    "./dist/shoelace.js": "./dist/shoelace.js",
    "./dist/shoelace-autoloader.js": "./dist/shoelace-autoloader.js",
    "./dist/themes/*": "./dist/themes/*",
    "./dist/components/*": "./dist/components/*",
    "./dist/utilities/*": "./dist/utilities/*",
    "./dist/react": "./dist/react/index.js",
    "./dist/react/*": "./dist/react/*",
    "./dist/translations": "./dist/translations",
    "./dist/translations/*": "./dist/translations/*"
}

Then the import is allowed to be done.

A workaround is to manually list every import:

const shoelaceLanguageAR = import(
      /* webpackChunkName: "shoelace-locale-ar" */
      `@shoelace-style/shoelace/dist/translations/ar.js`
);
const shoelaceLanguageCS = import(
      /* webpackChunkName: "shoelace-locale-cs" */
      `@shoelace-style/shoelace/dist/translations/cs.js`
 );
// etc...

But this is tedious and has to be updated every time a new locale is added.

Browser / OS

• OS: Ubuntu (WSL)
• Webpack version: 5.95.0
• webpack-cli version: 5.1.4

[KonnorRogers]

thats uhhhhh...fascinating behavior.