无法在服务器端 Next.js 上导入 React 组件答案

【问题标题】：Can't import React component on server-side Next.js无法在服务器端 Next.js 上导入 React 组件
【发布时间】：2019-08-14 20:01:00
【问题描述】：

我正在尝试将一个非常简单的组件从库中导入到 Next.js 应用程序中。

我已将我的库精简到最低限度。它包含以下src/components/index.js：

import React from 'react'
const Container = ({ children }) => <div>{children}</div>
export { Container }

在我的 Next.js 应用程序中，我创建了一个 pages/index.js，其中包含以下内容：

import React from 'react'
import { Container } from 'mylib'

class HomePage extends React.Component {
  render() {
    return <Container>Hello</Container>
  }
}

export default HomePage

mylib 是一个本地 npm 包，我使用 npm i ../mylib 在我的 Next.js 应用程序中安装了它。它有一个标准的 webpack 配置：

const path = require('path')

module.exports = {
  entry: {
    components: './src/components/index.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    libraryTarget: 'commonjs2'
  },
  mode: "production",
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        }
      }
    ],
  },
};

然后package.json指向dist/components.js作为主文件。

以下确实有效：

在我的 Next.js 应用程序中，将 return <Container>Hello</Container> 替换为 return <div>Hello</div>（同时保留 import { Container }）
刷新服务器中的页面（我运行的是Next的开发服务器）
恢复使用<Container>（与步骤1相反）
保存文件 --> 在浏览器中热重载并正确显示Container（我添加了一个类名以确保）

此时，如果我刷新浏览器，我会收到以下错误：

元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

这表明我进行了错误的导入/导出，但我不知道在哪里。而且错误只发生在服务器端。

我做错了什么？

【问题讨论】：

标签： javascript reactjs next.js

【解决方案1】：

容器应该是默认导出，所以这个：

import React from 'react'

const Container = ({ children }) => <div>{children}</div>

export { Container }

应该是这样的：

import React from 'react'

const Container = ({ children }) => <div>{children}</div>

export default Container

您也可以像这样将 Container 组件单行：

import React from 'react'

export default Container = ({ children }) => <div>{children}</div>

【讨论】：