Question

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

我已将图书馆减至最少。它包含以下MAX_VALUE：

src/components/index.js

在Next.js应用中，我创建了一个import React from 'react' const Container = ({ children }) => <div>{children}</div> export { Container }，其中包含以下内容：

pages/index.js

import React from 'react' import { Container } from 'mylib' class HomePage extends React.Component { render() { return <Container>Hello</Container> } } export default HomePage是一个本地npm软件包，已使用mylib安装在Next.js应用程序中。它具有标准的webpack配置：

npm i ../mylib

，然后package.json指向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', } } ], }, };作为主文件。

以下方法有效：

在我的Next.js应用中，将dist/components.js替换为return <Container>Hello</Container>（同时保持return <div>Hello</div>不变）
刷新服务器中的页面（我正在运行Next的dev服务器）
恢复使用import { Container }（与步骤1相反）
保存文件->在浏览器中热重载并正确显示<Container>（我确定添加了className）

这时，如果刷新浏览器，则会出现以下错误：

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

这表明我的进出口不正确，但我不知道在哪里。而且该错误仅发生在服务器端。

我做错了什么？

Answer 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>

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

1 个答案: