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?
I tried using anchor link smooth scroll instead. I had the same issue. I think it’s something to do with the wondow object. GitHub - mauricevancooten/react-anchor-link-smooth-scroll: React component for anchor links using the smooth scroll polyfill.
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.
Welcome to the Community!
Can you please provide a repo or code-sandbox with your code? This is especially helpful to find solutions to technical issues with specific code
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.
@juanma actually I tried comment out components one by one and the error is happening in the component using rc-collapse.
import React from "react";
import { connect } from "frontity";
import {
Button,
Checkbox,
Link,
} from "@baalspots/tmm-theme/src/components/commons";
import { GridRow, GridColumn } from "emotion-flex-grid";
import CollapseContainer from "@baalspots/tmm-theme/src/assets/styles/collapse.style";
import Collapse, { Panel } from "rc-collapse";
import MobileShopPreferenceContainer from "./mobile-pref.style";
import { ShopPrefContainer } from "./index.style";
const expandIcon = ({ isActive }) => {
return (
<div className="expand-icon">
<div
className="icon tmm-arrow-down"
style={{
transition: "transform .2s",
transform: `rotate(${isActive ? 180 : 0}deg)`,
}}
/>
</div>
);
};
const MobileShopPreference = ({ state }) => {
return (
<MobileShopPreferenceContainer>
<ShopPrefContainer>
<div className="stable-container">
<h3>Shop Mattresses by Preference</h3>
<p className="sm">Select All That Apply</p>
<CollapseContainer>
<Collapse
accordion
expandIcon={expandIcon}
className="shop-collapse"
>
{state.theme.filters.categories.slice(1, 4).map((category, i) => (
<Panel
header={category.name}
extra={
category.selected > 0 && (
<span className="selected-count ">
{category.selected}
</span>
)
}
key={i}
>
<GridRow wrap="wrap">
{category.data.map((item, i) => (
<GridColumn
key={`col-${i}`}
width={6}
pt={[i > 1 ? "l" : ""]}
>
<Checkbox
key={i}
name={i}
label={item.label}
checked={item.checked}
onChange={(event) =>
frontity.actions.theme.countFilterOptions({
event,
category: category.slug,
item: item,
})
}
/>
</GridColumn>
))}
</GridRow>
</Panel>
))}
</Collapse>
</CollapseContainer>
<div className="shop-result">
<p className="shop-result__number">{/* <b>20</b> Results */}</p>
<Button color="primary" size="small">
<Link
link={`/mattresses/?search=true`}
style={{ color: `#FFFFFF` }}
>
See Mattress Results
</Link>
</Button>
</div>
</div>
</ShopPrefContainer>
</MobileShopPreferenceContainer>
);
};
export default connect(MobileShopPreference);
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
@David, any thoughts here?
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.