Блог

Я закончил свой первый gatsby.js проект, и он запускается без ошибок в разделе «разработка gatsby». Однако, когда я запускаю команду сборки как: «gatsby clean amp;amp; gatsby build», я получаю следующую ошибку:

 failed Building static HTML for pages - 3.164s

 ERROR #95313 

Building static HTML failed for path "/lectures/lecture"

See our docs page for more info on this error: https://gatsby.dev/debug-html


  4 | 
  5 | const Links = ({ styleClass, active, children }) => {
> 6 |   const { user, setUser } = useContext(UserContext);
    |           ^
  7 | 
  8 |   let loggedInMenus = false;
  9 | 


  WebpackError: TypeError: Cannot destructure property 'user' of 'Object(...)(...)' as it is null.      

  - links.js:6 Links
    src/constants/links.js:6:11


not finished Generating image thumbnails - 22.034s
  

Теперь это мой link.js .

 import React, { useContext } from 'react';
import { UserContext } from '../context/UserContext';
import { Link } from "gatsby"

const Links = ({ styleClass, active, children }) => {
  const { user, setUser } = useContext(UserContext);

  let loggedInMenus = false;

  if (user amp;amp; user.user.is_active) {
    loggedInMenus = true;
  }

  return (
    <ul className={styleClass}>          
      <li>
        <Link to="/" className="page-link" active={active}>
          Home
        </Link>
      </li>     
   
      <li>
        {
          (loggedInMenus !== true) ? (<></>) : (
            <Link to="/lecture" className="page-link" active={active}>
              Lectures
            </Link>
          )
        }
      </li>      
    </ul>
  )
}

export default Links
  

В src> контекст> UserContext.js , у меня есть это «пользовательское» состояние, которое изначально имеет значение «null».

 import React, { createContext, useState } from 'react'

export const UserContext = createContext(null);

export default ({ children }) => {

  const [user, setUser] = useState(null);
  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  )
}
  

Я предполагаю, что ему не нравится, что значение «user» равно нулю, когда оно передается поставщику (?).

Есть идеи, как исправить эту ошибку сборки, пожалуйста?

Вы не должны переходить null к Context этой строке:

 export const UserContext = createContext(null);
  

Создайте контекст по умолчанию следующим образом:

 const defaultContext = {
  user: ''
};
  

Затем присвоите контекстной переменной по умолчанию значение createContext() :

 export const UserContext = createContext(defaultContext);