preact-ts preset with react specific libraries #7662

ismoiliy98 · 2022-04-10T09:09:28Z

Describe the bug

I am using vite with preact-ts preset. Tried to install a react-specific library (chakra-ui). In development everything is okay, I can see chakra-ui components on the page, but when I am trying to build the project it fails with a lot of errors related to react import statement.

I tried to add aliases into vite.config.ts file as described in #1466, but it didn't help

resolve: {
    alias: {
      react: 'preact/compat',
      'react-dom': 'preact/compat',
    },
  },

Is there any workaround for this situation?

Reproduction

https://github.com/Geebrox/vite-preact-chakra

System Info

  System:
    OS: macOS 12.3.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 95.89 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.0/bin/yarn
    npm: 8.1.3 - ~/.nvm/versions/node/v16.13.0/bin/npm
  Browsers:
    Chrome: 100.0.4896.75
    Safari: 15.4

Used Package Manager

yarn

Logs

...
node_modules/framer-motion/types/render/dom/motion-proxy.d.ts:1:24 - error TS2307: Cannot find module 'react' or its corresponding type declarations.

1 import * as React from "react";
                         ~~~~~~~

node_modules/framer-motion/types/render/dom/motion.d.ts:1:23 - error TS2688: Cannot find type definition file for 'react'.

1 /// <reference types="react" />
                        ~~~~~

node_modules/framer-motion/types/render/dom/motion.d.ts:9:66 - error TS2307: Cannot find module 'react' or its corresponding type declarations.

9 export declare const motion: (<Props>(Component: string | import("react").ComponentType<Props>, customMotionComponentConfig?: import("./motion-proxy").CustomMotionComponentConfig) => import("./motion-proxy").CustomDomComponent<Props>) & import("../html/types").HTMLMotionComponents & import("../svg/types").SVGMotionComponents;
                                                                   ~~~~~~~

node_modules/framer-motion/types/render/html/types.d.ts:2:123 - error TS2307: Cannot find module 'react' or its corresponding type declarations.

2 import { DetailedHTMLFactory, ForwardRefExoticComponent, HTMLAttributes, PropsWithoutRef, ReactHTML, RefAttributes } from "react";
                                                                                                                            ~~~~~~~

node_modules/framer-motion/types/render/html/types.d.ts:52:150 - error TS2344: Type 'unknown' does not satisfy the constraint 'HTMLElement'.

52 export declare type HTMLMotionProps<TagName extends keyof ReactHTML> = HTMLAttributesWithoutMotionProps<UnwrapFactoryAttributes<ReactHTML[TagName]>, UnwrapFactoryElement<ReactHTML[TagName]>> & MotionProps;
                                                                                                                                                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/framer-motion/types/render/svg/types.d.ts:2:31 - error TS2307: Cannot find module 'react' or its corresponding type declarations.

2 import { SVGAttributes } from "react";
                                ~~~~~~~

node_modules/framer-motion/types/render/svg/types.d.ts:30:53 - error TS2833: Cannot find namespace 'React'. Did you mean 'preact'?

30 declare type UnwrapSVGFactoryElement<F> = F extends React.SVGProps<infer P> ? P : never;
                                                       ~~~~~

node_modules/framer-motion/types/render/svg/types.d.ts:42:69 - error TS2536: Type 'K' cannot be used to index type 'IntrinsicElements'.

42     [K in SVGElements]: ForwardRefComponent<UnwrapSVGFactoryElement<JSX.IntrinsicElements[K]>, SVGMotionProps<UnwrapSVGFactoryElement<JSX.IntrinsicElements[K]>>>;
                                                                       ~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/framer-motion/types/render/svg/types.d.ts:42:135 - error TS2536: Type 'K' cannot be used to index type 'IntrinsicElements'.

42     [K in SVGElements]: ForwardRefComponent<UnwrapSVGFactoryElement<JSX.IntrinsicElements[K]>, SVGMotionProps<UnwrapSVGFactoryElement<JSX.IntrinsicElements[K]>>>;
                                                                                                                                         ~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/framer-motion/types/render/types.d.ts:1:24 - error TS2307: Cannot find module 'react' or its corresponding type declarations.

1 import * as React from "react";
                         ~~~~~~~

node_modules/framer-motion/types/render/utils/setters.d.ts:1:23 - error TS2688: Cannot find type definition file for 'react'.

