Babel.js React.js组件在Next.js构建中不工作

tquggr8v 于 2022-12-16 发布在 Babel

关注(0)|答案(1)|浏览(161)

我尝试将React accordion组件构建为一个名为Accordie的NPM包。
它正在Next.js开发中工作，但没有投入生产。
这是一个针对开发模式的CodeSandbox演示，这是一个针对生产模式的Vercel演示。
在CodeSandbox上看起来像这样。

在Vercel上看起来像这样。

在生产版本上有一个 Flink 的问题。我不知道该怎么办。可能是构建脚本有问题。
我用Babel来翻译JSX文件，就像这样。

"build": "rm -rf build && NODE_ENV=production babel src --out-dir build --copy-files",

我需要一个关于如何构建React组件的一般性帮助，以便能够使它在Next.js构建中工作。

babeljs

来源：https://stackoverflow.com/questions/70866287/react-js-component-doesnt-work-in-next-js-builds

1条答案

按热度按时间

xmakbtuz1#

我想这和构建脚本无关。
我使用的是类似这样的东西，导出<Panel>并在Map中返回<Panel>。

const Panel = ({}) => {
  return (
    ...
  )
}

const Accordie = ({ children }) => {
  return (
    <>
      {children.map((child, key) => {
        if (child.type.name !== 'Panel') return null

        return (
          <Panel
            ...
          />
        )
      })}
    </>
  )
}

module.exports = {
  Panel,
  Accordie
}

现在只需导出一个空的<Panel>，并使用<PanelInner>。

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
}

赞(0）回复(0）举报 2022-12-16

我来回答

Babel.js React.js组件在Next.js构建中不工作

1条答案

相关问题

热门标签

最新问答