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

Posted 2023-02-22

【中文标题】无法在服务器端 Next.js 上导入 React 组件

【英文标题】：Can't import React component on server-side Next.js

【发布时间】：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（我添加了一个类名以确保）

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

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

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

我做错了什么？

【参考方案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>