1 /// <reference types="react" />
                        ~~~~~

node_modules/framer-motion/types/render/utils/setters.d.ts:792:12 - error TS2307: Cannot find module 'react' or its corresponding type declarations.

792 } & import("react").SVGAttributes<SVGElement> & import("../../motion/types").TransformProperties & import("../../motion/types").CustomStyles & import("../../motion/types").SVGPathProperties>;
               ~~~~~~~

node_modules/framer-motion/types/types.d.ts:1:46 - error TS2307: Cannot find module 'react' or its corresponding type declarations.

1 import { CSSProperties, SVGAttributes } from "react";
                                               ~~~~~~~

node_modules/framer-motion/types/utils/use-isomorphic-effect.d.ts:1:27 - error TS2307: Cannot find module 'react' or its corresponding type declarations.

1 import { useEffect } from "react";
                            ~~~~~~~

node_modules/framer-motion/types/value/scroll/use-element-scroll.d.ts:1:27 - error TS2307: Cannot find module 'react' or its corresponding type declarations.

1 import { RefObject } from "react";
                            ~~~~~~~


Found 188 errors in 140 files.

Errors  Files
     1  node_modules/@chakra-ui/accordion/dist/declarations/src/accordion.d.ts:5
     1  node_modules/@chakra-ui/accordion/dist/declarations/src/use-accordion.d.ts:2
     1  node_modules/@chakra-ui/alert/dist/declarations/src/alert.d.ts:2
     1  node_modules/@chakra-ui/avatar/dist/declarations/src/avatar-group.d.ts:2
     1  node_modules/@chakra-ui/avatar/dist/declarations/src/avatar.d.ts:2
     1  node_modules/@chakra-ui/breadcrumb/dist/declarations/src/breadcrumb.d.ts:2
     1  node_modules/@chakra-ui/button/dist/declarations/src/button-spinner.d.ts:2
     1  node_modules/@chakra-ui/button/dist/declarations/src/button.d.ts:2
     1  node_modules/@chakra-ui/button/dist/declarations/src/icon-button.d.ts:1
     1  node_modules/@chakra-ui/checkbox/dist/declarations/src/checkbox-group.d.ts:2
     3  node_modules/@chakra-ui/checkbox/dist/declarations/src/checkbox.d.ts:3
     2  node_modules/@chakra-ui/checkbox/dist/declarations/src/use-checkbox-group.d.ts:2
     1  node_modules/@chakra-ui/checkbox/dist/declarations/src/use-checkbox.d.ts:2
     1  node_modules/@chakra-ui/clickable/dist/declarations/src/use-clickable.d.ts:1
     1  node_modules/@chakra-ui/color-mode/dist/declarations/src/color-mode-provider.d.ts:1
     1  node_modules/@chakra-ui/color-mode/dist/declarations/src/color-mode-script.d.ts:1
     1  node_modules/@chakra-ui/control-box/dist/declarations/src/control-box.d.ts:2
     2  node_modules/@chakra-ui/counter/dist/declarations/src/use-counter.d.ts:1
     1  node_modules/@chakra-ui/css-reset/dist/declarations/src/css-reset.d.ts:1
     2  node_modules/@chakra-ui/descendant/dist/declarations/src/use-descendant.d.ts:1
     6  node_modules/@chakra-ui/descendant/src/use-descendant.ts:2
     1  node_modules/@chakra-ui/descendant/src/utils.ts:1
     1  node_modules/@chakra-ui/focus-lock/dist/declarations/src/index.d.ts:1
     1  node_modules/@chakra-ui/form-control/dist/declarations/src/form-control.d.ts:3
     1  node_modules/@chakra-ui/form-control/dist/declarations/src/form-label.d.ts:2
     5  node_modules/@chakra-ui/form-control/dist/declarations/src/use-form-control.d.ts:1
     1  node_modules/@chakra-ui/hooks/dist/declarations/src/use-animation-state.d.ts:1
     1  node_modules/@chakra-ui/hooks/dist/declarations/src/use-callback-ref.d.ts:1
     1  node_modules/@chakra-ui/hooks/dist/declarations/src/use-controllable.d.ts:1
     1  node_modules/@chakra-ui/hooks/dist/declarations/src/use-dimensions.d.ts:1
     1  node_modules/@chakra-ui/hooks/dist/declarations/src/use-event-callback.d.ts:1
     1  node_modules/@chakra-ui/hooks/dist/declarations/src/use-focus-effect.d.ts:1
     1  node_modules/@chakra-ui/hooks/dist/declarations/src/use-focus-on-hide.d.ts:2
     1  node_modules/@chakra-ui/hooks/dist/declarations/src/use-focus-on-pointerdown.d.ts:1
     1  node_modules/@chakra-ui/hooks/dist/declarations/src/use-focus-on-show.d.ts:2
     1  node_modules/@chakra-ui/hooks/dist/declarations/src/use-id.d.ts:1
     1  node_modules/@chakra-ui/hooks/dist/declarations/src/use-latest-ref.d.ts:1
     1  node_modules/@chakra-ui/hooks/dist/declarations/src/use-merge-refs.d.ts:1
     1  node_modules/@chakra-ui/hooks/dist/declarations/src/use-mouse-down-ref.d.ts:1
     1  node_modules/@chakra-ui/hooks/dist/declarations/src/use-outside-click.d.ts:1
     1  node_modules/@chakra-ui/hooks/dist/declarations/src/use-pan-gesture.d.ts:2
     1  node_modules/@chakra-ui/hooks/dist/declarations/src/use-safe-layout-effect.d.ts:1
     1  node_modules/@chakra-ui/hooks/dist/declarations/src/use-shortcut.d.ts:1
     1  node_modules/@chakra-ui/hooks/dist/declarations/src/use-update-effect.d.ts:1
     1  node_modules/@chakra-ui/icon/dist/declarations/src/create-icon.d.ts:1
     1  node_modules/@chakra-ui/icon/dist/declarations/src/icon.d.ts:2
     2  node_modules/@chakra-ui/image/dist/declarations/src/image.d.ts:2
     1  node_modules/@chakra-ui/image/dist/declarations/src/use-image.d.ts:1
     1  node_modules/@chakra-ui/layout/dist/declarations/src/stack.d.ts:2
     1  node_modules/@chakra-ui/media-query/dist/declarations/src/media-query.d.ts:1
     1  node_modules/@chakra-ui/menu/dist/declarations/src/menu.d.ts:3
     3  node_modules/@chakra-ui/menu/dist/declarations/src/use-menu.d.ts:4
     1  node_modules/@chakra-ui/modal/dist/declarations/src/alert-dialog.d.ts:1
     1  node_modules/@chakra-ui/modal/dist/declarations/src/drawer.d.ts:1
     1  node_modules/@chakra-ui/modal/dist/declarations/src/modal.d.ts:7
     3  node_modules/@chakra-ui/modal/dist/declarations/src/use-modal.d.ts:2
     1  node_modules/@chakra-ui/number-input/dist/declarations/src/use-number-input.d.ts:4
     1  node_modules/@chakra-ui/pin-input/dist/declarations/src/pin-input.d.ts:2
     1  node_modules/@chakra-ui/pin-input/dist/declarations/src/use-pin-input.d.ts:1
     2  node_modules/@chakra-ui/popover/dist/declarations/src/popover-context.d.ts:1
     1  node_modules/@chakra-ui/popover/dist/declarations/src/popover-transition.d.ts:3
     1  node_modules/@chakra-ui/popover/dist/declarations/src/popover.d.ts:4
     1  node_modules/@chakra-ui/popover/dist/declarations/src/use-popover.d.ts:4
     1  node_modules/@chakra-ui/portal/dist/declarations/src/portal-manager.d.ts:1
     1  node_modules/@chakra-ui/portal/dist/declarations/src/portal.d.ts:1
     1  node_modules/@chakra-ui/progress/dist/declarations/src/circular-progress.d.ts:3
     1  node_modules/@chakra-ui/progress/dist/declarations/src/progress.d.ts:2
     1  node_modules/@chakra-ui/provider/dist/declarations/src/chakra-provider.d.ts:4
     1  node_modules/@chakra-ui/radio/dist/declarations/src/radio-group.d.ts:2
     1  node_modules/@chakra-ui/radio/dist/declarations/src/radio.d.ts:2
     1  node_modules/@chakra-ui/radio/dist/declarations/src/use-radio-group.d.ts:2
     1  node_modules/@chakra-ui/radio/dist/declarations/src/use-radio.d.ts:2
     1  node_modules/@chakra-ui/react-env/dist/declarations/src/env.d.ts:1
     1  node_modules/@chakra-ui/react-utils/dist/declarations/src/children.d.ts:1
     1  node_modules/@chakra-ui/react-utils/dist/declarations/src/context.d.ts:1
     4  node_modules/@chakra-ui/react-utils/dist/declarations/src/refs.d.ts:1
     1  node_modules/@chakra-ui/react-utils/dist/declarations/src/types.d.ts:2
     2  node_modules/@chakra-ui/react/dist/declarations/src/chakra-provider.d.ts:1
     1  node_modules/@chakra-ui/select/dist/declarations/src/select.d.ts:3
     1  node_modules/@chakra-ui/skeleton/dist/declarations/src/skeleton.d.ts:2
     1  node_modules/@chakra-ui/slider/dist/declarations/src/range-slider.d.ts:2
     1  node_modules/@chakra-ui/slider/dist/declarations/src/slider.d.ts:2
     2  node_modules/@chakra-ui/slider/dist/declarations/src/use-range-slider.d.ts:1
     1  node_modules/@chakra-ui/stat/dist/declarations/src/stat.d.ts:3
     1  node_modules/@chakra-ui/system/dist/declarations/src/forward-ref.d.ts:5
     1  node_modules/@chakra-ui/system/dist/declarations/src/providers.d.ts:4
     1  node_modules/@chakra-ui/system/dist/declarations/src/system.types.d.ts:4
     1  node_modules/@chakra-ui/system/dist/declarations/src/system.utils.d.ts:1
     1  node_modules/@chakra-ui/tabs/dist/declarations/src/tabs.d.ts:2
     1  node_modules/@chakra-ui/tabs/dist/declarations/src/use-tabs.d.ts:3
     1  node_modules/@chakra-ui/tag/dist/declarations/src/tag.d.ts:3
     1  node_modules/@chakra-ui/theme-tools/dist/declarations/src/component.d.ts:1
     3  node_modules/@chakra-ui/toast/dist/declarations/src/toast.types.d.ts:1
     1  node_modules/@chakra-ui/toast/dist/declarations/src/use-toast.d.ts:3
     1  node_modules/@chakra-ui/tooltip/dist/declarations/src/tooltip.d.ts:3
     1  node_modules/@chakra-ui/transition/dist/declarations/src/collapse.d.ts:2
     1  node_modules/@chakra-ui/transition/dist/declarations/src/fade.d.ts:2
     1  node_modules/@chakra-ui/transition/dist/declarations/src/scale-fade.d.ts:2
     1  node_modules/@chakra-ui/transition/dist/declarations/src/slide-fade.d.ts:2
     1  node_modules/@chakra-ui/transition/dist/declarations/src/slide.d.ts:2
     1  node_modules/@chakra-ui/visually-hidden/dist/declarations/src/visually-hidden.d.ts:1
     1  node_modules/@emotion/react/types/helper.d.ts:1
     1  node_modules/@emotion/react/types/index.d.ts:24
     1  node_modules/@emotion/react/types/jsx-namespace.d.ts:18
     1  node_modules/@emotion/react/types/theming.d.ts:4
     4  node_modules/@emotion/styled/types/base.d.ts:4
     1  node_modules/@emotion/styled/types/index.d.ts:22
     1  node_modules/framer-motion/types/components/AnimatePresence/index.d.ts:1
     1  node_modules/framer-motion/types/components/AnimateSharedLayout.d.ts:1
     1  node_modules/framer-motion/types/components/LayoutGroup/index.d.ts:1
     2  node_modules/framer-motion/types/components/LazyMotion/types.d.ts:1
     1  node_modules/framer-motion/types/components/MotionConfig/index.d.ts:1
     2  node_modules/framer-motion/types/components/Reorder/Group.d.ts:1
     3  node_modules/framer-motion/types/components/Reorder/index.d.ts:1
     2  node_modules/framer-motion/types/components/Reorder/Item.d.ts:1
     2  node_modules/framer-motion/types/context/DeprecatedLayoutGroupContext.d.ts:1
     2  node_modules/framer-motion/types/context/LayoutGroupContext.d.ts:1
     2  node_modules/framer-motion/types/context/MotionConfigContext.d.ts:1
     2  node_modules/framer-motion/types/context/MotionContext/index.d.ts:1
     2  node_modules/framer-motion/types/context/PresenceContext.d.ts:1
     2  node_modules/framer-motion/types/context/SwitchLayoutGroupContext.d.ts:1
     1  node_modules/framer-motion/types/events/types.d.ts:1
     1  node_modules/framer-motion/types/events/use-dom-event.d.ts:1
     1  node_modules/framer-motion/types/events/use-pointer-event.d.ts:1
     1  node_modules/framer-motion/types/gestures/drag/types.d.ts:1
     1  node_modules/framer-motion/types/gestures/drag/use-drag-controls.d.ts:1
     1  node_modules/framer-motion/types/motion/features/types.d.ts:1
     1  node_modules/framer-motion/types/motion/features/viewport/types.d.ts:1
     1  node_modules/framer-motion/types/motion/index.d.ts:1
     1  node_modules/framer-motion/types/motion/types.d.ts:1
     2  node_modules/framer-motion/types/render/dom/motion-minimal.d.ts:1
     1  node_modules/framer-motion/types/render/dom/motion-proxy.d.ts:1
     2  node_modules/framer-motion/types/render/dom/motion.d.ts:1
     2  node_modules/framer-motion/types/render/html/types.d.ts:2
     4  node_modules/framer-motion/types/render/svg/types.d.ts:2
     1  node_modules/framer-motion/types/render/types.d.ts:1
     2  node_modules/framer-motion/types/render/utils/setters.d.ts:1
     1  node_modules/framer-motion/types/types.d.ts:1
     1  node_modules/framer-motion/types/utils/use-isomorphic-effect.d.ts:1
     1  node_modules/framer-motion/types/value/scroll/use-element-scroll.d.ts:1

