framer-motion: Argument must be a function

[adamaho]

Hello All.

Seems that there is an issue with snowpack when using a popular animation library for react called framer-motion.

    Uncaught Error: Argument must be a function
    invariant http://localhost:8080/web_modules/framer-motion.js:73
    schedule http://localhost:8080/web_modules/framer-motion.js:129
    key http://localhost:8080/web_modules/framer-motion.js:177
    scheduleRender http://localhost:8080/web_modules/framer-motion.js:1925
    notifySubscriber http://localhost:8080/web_modules/framer-motion.js:1630
    onRenderRequest http://localhost:8080/web_modules/framer-motion.js:1770
    subscribeToValue http://localhost:8080/web_modules/framer-motion.js:2023
    mount http://localhost:8080/web_modules/framer-motion.js:2042
    forEachValue http://localhost:8080/web_modules/framer-motion.js:1985
    mount http://localhost:8080/web_modules/framer-motion.js:2042
    ref http://localhost:8080/web_modules/framer-motion.js:1929
    React 17
    <anonymous> http://localhost:8080/_dist_/index.js:10

Steps to Reproduce:

1. using the react typescript template, install framer-motion with npm install --save framer-motion
2. Replace App.tsx with the following:

import React from 'react';
import logo from './logo.svg';
import './App.css';

import {
  motion
} from "framer-motion";

interface AppProps {}

function App({}: AppProps) {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <motion.div initial={{ opacity: 1 }} animate={{ opacity: 1 }}>
          <p>
            This is a test
          </p>
        </motion.div>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

3. npm start
4. Observe the error in the console.

Following the above steps but using Create React App does not result in any errors. Therefore there is something funky going on in snowpack.

[adamaho]

After some more playing around it seems this issue is isolated to only development. Running npm run build and then serving the static files from the build directory doesnt result in the same error.

[jcschmidig]

see also Inconsistant build behaviour using 'snowpack dev' and 'snowpack build' #758

[fubhy]

I am having the same problem exactly as described here. I'll see if I can put together a quick demo repo.

[fubhy]

The cause of this problem is 'typeof process': JSON.stringify('undefined'), in getRollupReplaceKeys:

function getRollupReplaceKeys(env: EnvVarReplacements): Record<string, string> {
  const result = Object.keys(env).reduce(
    (acc, id) => {
      const val = env[id];
      acc[`process.env.${id}`] = `${JSON.stringify(val === true ? process.env[id] : val)}`;
      return acc;
    },
    {
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production'),
      'process.versions.node': 'undefined',
      'process.platform': JSON.stringify('browser'),
      'process.env.': '({}).',
      'typeof process.versions.node': JSON.stringify('undefined'),
      'typeof process.versions': JSON.stringify('undefined'),
      'typeof process': JSON.stringify('undefined'),
    },
  );
  return result;
}

[fubhy]

Imho this entire function is questionable because it straight up replaces occurrences of these strings in the code without actually checking the AST for the scope. I think this can be classified as a bug and needs fixing. Can we convert this discussion into an issue and figure out how to proceed? I am happy to submit a PR to fix this.

/cc @FredKSchott

This specific line was introduced by #563 but the pull request that introduced the function originally (which I think shouldn't exist in this form at all) was this one: #265

[FredKSchott]

@fubhy yes! Thanks for calling this out, this is a bandaid that we keep meaning to go back and fix, I'd love your help with a PR if you're able.

Just spun up an issue to track (plus a braindump of everything I know about the issue): #843

[fubhy]

Thanks. I will start working on this tomorrow!

[FredKSchott]

Woo!

[fubhy]

Anyone who is also struggling with framer-motion specifically, there is a hotfix you can set up in your own snowpack config (snowpack.config.js):

  installOptions: {
    rollup: {
      plugins: [
        replace({
          "\"undefined\" === 'function', 'Argument must be a function'": "typeof process === 'function', 'Argument must be a function'",
          delimiters: ['', ''],
        }),
      ],
    },
  },

/cc @adamaho

[adamaho]

Thanks! Sorry it took so long for me to get back to this!

[FredKSchott]

Thanks for reporting everyone, tracking a fix here: #843