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 }) =>

{menuTraverse()} )} 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 https://github.com/react-spring/react-spring/issues/947#issuecomment-600892282

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