[BUG] React import errors in Cloudflare
bairdj opened this issue · 8 comments
bairdj commented
1. Read the FAQs 👇
2. Describe the bug
When migrating from "framer-motion" to "motion", build errors are encountered in Cloudflare wrangler related to React imports. This only occurs when using wrangler on Cloudflare - the build works as expected when building locally using Vite.
"../node_modules/motion/src/react.ts" for import "useInsertionEffect" suggests is resolving from react.ts rather than react package. This may be a Wrangler issue as it builds as expected on Vite, but framer-motion worked with the exact same configuration which suggests there may be an issue with some configuration in motion.
3. IMPORTANT: Provide a CodeSandbox reproduction of the bug
https://codesandbox.io/p/devbox/yh6ynm
4. Steps to reproduce
Steps to reproduce the behavior:
- Create a project using Remix Cloudflare template
- In a route, `import { motion } from "motion/react"
npm run buildnpm run start- Import error received
➜ workspace git:(main) ✗ npm run start
> start
> wrangler pages dev ./build/client
⛅️ wrangler 3.91.0
-------------------
▲ [WARNING] No compatibility_date was specified. Using today's date: 2024-12-01.
❯❯ Add one to your Wrangler configuration file: compatibility_date = "2024-12-01", or
❯❯ Pass it in your terminal: wrangler pages dev [<DIRECTORY>] --compatibility-date=2024-12-01
See https://developers.cloudflare.com/workers/platform/compatibility-dates/ for more information.
✘ [ERROR] Build failed with 88 errors:
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useState"
../node_modules/motion/dist/es/framer-motion/dist/es/animation/hooks/use-animated-state.mjs:1:9:
1 │ import { useState, useLayoutEffect } from 'react';
╵ ~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useLayoutEffect"
../node_modules/motion/dist/es/framer-motion/dist/es/animation/hooks/use-animated-state.mjs:1:19:
1 │ import { useState, useLayoutEffect } from 'react';
╵ ~~~~~~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useId"
../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs:4:9:
4 │ import { useId, useRef, useContext, useInsertionEffect } from 'react';
╵ ~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useRef"
../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs:4:16:
4 │ import { useId, useRef, useContext, useInsertionEffect } from 'react';
╵ ~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useContext"
../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs:4:24:
4 │ import { useId, useRef, useContext, useInsertionEffect } from 'react';
╵ ~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useInsertionEffect"
../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs:4:36:
4 │ import { useId, useRef, useContext, useInsertionEffect } from 'react';
╵ ~~~~~~~~~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useId"
../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs:4:9:
4 │ import { useId, useCallback, useMemo } from 'react';
╵ ~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useCallback"
../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs:4:16:
4 │ import { useId, useCallback, useMemo } from 'react';
╵ ~~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useMemo"
../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs:4:29:
4 │ import { useId, useCallback, useMemo } from 'react';
╵ ~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useMemo"
../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/index.mjs:3:9:
3 │ import { useMemo, useRef, useState, useContext } from 'react';
╵ ~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useRef"
../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/index.mjs:3:18:
3 │ import { useMemo, useRef, useState, useContext } from 'react';
╵ ~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useState"
../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/index.mjs:3:26:
3 │ import { useMemo, useRef, useState, useContext } from 'react';
╵ ~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useContext"
../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/index.mjs:3:36:
3 │ import { useMemo, useRef, useState, useContext } from 'react';
╵ ~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useContext"
../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs:1:9:
1 │ import { useContext, useId, useEffect, useCallback } from 'react';
╵ ~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useId"
../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs:1:21:
1 │ import { useContext, useId, useEffect, useCallback } from 'react';
╵ ~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useEffect"
../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs:1:28:
1 │ import { useContext, useId, useEffect, useCallback } from 'react';
╵ ~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useCallback"
../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs:1:39:
1 │ import { useContext, useId, useEffect, useCallback } from 'react';
╵ ~~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "Children"
../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/utils.mjs:1:9:
1 │ import { Children, isValidElement } from 'react';
╵ ~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "isValidElement"
../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/utils.mjs:1:19:
1 │ import { Children, isValidElement } from 'react';
╵ ~~~~~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useContext"
../node_modules/motion/dist/es/framer-motion/dist/es/components/LayoutGroup/index.mjs:3:9:
3 │ import { useContext, useRef, useMemo } from 'react';
╵ ~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useRef"
../node_modules/motion/dist/es/framer-motion/dist/es/components/LayoutGroup/index.mjs:3:21:
3 │ import { useContext, useRef, useMemo } from 'react';
╵ ~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useMemo"
../node_modules/motion/dist/es/framer-motion/dist/es/components/LayoutGroup/index.mjs:3:29:
3 │ import { useContext, useRef, useMemo } from 'react';
╵ ~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useState"
../node_modules/motion/dist/es/framer-motion/dist/es/components/LazyMotion/index.mjs:3:9:
3 │ import { useState, useRef, useEffect } from 'react';
╵ ~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useRef"
../node_modules/motion/dist/es/framer-motion/dist/es/components/LazyMotion/index.mjs:3:19:
3 │ import { useState, useRef, useEffect } from 'react';
╵ ~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useEffect"
../node_modules/motion/dist/es/framer-motion/dist/es/components/LazyMotion/index.mjs:3:27:
3 │ import { useState, useRef, useEffect } from 'react';
╵ ~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useContext"
../node_modules/motion/dist/es/framer-motion/dist/es/components/MotionConfig/index.mjs:3:9:
3 │ import { useContext, useMemo } from 'react';
╵ ~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useMemo"
../node_modules/motion/dist/es/framer-motion/dist/es/components/MotionConfig/index.mjs:3:21:
3 │ import { useContext, useMemo } from 'react';
╵ ~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "forwardRef"
../node_modules/motion/dist/es/framer-motion/dist/es/components/Reorder/Group.mjs:4:9:
4 │ import { forwardRef, useRef, useEffect } from 'react';
╵ ~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useRef"
../node_modules/motion/dist/es/framer-motion/dist/es/components/Reorder/Group.mjs:4:21:
4 │ import { forwardRef, useRef, useEffect } from 'react';
╵ ~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useEffect"
../node_modules/motion/dist/es/framer-motion/dist/es/components/Reorder/Group.mjs:4:29:
4 │ import { forwardRef, useRef, useEffect } from 'react';
╵ ~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "forwardRef"
../node_modules/motion/dist/es/framer-motion/dist/es/components/Reorder/Item.mjs:4:9:
4 │ import { forwardRef, useContext } from 'react';
╵ ~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useContext"
../node_modules/motion/dist/es/framer-motion/dist/es/components/Reorder/Item.mjs:4:21:
4 │ import { forwardRef, useContext } from 'react';
╵ ~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "createContext"
../node_modules/motion/dist/es/framer-motion/dist/es/context/DeprecatedLayoutGroupContext.mjs:1:9:
1 │ import { createContext } from 'react';
╵ ~~~~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "createContext"
../node_modules/motion/dist/es/framer-motion/dist/es/context/LayoutGroupContext.mjs:2:9:
2 │ import { createContext } from 'react';
╵ ~~~~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "createContext"
../node_modules/motion/dist/es/framer-motion/dist/es/context/LazyContext.mjs:2:9:
2 │ import { createContext } from 'react';
╵ ~~~~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "createContext"
../node_modules/motion/dist/es/framer-motion/dist/es/context/MotionConfigContext.mjs:2:9:
2 │ import { createContext } from 'react';
╵ ~~~~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useContext"
../node_modules/motion/dist/es/framer-motion/dist/es/context/MotionContext/create.mjs:1:9:
1 │ import { useContext, useMemo } from 'react';
╵ ~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useMemo"
../node_modules/motion/dist/es/framer-motion/dist/es/context/MotionContext/create.mjs:1:21:
1 │ import { useContext, useMemo } from 'react';
╵ ~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "createContext"
../node_modules/motion/dist/es/framer-motion/dist/es/context/MotionContext/index.mjs:2:9:
2 │ import { createContext } from 'react';
╵ ~~~~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "createContext"
../node_modules/motion/dist/es/framer-motion/dist/es/context/PresenceContext.mjs:2:9:
2 │ import { createContext } from 'react';
╵ ~~~~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "createContext"
../node_modules/motion/dist/es/framer-motion/dist/es/context/ReorderContext.mjs:2:9:
2 │ import { createContext } from 'react';
╵ ~~~~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "createContext"
../node_modules/motion/dist/es/framer-motion/dist/es/context/SwitchLayoutGroupContext.mjs:2:9:
2 │ import { createContext } from 'react';
╵ ~~~~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useEffect"
../node_modules/motion/dist/es/framer-motion/dist/es/events/use-dom-event.mjs:1:9:
1 │ import { useEffect } from 'react';
╵ ~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useContext"
../node_modules/motion/dist/es/framer-motion/dist/es/motion/features/layout/MeasureLayout.mjs:3:9:
3 │ import { useContext, Component } from 'react';
╵ ~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "Component"
../node_modules/motion/dist/es/framer-motion/dist/es/motion/features/layout/MeasureLayout.mjs:3:21:
3 │ import { useContext, Component } from 'react';
╵ ~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "forwardRef"
../node_modules/motion/dist/es/framer-motion/dist/es/motion/index.mjs:3:9:
3 │ import { forwardRef, useContext } from 'react';
╵ ~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useContext"
../node_modules/motion/dist/es/framer-motion/dist/es/motion/index.mjs:3:21:
3 │ import { forwardRef, useContext } from 'react';
╵ ~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useCallback"
../node_modules/motion/dist/es/framer-motion/dist/es/motion/utils/use-motion-ref.mjs:1:9:
1 │ import { useCallback } from 'react';
╵ ~~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useContext"
../node_modules/motion/dist/es/framer-motion/dist/es/motion/utils/use-visual-element.mjs:1:9:
1 │ import { useContext, useRef, useInsertionEffect, useEffect } from '...
╵ ~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useRef"
../node_modules/motion/dist/es/framer-motion/dist/es/motion/utils/use-visual-element.mjs:1:21:
1 │ import { useContext, useRef, useInsertionEffect, useEffect } from '...
╵ ~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useInsertionEffect"
../node_modules/motion/dist/es/framer-motion/dist/es/motion/utils/use-visual-element.mjs:1:29:
1 │ ... { useContext, useRef, useInsertionEffect, useEffect } from 'rea...
╵ ~~~~~~~~~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useEffect"
../node_modules/motion/dist/es/framer-motion/dist/es/motion/utils/use-visual-element.mjs:1:49:
1 │ ...{ useContext, useRef, useInsertionEffect, useEffect } from 'react';
╵ ~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useContext"
../node_modules/motion/dist/es/framer-motion/dist/es/motion/utils/use-visual-state.mjs:1:9:
1 │ import { useContext } from 'react';
╵ ~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useCallback"
../node_modules/motion/dist/es/framer-motion/dist/es/projection/use-reset-projection.mjs:1:9:
1 │ import { useCallback } from 'react';
╵ ~~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "Fragment"
../node_modules/motion/dist/es/framer-motion/dist/es/render/dom/create-visual-element.mjs:1:9:
1 │ import { Fragment } from 'react';
╵ ~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "Fragment"
../node_modules/motion/dist/es/framer-motion/dist/es/render/dom/use-render.mjs:1:9:
1 │ import { Fragment, useMemo, createElement } from 'react';
╵ ~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useMemo"
../node_modules/motion/dist/es/framer-motion/dist/es/render/dom/use-render.mjs:1:19:
1 │ import { Fragment, useMemo, createElement } from 'react';
╵ ~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "createElement"
../node_modules/motion/dist/es/framer-motion/dist/es/render/dom/use-render.mjs:1:28:
1 │ import { Fragment, useMemo, createElement } from 'react';
╵ ~~~~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useMemo"
../node_modules/motion/dist/es/framer-motion/dist/es/render/html/use-props.mjs:1:9:
1 │ import { useMemo } from 'react';
╵ ~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useMemo"
../node_modules/motion/dist/es/framer-motion/dist/es/render/svg/use-props.mjs:1:9:
1 │ import { useMemo } from 'react';
╵ ~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useContext"
../node_modules/motion/dist/es/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion-config.mjs:1:9:
1 │ import { useContext } from 'react';
╵ ~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useState"
../node_modules/motion/dist/es/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.mjs:1:9:
1 │ import { useState } from 'react';
╵ ~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useRef"
../node_modules/motion/dist/es/framer-motion/dist/es/utils/use-animation-frame.mjs:1:9:
1 │ import { useRef, useContext, useEffect } from 'react';
╵ ~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useContext"
../node_modules/motion/dist/es/framer-motion/dist/es/utils/use-animation-frame.mjs:1:17:
1 │ import { useRef, useContext, useEffect } from 'react';
╵ ~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useEffect"
../node_modules/motion/dist/es/framer-motion/dist/es/utils/use-animation-frame.mjs:1:29:
1 │ import { useRef, useContext, useEffect } from 'react';
╵ ~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useRef"
../node_modules/motion/dist/es/framer-motion/dist/es/utils/use-constant.mjs:1:9:
1 │ import { useRef } from 'react';
╵ ~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useRef"
../node_modules/motion/dist/es/framer-motion/dist/es/utils/use-cycle.mjs:1:9:
1 │ import { useRef, useState, useCallback } from 'react';
╵ ~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useState"
../node_modules/motion/dist/es/framer-motion/dist/es/utils/use-cycle.mjs:1:17:
1 │ import { useRef, useState, useCallback } from 'react';
╵ ~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useCallback"
../node_modules/motion/dist/es/framer-motion/dist/es/utils/use-cycle.mjs:1:27:
1 │ import { useRef, useState, useCallback } from 'react';
╵ ~~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useState"
../node_modules/motion/dist/es/framer-motion/dist/es/utils/use-force-update.mjs:1:9:
1 │ import { useState, useCallback } from 'react';
╵ ~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useCallback"
../node_modules/motion/dist/es/framer-motion/dist/es/utils/use-force-update.mjs:1:19:
1 │ import { useState, useCallback } from 'react';
╵ ~~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useState"
../node_modules/motion/dist/es/framer-motion/dist/es/utils/use-in-view.mjs:1:9:
1 │ import { useState, useEffect } from 'react';
╵ ~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useEffect"
../node_modules/motion/dist/es/framer-motion/dist/es/utils/use-in-view.mjs:1:19:
1 │ import { useState, useEffect } from 'react';
╵ ~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useRef"
../node_modules/motion/dist/es/framer-motion/dist/es/utils/use-instant-transition.mjs:1:9:
1 │ import { useRef, useEffect } from 'react';
╵ ~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useEffect"
../node_modules/motion/dist/es/framer-motion/dist/es/utils/use-instant-transition.mjs:1:17:
1 │ import { useRef, useEffect } from 'react';
╵ ~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useRef"
../node_modules/motion/dist/es/framer-motion/dist/es/utils/use-is-mounted.mjs:1:9:
1 │ import { useRef } from 'react';
╵ ~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useLayoutEffect"
../node_modules/motion/dist/es/framer-motion/dist/es/utils/use-isomorphic-effect.mjs:1:9:
1 │ import { useLayoutEffect, useEffect } from 'react';
╵ ~~~~~~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useEffect"
../node_modules/motion/dist/es/framer-motion/dist/es/utils/use-isomorphic-effect.mjs:1:26:
1 │ import { useLayoutEffect, useEffect } from 'react';
╵ ~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useInsertionEffect"
../node_modules/motion/dist/es/framer-motion/dist/es/utils/use-motion-value-event.mjs:1:9:
1 │ import { useInsertionEffect } from 'react';
╵ ~~~~~~~~~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useEffect"
../node_modules/motion/dist/es/framer-motion/dist/es/utils/use-unmount-effect.mjs:1:9:
1 │ import { useEffect } from 'react';
╵ ~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useContext"
../node_modules/motion/dist/es/framer-motion/dist/es/value/use-inverted-scale.mjs:5:9:
5 │ import { useContext } from 'react';
╵ ~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useContext"
../node_modules/motion/dist/es/framer-motion/dist/es/value/use-motion-value.mjs:1:9:
1 │ import { useContext, useState, useEffect } from 'react';
╵ ~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useState"
../node_modules/motion/dist/es/framer-motion/dist/es/value/use-motion-value.mjs:1:21:
1 │ import { useContext, useState, useEffect } from 'react';
╵ ~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useEffect"
../node_modules/motion/dist/es/framer-motion/dist/es/value/use-motion-value.mjs:1:31:
1 │ import { useContext, useState, useEffect } from 'react';
╵ ~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useEffect"
../node_modules/motion/dist/es/framer-motion/dist/es/value/use-scroll.mjs:3:9:
3 │ import { useEffect } from 'react';
╵ ~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useContext"
../node_modules/motion/dist/es/framer-motion/dist/es/value/use-spring.mjs:1:9:
1 │ import { useContext, useRef, useInsertionEffect } from 'react';
╵ ~~~~~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useRef"
../node_modules/motion/dist/es/framer-motion/dist/es/value/use-spring.mjs:1:21:
1 │ import { useContext, useRef, useInsertionEffect } from 'react';
╵ ~~~~~~
✘ [ERROR] No matching export in
"../node_modules/motion/src/react.ts" for import "useInsertionEffect"
../node_modules/motion/dist/es/framer-motion/dist/es/value/use-spring.mjs:1:29:
1 │ import { useContext, useRef, useInsertionEffect } from 'react';
╵ ~~~~~~~~~~~~~~~~~~
✘ [ERROR] Failed to build Functions at ./functions.
5. Expected behavior
Wrangler build works as expected.
If the import line is changed to `import { motion } from "framer-motion" it works as expected
6. Video or screenshots
Logs above
7. Environment details
See sandbox
RiskyMH commented
There is the same thing in bun oven-sh/bun#15614, and I found out it's because of the tsconfig.json at root. The issue was from baseUrl and bun resolving react from first there, so I wouldn't be surprised if Cloudflare was doing something similar.
0ctan33 commented
+1 same issue when trying to deploy to CF workers via react-router. Removing the baseUrl from the motion tsconfig.json when deploying seemed to temporarily fix this
thasmo commented
Experiencing the same and using the framer-motion package instead doesn't have this issue.
CanRau commented
Yea manually removing baseUrl in node_modules/motion/tsconfig.json lets me deploy to CF.
Also just saw that it's extending a tsconfig which isn't available when installed https://github.com/motiondivision/motion/blob/6cd8bda421eb6067412d589a66ee47bedefbd597/packages/motion/tsconfig.json#L2C5-L2C39
Should this tsconfig.json be in the npm package in the first place? (Been quite a while since I've published anything so not sure 😅)
mattgperry commented
0ctan33 commented
@mattgperry has been resolved. thank you
mattgperry commented
Awesome!
CanRau commented
Was on 12.0.0-alpha.2 before, and yes 11.14.4 works 👌🏼 thank you 🙏🏼