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

從錯誤消息：

您可能忘記從定義組件的文件中導出組件，或者您可能混淆了默認導入和命名導入。

這是他們文檔中的一個示例，其中Head是默認導出：

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

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

更多關於進口

更新您的導入能解決這個問題嗎？

Next.js - 頭元素不起作用

問題描述

1 個解決方案

解決方案1
13 已采納 2018-07-14 02:35:19

Next.js - 頭元素不起作用

問題描述

1 個解決方案

解決方案1 13 已采納 2018-07-14 02:35:19

解決方案1
13 已采納 2018-07-14 02:35:19