Next.js

Question

我有一个非常简单的布局组件，它使用 Next.js 附带的 Head 组件：

import React from 'react';                                                                                                 
import { Container } from 'semantic-ui-react';                                                                             
import { Head } from 'next/head';                                                                                                                                                                                                         

import Header from './Header';                                                                                             

const Layout = ({ children }) => (                                                                                         
  <Container>                                                                                                              
    <Head>                                                                                                                 
      <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css" />                 
    </Head>                                                                                                                
    <Header />                                                                                                             
    {children}                                                                                                             
    <h1>Footer</h1>                                                                                                        
  </Container>                                                                                                             
);                                                                                                                         

export default Layout;

这给了我一个错误：

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    at invariant (/app/node_modules/fbjs/lib/invariant.js:42:15)
    at ReactDOMServerRenderer.render (/app/node_modules/react-dom/cjs/react-dom-server.node.development.js:2522:7)
    at ReactDOMServerRenderer.read (/app/node_modules/react-dom/cjs/react-dom-server.node.development.js:2354:19)
    at renderToString (/app/node_modules/react-dom/cjs/react-dom-server.node.development.js:2726:25)
    at renderPage (/app/node_modules/next/dist/server/render.js:275:26)
    at Function.getInitialProps (/app/node_modules/next/dist/server/document.js:67:25)
    at _callee$ (/app/node_modules/next/dist/lib/utils.js:111:30)
    at tryCatch (/app/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/app/node_modules/regenerator-runtime/runtime.js:296:22)
    at Generator.prototype.(anonymous function) [as next] (/app/node_modules/regenerator-runtime/runtime.js:114:21)
    at step (/app/node_modules/@babel/runtime/helpers/asyncToGenerator.js:12:30)
    at _next (/app/node_modules/@babel/runtime/helpers/asyncToGenerator.js:27:9)
    at /app/node_modules/@babel/runtime/helpers/asyncToGenerator.js:34:7
    at new Promise (<anonymous>)
    at new F (/app/node_modules/core-js/library/modules/_export.js:36:28)
    at /app/node_modules/@babel/runtime/helpers/asyncToGenerator.js:7:12
    at loadGetInitialProps (/app/node_modules/next/dist/lib/utils.js:90:31)
    at _callee3$ (/app/node_modules/next/dist/server/render.js:296:51)
    at tryCatch (/app/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/app/node_modules/regenerator-runtime/runtime.js:296:22)
    at Generator.prototype.(anonymous function) [as next] (/app/node_modules/regenerator-runtime/runtime.js:114:21)
    at step (/app/node_modules/@babel/runtime/helpers/asyncToGenerator.js:12:30)

如果我不使用 Head 组件，错误就会消失。

我在 Github 的 Next.js 页面上找不到相关问题，在 Google 上也找不到相关问题。

有什么想法吗？

Answer 1

来自错误信息：

You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

这是他们文档中的 example，其中 Head 是默认导出：

// yours (named import)
import { Head } from 'next/head';

// Next.js docs (default import)
import Head from 'next/head';

Next.js - Head 元素不起作用

Next.js - Head element doesn't work

javascript

reactjs