Seems like framer-motion fallback does not work with webpack 5

[Poolshark]

I have a pretty complex monorepo which I now just got working with Yarn 3 workspaces, webpack 5, craco and react-scripts. It's been an absolute nightmare so far and when I though I got it working, Chakra made problems.

I'm not entirely sure what causes the problem - it is nearly impossible to figure out which package is the trouble maker but I think I have narrowed it down to your implementation of framer_motion.motion.custom() (v3^) or framer_motion.motion() (v4^ | v5^ | v6^). I'm not sure what webpack does here but I guess it injects a placeholder for framer-motion and since I only have framer-motion v6^ it does not know what to do.

I get the error:

TypeError: framer_motion__WEBPACK_IMPORTED_MODULE_9__.motion.custom is not a function. (In 'framer_motion__WEBPACK_IMPORTED_MODULE_9__.motion.custom(_chakra_ui_system__WEBPACK_IMPORTED_MODULE_8__.chakra.div)', 'framer_motion__WEBPACK_IMPORTED_MODULE_9__.motion.custom' is an instance of Object)

And going through my bundled source I could find the affected line:

var MenuTransition = true ? framer_motion__WEBPACK_IMPORTED_MODULE_9__.motion.custom(_chakra_ui_system__WEBPACK_IMPORTED_MODULE_8__.chakra.div) : (0,framer_motion__WEBPACK_IMPORTED_MODULE_9__.motion)(_chakra_ui_system__WEBPACK_IMPORTED_MODULE_8__.chakra.div);

However, downgrading to framer-motion v3.10.6 solves the issue but I doubt that this is a good workaround.

Can anyone help? Is this a webpack error?

Chakra UI Version

NEWEST

Browser

Safari

Operating System

• macOS
• Windows
• Linux

[alexbchr]

Getting the exact same problem here when using Storybook 6.4.20 with Webpack 5.

[impaler]

Getting a similar error on a new install of @chakra-ui CRA template.

eg npx create-react-app my-chakra-app --template @chakra-ui/typescript

The just npm start you I get the same .custom is not a function runtime error thrown, looks like an upstream issue?

chakra-ui-checkbox.esm.js:146 Uncaught TypeError: framer_motion__WEBPACK_IMPORTED_MODULE_5__.motion.custom is not a function
    at Module../node_modules/@chakra-ui/checkbox/dist/chakra-ui-checkbox.esm.js (chakra-ui-checkbox.esm.js:146:1)
    at Module.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at Module../node_modules/@chakra-ui/react/dist/chakra-ui-react.esm.js (chakra-ui-react-utils.esm.js:91:1)
    at Module.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at Module../src/App.tsx (logo.svg:47:1)
    at Module.options.factory (react refresh:6:1)

Can confirm "framer-motion": "~3.10.6" resolves the error.

[ajereos-circadence]

it's crazy, this error keeps reoccurring

[lahlim]

I did a clear CRA install and installed Chakra and I have same issue there.

On existing projects downgrading to "framer-motion": "3.10.6" may causes some other console warnings in MotionComponent inside chakras Menu.

Any information on versions that work with newer framer-motion versions? 🚀

[Poolshark]

I guess the easiest would be to drop support for framer-motion v3.

[lahlim]

Found a better workaround if downgrading is not possible! 💥
Issue comes from webpack 5.71.0

react-scripts installs the newest version of webpack so you can create a resolution to older version.

Add following resolution to package.json
"resolutions": { "react-scripts/webpack": "5.70.0" },

Hope this will do until we get a proper fix! 🙃

[Poolshark]

Hey @lahlim! Thanks for the input!

Thanks! Works for now 👌

[mattari97]

Found a better workaround if downgrading is not possible! 💥 Issue comes from webpack 5.71.0

react-scripts installs the newest version of webpack so you can create a resolution to older version.

Add following resolution to package.json "resolutions": { "react-scripts/webpack": "5.70.0" },

Hope this will do until we get a proper fix! 🙃

Thank you
This was the fix for me since i could not downgrade framer-motion (used by react router v6 for transitions etc...)

[dhrjarun]

Found a better workaround if downgrading is not possible! 💥 Issue comes from webpack 5.71.0

react-scripts installs the newest version of webpack so you can create a resolution to older version.

Add following resolution to package.json "resolutions": { "react-scripts/webpack": "5.70.0" },

Hope this will do until we get a proper fix! 🙃

Thanks buddy

[Lysden]

Hi,

The webpack version modification did not work for us.

What we did involve two mods and add " && typeof motion.custom" :

• menu/dist/chakra-ui-menu.esm.js line 777
  var MenuTransition = "custom" in motion && typeof motion.custom == 'function' ? motion.custom(chakra.div) : motion(chakra.div);

• checkbox/dist/chakra-ui-checkbox.esm.js line 146
  var MotionSvg ="custom" in motion && typeof motion.custom == 'function' ? motion.custom(chakra.svg) : motion(chakra.svg);

[eli-s-r]

This seems to have been fixed in webpack 5.72.0? via webpack/webpack#15634

[JTBrinkmann]

I just ran a few tests, and upgrading either webpack to v5.72.0 (or 5.70.0 and below), or @chakra-ui/react to 1.8.8, (or both) fixes the issue. It is apparently not required to manually clear any cache. Note that @chakra-ui/react 1.8.8 only has a workaround, but does not fix the core issue, so you should upgrade webpack in any case because the bug also causes issues with other libraries or possibly your own code.

[JTBrinkmann]

This issue is a duplicate of #5804 and I think it can be closed now

[Poolshark]

Hey! Thanks for the input! Unfortunately this does not really work for me, I have updated and now get the error:

ERROR in ../../../.yarn/__virtual__/framer-motion-virtual-db281f3046/0/cache/framer-motion-npm-6.2.9-a9d36266d7-3ba830affd.zip/node_modules/framer-motion/dist/es/utils/process.mjs 9:25-32

BREAKING CHANGE: The request 'process/browser' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

Again it's framer-motion, this is really frustrating!

UPDATE

I have managed to get it working! 🙌 I'm not really sure what I'm doing anymore - literally randomly trying out things to get stuff working... What has happened to the JavaScript world? Almost every package I had was updated and resulted in breaking changes - I need a new job 🙈

Solution (at least for me):
Use Webpack's ProvidePlugin to resolve the missing variable process. I personally use Craco so I had to add to craco.config.js:

const webpack = require("webpack");

module.exports = {
  ...
  webpack: {
    plugins: {
      add: [new webpack.ProvidePlugin({ process: "process/browser.js" })]
    }
  }  
}

Don't forget to install process!

The key was to add .js to process/browser - guess this is the same if you use webpack only.

[lanxeon]

I had this issue on my nx 13 workspace too. I had to downgrade framer motion to 3.10.6, but does anyone know the workaround I would need for a non CRA project? My webpack version in the nx workspace is 5.58. So it does not make sense to have these issues.

[sleekLancelot]

Downgrading framer-motion to 3.10.6 results into more errors for me, from "can't resolve @zag-js/focus-visible" to "can't resolve aria-hidden" and so on. Still working on figuring out what the problem is.