I get the following error on build only... TypeError: b is not a function

[mgpGit-zz]

🤓 Question

Hi There!

I'm trying to use a couple different animations and it works great when I locally run this on my laptop. When I do a build and deploy it to a server I get the following error when I open the page in the browser "TypeError: b is not a function"

Is there a setting I need on build to make sure everything works as expected? I cleared out my node_modules and package-lock.json and re-installed to no avail. I have also tried to modify settings in my tsconfig.app.json which also didn't help.

Here is a simplified version of one of my animations...

const traverseTransitions = useTransition(toggle, p => p, {
from: { opacity: 0, width:"100%" },
enter: { opacity: 1, width:"100%", paddingRight:"10px" },
leave: { opacity: 0, width:"100%" },
});

{traverseTransitions.map(({ item, key, props }) =>
<animated.div style={props} key={key}>{menuTraverse()}</animated.div>
)}

A twist to my configuration is I am using Angular 7, I have been converting my app to React for some time and everything has worked fine with those pieces so far. Once I add react-spring for the transitions I am getting the above error.

Note: I have React 16.13 installed with react-spring 8.0.27.

Any suggestions you could provide would be extremely helpful.

Thanks in advance!

[mgpGit-zz]

This is the spot where it does not know "b" is a function...

[aleclarson]

Please try with v9:

npm install react-spring@next

[mgpGit-zz]

Just installed v9. It says that "g is not a function" now

[aleclarson]

If you can't reproduce in CodeSandbox, please provide a Github repository I can debug. 👍

[mgpGit-zz]

looking at this code in the bundle, shouldn't it be transpiled at this point and not using "class" and such?

[aleclarson]

Oh, you'll be interested in #601. The solution for v9 is here.

[mgpGit-zz]

funny I was just looking at that one. With v9 - I'm now trying to use use the 'react-spring/web.cjs'

import { Transition, animated } from 'react-spring/web.cjs'

I don't see any ES6 arrow functions any longer in the bundle which is good, but I'm getting a completely different error at runtime.

I changed away from using the hooks version to see if that would help. I tried following this very simple example. Again this works fine except when I do a build
https://github.com/react-spring/react-spring-examples/blob/renderprops/demos/renderprops/pagetransitions/index.js

see image below:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

[mgpGit-zz]

Not sure this helps but this is my current tsconfig, I've tried several variations of this>

"compilerOptions": {
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"jsx": "react",
"target": "es5",
"lib": [
"es2016",
"dom"
],
"outDir": "../out-tsc/app",
"module": "es2015",
"baseUrl": "",
"types": ["node"],

"paths": {
"ag-grid/": ["../node_modules/ag-grid/"]
}
}

[aleclarson]

Please see #947 (comment)

[mgpGit-zz]

In the process of getting a simplified repo of the problem to share I was able to figure out what was going on...

The build optimizer for angular was somehow causing this issue. Turning this off everything works as expected. I am confused why it solely causes a problem in this library and no others to date as we have a large app with lots of dependencies...

Still digging...