Validations

Follow our Code of Conduct
Read the Contributing Guidelines.
Read the docs.
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
The provided reproduction is a minimal reproducible example of the bug.

The text was updated successfully, but these errors were encountered:

bluwy · 2022-04-11T06:34:38Z

The error is coming from tsc before running vite build. I tried installing @types/react too but that doesn't seem to help. Setting skipLibCheck: true in tsconfig.json help suppressed the errors though, but I'm not sure if that's the right way to fix them.

patak-dev · 2022-04-11T13:06:45Z

Maybe this is a good issue to report in https://github.com/preactjs/preset-vite?

bluwy · 2022-04-14T08:12:20Z

Note to workaround this, you can install both @types/react and @types/react-dom as dev dependencies, and also set skipLibCheck: true

ismoiliy98 · 2022-04-14T09:45:33Z

Note to workaround this, you can install both @types/react and @types/react-dom as dev dependencies, and also set skipLibCheck: true

Yes, it works thanks. I mentioned this issue in https://github.com/preactjs/preset-vite
Perhaps they can provide a better way to solve this problem. I think this question can be closed here.

sapphi-red · 2022-04-14T10:18:36Z

I have found some related issues preactjs/preact#2150, preactjs/preact#2222.
#7726 (comment)

(Double posting it for users who found this issue later.)

