React.js component doesn't work in Next.js builds

Question

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.

score 0 · Answer 1 · answered Jan 26 '22 at 16:37

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
}

React.js component doesn't work in Next.js builds

1 Answers1