Error when loading a page that has react-spring on it

[brandoncc]

Error coming from applyAnimatedValues

I'm seeing this error after updating to react-spring 8 to v9:

Here is the webpack resolution I have specified:

module.exports = {
  resolve: {
    alias: {
      'react-spring$': '@react-spring/web/dist/react-spring-web.cjs'
    }
  }
};

I noticed the esm in the animated import file name, so I tried these imports:

module.exports = {
  resolve: {
    alias: {
      'react-spring$': '@react-spring/web/dist/react-spring-web.cjs',
      '@react-spring/core': '@react-spring/core/dist/react-spring-core.cjs',
      '@react-spring/animated': '@react-spring/animated/dist/react-spring-animated.cjs',
      '@react-spring/shared': '@react-spring/shared/dist/react-spring-shared.cjs',
      '@react-spring/konva': '@react-spring/konva/dist/react-spring-konva.cjs',
      '@react-spring/three': '@react-spring/three/dist/react-spring-three.cjs',
      '@react-spring/rafz': '@react-spring/rafz/dist/react-spring-rafz.cjs',
      '@react-spring/three': '@react-spring/three/dist/react-spring-three.cjs',
      '@react-spring/zdog': '@react-spring/zdog/dist/react-spring-zdog.cjs'
    }
  }
};

But I'm getting the same error from the cjs file:

I am not experiencing this issue in dev, so I think it must have something to do with babel. Here is my babel config:

const { merge } = require('webpack-merge');

module.exports = {
  configureBabel(environment) {
    const babelLoader = environment.loaders.get('babel');
    const babelLoaderUsed = babelLoader.use.find(
      (el) => el.loader === 'babel-loader'
    );

    babelLoader.test = /\.(js|jsx|ts|tsx)?(\.erb)?$/;

    babelLoader.exclude = /node_modules\/(?!(recoil)\/).*/;
    babelLoaderUsed.options = merge({}, babelLoaderUsed.options, {
      presets: [
        [
          '@babel/preset-env',
          {
            modules: false,
            targets: {
              browsers: ['> 1%', 'IE 11']
            },
            forceAllTransforms: true,
            useBuiltIns: 'entry',
            corejs: {
              version: 2,
              proposals: true
            }
          }
        ],
        '@babel/preset-react',
        '@babel/preset-typescript'
      ],
      plugins: [
        '@babel/plugin-transform-typescript',
        '@babel/plugin-syntax-dynamic-import',
        '@babel/plugin-proposal-object-rest-spread',
        '@babel/plugin-transform-modules-commonjs',
        [
          '@babel/plugin-proposal-class-properties',
          {
            spec: true
          }
        ],
        [
          'module-resolver',
          {
            root: ['./app'],
            alias: {
              assets: './assets'
            }
          }
        ],
        '@babel/plugin-syntax-import-meta',
        '@babel/plugin-proposal-json-strings',
        [
          '@babel/plugin-proposal-decorators',
          {
            legacy: true
          }
        ],
        '@babel/plugin-proposal-function-sent',
        '@babel/plugin-proposal-export-namespace-from',
        '@babel/plugin-proposal-numeric-separator',
        '@babel/plugin-proposal-throw-expressions'
      ]
    });
  }
};

I have tested this in both Brave and Chrome on MacOS. I can't figure out why this is happening.

[brandoncc]

I think this is occurring in elements that I'm passing SpringValues as a props and then using them in child elements. I haven't been able to figure out the difference between my development and production builds which would cause production to have this issue but not development.

[brandoncc]

I figured out that serving the files using webpack-dev-server works fine, but when I compile them with webpack and use the compiled version, that is where I have issues. Weird!

[joshuaellis]

Are you able to provide a repro for this so we can look into it?

[brandoncc]

Thanks for the response @joshuaellis. I've been trying to narrow down the issue so that I can create a repro, and I think I have narrowed it down to how babel is transpiling the dangerousStyleValue function. I added a bunch of console logs to react-spring-web.cjs.prod.js in my node_modules directory as such and I get these logs when I change the styles of an element using spring:

Everything executes until the inlined dangousStyleValue function. Here is the transpiled function:

