Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

preact-ts preset with react specific libraries

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
bluwycommented, Apr 14, 2022

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

1reaction
patak-devcommented, Apr 11, 2022

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Switching to Preact (from React)
There are two different approaches to switch from React to Preact: ... This one is simple: you'll need to install the library in...
Read more >
TypeScript | Preact: Fast 3kb React alternative with the same ...
Preact emits regular DOM events. As long as your TypeScript project includes the dom library (set it in tsconfig.json ), you have access...
Read more >
Switching to Preact (from React)
Everything you need to know to switch from React to Preact. ... allows you to leverage the many libraries of the React ecosystem...
Read more >
Libraries & Add-ons | Preact
: preact-island: Run your Preact widget on any website with reactive props. GUI Toolkits. @mui/material: the React UI library you always wanted. Follow ......
Read more >
Setup Preact with Webpack and Babel | by Heather Koo
How to Set Up a Preact Project with Babel and Webpack There is a tool “Preact CLI” to build a boilerplate code and...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

esbuild0.14.35 is not compate with vite

Next page

url() with variable or relative path in sass/scss is broken