Everything works fine on localhost by running npm run dev.
But I got this error on the server: TypeError: Cannot call a class as a function.
I can duplicate this error by running npm run build and run npm run serve
I have the same issue. I’ve done some major changes and only noticed this in deployment. I mainly changed to using loadable and basically updated all my packages. So finding the bug at this point would be hell. Don’t know where to start.
I narrowed it down to my “react-scroll” components. For some reason this does not want to go through the build process. It may be different in your case. Anyways, it was working before I updated all the libs, so … weird.
@tibor.udvari You’re right.
I commented out codes which are using react-scroll and it worked. It seems like react-scrolling is conflicting on server side rendering.
So I think the solution is to code scroll to element using Javascript without using this module.
You comments helped me a lot. Thank you!
@tibor.udvari I tried converting react-scroll into vanilla javascript and it didn’t solve the problem.
I think this is something resolved by frontity webpack configuration for bundling…
I just had the same thing, I left it completely out of my code for now. It might have something to do with the window, are you using window.scrollTo in your code?
Actually I don’t think this is because of react-scroll, I think this is something happened in frontity’s webpack when building for production.
So I just set the environment variable to build for development mode. FRONTITY_BUILD_DEVELOPMENT=true.
We may need support from Frontity team for this.
Detailing the info suggested here when having issues will help the community to provide the best possible help as quickly and as efficiently as possible.
If I comment out , it works fine.
The problem is other page using rc-collapse doesn’t have error like this.
Also, I’m getting the same error on the pages using react-scroll and react-scrollspy.
The problem is I’m having this error only after run npm run build and everything is working well on development mode.
I’m not totally understand what is the problem.
Looking forward to your help.
As you’re using external libraries you must take into account that you’re using those libraries in an Isomorphic React App. This means the React code will be executed in both the server side (to generate the HTML returned to the browser) and the client side (for client side navigations)
In this section you can learn more about this
About the specific issue I don’t understand why it works on development mode but not on production mode
No idea, honestly. The only info we have is that a class is being called as a function (i.e. Class() instead of new Class()), and also that it might be related to the react-scroll or rc-collapse packages conflicting somehow with our webpack configuration?
@nuttawitpanyason, if you share a repo, or a codesandbox reproducing the error, we would be able to help much better.
I think it would be a good idea too if you share other additional info, like the output of npx frontity info, as explained in the link shared by @juanma.