Imports require full path in remix project

[Mossop]

I'm attempting to use the react components in a simple remix project. According to the docs I should be able to use this to import the icon component:

import SlIcon from '@shoelace-style/shoelace/dist/react/icon';

However this gives a TypeScript error: Cannot find module '@shoelace-style/shoelace/dist/react/icon' or its corresponding type declarations.

I have found it works if I specify the full path:

import SlIcon from "@shoelace-style/shoelace/dist/react/icon/index.js"

Sort of annoying but not the end of the world but I wonder if there is a way to avoid this?

[jasonk]

I'm fairly certain this is because the bundler resolution mode doesn't provide the special handling to packages that it does for your own code. The package exports these sub-paths 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/*"
  },

Since the path you are trying to import matches one of the /* exports, the part that matches the * has to match what is on the disk.

There is a way to avoid it though, that first export for "." exports everything in the package from the root, so you can just use this instead:

import { SlIcon } from "@shoelace-style/shoelace"

If your build pipeline is doing tree-shaking this will still only include the pieces you are actually using, without having to specify the full path to each import.

[KonnorRogers]

Except Shoelace has a number of imports that have side effects, and this would usually happen via a barrel file which is notoriously difficult to treeshake. Weve been down this road a few times and every test ends up with mixed results across bundlers, with most of them not doing any treeshaking causing you to import the entire library.

the only truly reliable way we've found to not import the entire library is to have separate entrypoints

[KonnorRogers]

@Mossop are you using TS? You could try changing to "moduleResolution": "bundler" in your TSConfig

[Mossop]

I've since moved away from using shoelace in this way so I can't test this anymore, but I think I already was using bundler at the time.