ismoiliy98 added the pending triage label Apr 10, 2022

ismoiliy98 mentioned this issue Apr 12, 2022

preact-ts preset with react specific libraries preactjs/preset-vite#45

Closed

bluwy mentioned this issue Apr 14, 2022

chore(create-vite): set skipLibCheck true #7726

Merged

9 tasks

ismoiliy98 closed this as completed Apr 14, 2022

github-actions bot locked and limited conversation to collaborators Apr 29, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

preact-ts preset with react specific libraries #7662

preact-ts preset with react specific libraries #7662

ismoiliy98 commented Apr 10, 2022 •

edited

Loading

bluwy commented Apr 11, 2022

patak-dev commented Apr 11, 2022

bluwy commented Apr 14, 2022

ismoiliy98 commented Apr 14, 2022

sapphi-red commented Apr 14, 2022

preact-ts preset with react specific libraries #7662

preact-ts preset with react specific libraries #7662

Comments

ismoiliy98 commented Apr 10, 2022 • edited Loading

Describe the bug

Reproduction

System Info

Used Package Manager

Logs

Validations

bluwy commented Apr 11, 2022

patak-dev commented Apr 11, 2022

bluwy commented Apr 14, 2022

ismoiliy98 commented Apr 14, 2022

sapphi-red commented Apr 14, 2022

ismoiliy98 commented Apr 10, 2022 •

edited

Loading