Import as recommended by docs not working

[Michael-Murzin]

Describe the bug

currently we include this way:

import {SlButton } from '@shoelace-style/shoelace/dist/react';

the docs recommend to include this way:

import SlButton from '@shoelace-style/shoelace/dist/react/button';

the second one does not work for me. my Guess is, that something in my tsconfig.json is not correct for it to work. if it cares, the project is on react with ts initialized trough vite.

Screenshots

Browser / OS

• OS: Mac

Additional information

my tsconfig:

{
	"compilerOptions": {
		"target": "ES2020",
		"useDefineForClassFields": true,
		"lib": ["ES2020", "DOM", "DOM.Iterable"],
		"module": "ESNext",
		"skipLibCheck": true,
		"types": ["vitest/globals"],

		/* Bundler mode */
		"moduleResolution": "bundler",
		"allowImportingTsExtensions": true,
		"allowSyntheticDefaultImports": true,
		"resolveJsonModule": true,
		"isolatedModules": true,
		"noEmit": true,
		"jsx": "react-jsx",

		/* Linting */
		"strict": true,
		"noUnusedLocals": true,
		"noUnusedParameters": true,
		"noFallthroughCasesInSwitch": true,

		/* Paths */
		"baseUrl": "./src",
		"paths": {
			"@/*": ["*"]
		}
	},
	"include": ["src"],
	"references": [{ "path": "./tsconfig.node.json" }]
}

[KonnorRogers]

Do you have a reproduction I could look at?

the other option is to try the following:

import SlButton from '@shoelace-style/shoelace/dist/react/button/index.js';

[Michael-Murzin]

https://stackblitz.com/edit/vitejs-vite-qdetjw
i coppied over my configs and it does work there, maybe i forgot something.
My main reason for asking was because i thought that this way i could resolve my problem below there(line 12)
i Cant use SlAlert in useRef, seems like its not typed well

I found a workaround with a shitty import:

const drawErrorToast = useRef<SlAlertType>(null);
	const [drawError, setDrawError] = useState<DrawLectureErrorCodesEnum | null>(
		null,
	);

import:

import type { default as SlAlertType } from '@shoelace-style/shoelace/dist/components/alert/alert.component.d.ts';

It does work this way without a problem, was just something bothering me a bit und i hoped it would be fixed, do you guys have a suggestion

[KonnorRogers]

https://stackblitz.com/edit/vitejs-vite-qdetjw i coppied over my configs and it does work there, maybe i forgot something. My main reason for asking was because i thought that this way i could resolve my problem below there(line 12) i Cant use SlAlert in useRef, seems like its not typed well

I found a workaround with a shitty import:

const drawErrorToast = useRef<SlAlertType>(null);
	const [drawError, setDrawError] = useState<DrawLectureErrorCodesEnum | null>(
		null,
	);

import:

import type { default as SlAlertType } from '@shoelace-style/shoelace/dist/components/alert/alert.component.d.ts';

It does work this way without a problem, was just something bothering me a bit und i hoped it would be fixed, do you guys have a suggestion

Its probably either a configuration problem in your bundler or tsconfig, without a reproduction, its hard to say which one is the problem.