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

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

[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! 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.