0
144
ViewsReact.js component doesn't work in Next.js builds
I'm trying to build a React accordion component as an NPM package named Accordie.
It's working on Next.js development but not in production.
Here's a CodeSandbox demo for development mode and here's a Vercel demo for production mode.
Looks like this on CodeSandbox.
And looks like this on Vercel.
There's a flashing issue on production build. I have no idea about what to do. Probably something wrong with the build script.
I'm using Babel to transpile JSX files like this.
"build": "rm -rf build && NODE_ENV=production babel src --out-dir build --copy-files",
And I need a general help about how to build a React component to be able to make it work in Next.js builds.
1 answers
Answer question0
I figured it has nothing to do with the build scripts.
I was using something like this. Exporting <Panel> and returning <Panel> inside the map.
const Panel = ({}) => {
return (
...
)
}
const Accordie = ({ children }) => {
return (
<>
{children.map((child, key) => {
if (child.type.name !== 'Panel') return null
return (
<Panel
...
/>
)
})}
</>
)
}
module.exports = {
Panel,
Accordie
}
Now just exporting an empty <Panel> and using <PanelInner> instead.
const Panel = () => null
const PanelInner = ({}) => {
return (
...
)
}
const Accordie = ({ children }) => {
return (
<>
{children.map((child, key) => {
if (child.type.name !== 'Panel') return null
return (
<PanelInner
...
/>
)
})}
</>
)
}
module.exports = {
Panel,
Accordie
}