[BUG] Bundling breaks in 6.2.9

I just noticed the bundling breaks in the latest version (6.2.9). I’ll follow this up with more details shortly.

[Poolshark]

I guess I have a similar problem. I have updated to webpack 5.72.0 and now I 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.

Framer motion version is v6.2.9

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 the craco.config.js:

const webpack = require("webpack");

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

Don’t forget to install via yarn add -D process

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

[matt-allan]

Here’s a more detailed error from Webpack:

ERROR in ../../node_modules/framer-motion/dist/es/utils/process.mjs 5:17-24
Module not found: Error: Can't resolve 'process/browser' in '/home/matt/code/my-project/node_modules/framer-motion/dist/es/utils'
Did you mean 'browser.js'?

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.

If you look at the file it’s complaining about you see:

/**
 * Browser-safe usage of process
 */
var defaultEnvironment = "production";
var env = typeof process === "undefined" || process.env === undefined
    ? defaultEnvironment
    : process.env.NODE_ENV || defaultEnvironment;

export { env };

My understanding of what’s happening is:

1. Webpack reads the exports from package.json which point to the ESM build (not the CJS build)
2. The ESM build of utils/process ends in .mjs so it’s treated as an ESM module by Node and Webpack
3. The Webpack Provide plugin rewrites process to process/browser which is a module path
4. Since it’s considered an ESM module but it now has a module path and that’s not allowed for ESM modules Webpack throws an error

The issue isn’t really in the Framer Motion package; it’s that the ProvidePlugin configuration is injecting a Node style module specifier into an ESM module.

If you don’t need process to work for other packages the simplest fix is to just remove that ProvidePlugin from you configuration. If that’s the only Framer Moton code using process it should work fine without the polyfill.