karolisk Posts - Answer Overflow

karolisk

•Created by karolisk on 4/7/2025 in #support

NX setup with SolidJS and React

I have a monorepo where I create web components with SolidJS and take them into use in React. The app runs fine and individual libs builds ok, but I get error when I build React app:

libs\shared\ui\components\src\lib\tree\LoadableTreeAction.tsx:17:3 - error TS2322: Type 'import("C:/clients/node_modules/.pnpm/@[email protected]/nod
e_modules/@types/react/jsx-runtime").JSX.Element' is not assignable to type 'import("C:/clients/node_modules/.pnpm/[email protected]/node_modules/solid-js/types/jsx").JSX.Element'.
  15 |   props
  16 | ): JSX.Element => {
> 17 |   return (
     |   ^
  18 |     <Show

libs\shared\ui\components\src\lib\tree\LoadableTreeAction.tsx:17:3 - error TS2322: Type 'import("C:/clients/node_modules/.pnpm/@[email protected]/nod
e_modules/@types/react/jsx-runtime").JSX.Element' is not assignable to type 'import("C:/clients/node_modules/.pnpm/[email protected]/node_modules/solid-js/types/jsx").JSX.Element'.
  15 |   props
  16 | ): JSX.Element => {
> 17 |   return (
     |   ^
  18 |     <Show

For serving I have this setup in vite.config.mts for React app:

  resolve: {
    alias: {
      '@t/web-components': path.resolve(
        __dirname,
        '../../dist/libs/packages/t-web-components'
      ),
    },
  },

  resolve: {
    alias: {
      '@t/web-components': path.resolve(
        __dirname,
        '../../dist/libs/packages/t-web-components'
      ),
    },
  },

Probably I need something similar for building. Maybe someone has ideas about this?

4 replies

SSolidJS

•Created by karolisk on 1/29/2025 in #support

multiple options for auto import

6 replies

SSolidJS

•Created by karolisk on 10/17/2024 in #support

Issues when using SolidJS with child web components

Hi, I have problems passing properties to web components that is wrapped in certain web component (modus-toolbar in this case). According to docs I should use "prop:*" but that doesn't compile. It works when I use "attr:*", but this breaks intellisense. And I'm confused because when I hardcode string it works without any prefixes. I create stackblitz example: https://stackblitz.com/edit/solidjs-templates-7qjaxe?file=src%2FApp.tsx Thanks for looking into this 🙂

7 replies

Gaming

Programming