applyAnimatedValues: function(e, t) {
        if (console.log("instance", e), console.log("props", t), !e.nodeType || !e.setAttribute) return !1;
        const n = "filter" === e.nodeName || e.parentNode && "filter" === e.parentNode.nodeName;
        let r, o, i, a, d;
        try {
            const e = t;
            o = e.style, i = e.children, a = e.scrollTop, d = e.scrollLeft, r = u(e, s)
        } catch (e) {
            throw console.log("you were right", t), e
        }
        const p = Object.values(r),
            h = Object.keys(r).map(t => n || e.hasAttribute(t) ? t : c[t] || (c[t] = t.replace(/([A-Z])/g, e => "-" + e.toLowerCase())));
        void 0 !== i && (e.textContent = i);
        try {
            for (let t in o)
                if (console.log("name", t), console.log("style", o), o.hasOwnProperty(t)) {
                    console.log("style.hasOwnProperty(name)");
                    const n = (n = o[t = t], console.log("name in dSV", t), console.log("value in dSV", n), null == n || "boolean" === typeof n || "" === n ? "" : "number" !== typeof n || 0 === n || l.test(t) || f.hasOwnProperty(t) && f[t] ? ("" + n).trim() : n + "px");
                    console.log("value", n), "float" === t ? (console.log("here"), t = "cssFloat") : l.test(t) ? (console.log("here 2"), e.style.setProperty(t, n)) : (console.log("here 3"), e.style[t] = n)
                }
        } catch (e) {
            throw console.log("line 81"), e
        }
        var v, m;
        try {
            h.forEach((t, n) => {
                e.setAttribute(t, p[n])
            })
        } catch (e) {
            throw console.log("line 85"), e
        }
        void 0 !== a && (e.scrollTop = a), void 0 !== d && (e.scrollLeft = d)

And here is the transpiled version without the logs:

applyAnimatedValues: function(e, t) {
        if (!e.nodeType || !e.setAttribute) return !1;
        const n = "filter" === e.nodeName || e.parentNode && "filter" === e.parentNode.nodeName,
            r = t,
            {
                style: o,
                children: i,
                scrollTop: a,
                scrollLeft: d
            } = r,
            p = u(r, s),
            h = Object.values(p),
            v = Object.keys(p).map(t => n || e.hasAttribute(t) ? t : c[t] || (c[t] = t.replace(/([A-Z])/g, e => "-" + e.toLowerCase())));
        void 0 !== i && (e.textContent = i);
        for (let u in o)
            if (o.hasOwnProperty(u)) {
                const t = null == (t = o[u = u]) || "boolean" === typeof t || "" === t ? "" : "number" !== typeof t || 0 === t || l.test(u) || f.hasOwnProperty(u) && f[u] ? ("" + t).trim() : t + "px";
                "float" === u ? u = "cssFloat" : l.test(u) ? e.style.setProperty(u, t) : e.style[u] = t
            }
        var m, g;
        v.forEach((t, n) => {
            e.setAttribute(t, h[n])
        }), void 0 !== a && (e.scrollTop = a), void 0 !== d && (e.scrollLeft = d)

As far as I can tell, the error is coming from this line in the version with the logs:

const n = (n = o[t = t], console.log("name in dSV", t), console.log("value in dSV", n), null == n || "boolean" === typeof n || "" === n ? "" : "number" !== typeof n || 0 === n || l.test(t) || f.hasOwnProperty(t) && f[t] ? ("" + n).trim() : n + "px");

and this line in the version without the logs:

const t = null == (t = o[u = u]) || "boolean" === typeof t || "" === t ? "" : "number" !== typeof t || 0 === t || l.test(u) || f.hasOwnProperty(u) && f[u] ? ("" + t).trim() : t + "px";

Now I just have to figure out how to fix this in babel I think...which I have no idea at the moment!

[joshuaellis]

Yes, I think it's something with your babel config. I'm going to move this to a discussion incase someone has an answer or you solve yours...

[brandoncc]

Thank you for all of your help @joshuaellis, it was instrumental in getting this fixed. I think I have identified that it is an uglifyjs issue, based on this issue. I'll follow up here when I have figured it out, in case it helps anyone else.

[brandoncc]

Okay, I have confirmed the fix. Adding the following line to my babel config fixed it:

environment.plugins.get("UglifyJs").options.uglifyOptions.compress.inline = false;

Thanks again!