Ошибка перехвата: недопустимый перехват вызова с использованием NextJS или ReactJS в Windows - PullRequest
Новая
       12

Ошибка перехвата: недопустимый перехват вызова с использованием NextJS или ReactJS в Windows

1 голос
/ 13 октября 2019

При попытке использовать React Hooks в NextJS я продолжаю получать следующую ошибку:

Хуки могут вызываться только внутри тела компонента функции.

Эта проблема возникает только в Windows и отлично работает с Mac.

Это хорошо документированная проблема, и я устраню многие из предложенных решений, в том числе:

  • Несколько версий React илиReact DOM
  • Изменение настроек веб-пакета в next.config.js
  • Связывание с определенными пакетами модуля узла

Вот пример использования: 

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

const Index = () => {
   const [ test, setTest ] = useState('Test')

   useEffect(() => (
      console.log(`Page loaded, variable value: ${test}`)
   ), [])

   return <div>Hello</div>
}

Я использую следующие версии: 

"next": "^9.1.1",
"react": "^16.10.2",
"react-dom": "^16.10.2"

1 Ответ

2 голосов
/ 13 октября 2019

Если вы столкнулись с этой проблемой ТОЛЬКО на ПК, это может быть связано с тем, как вы переходите в папку вашего проекта. Убедитесь, что вы используете правильный регистр символов во всех ваших папках! В моем сценарии я использовал Powershell для перехода к своему проекту и запуска сервера разработки.

Например, следующее может привести к ошибке перехвата: 

cd desktop/project_folder

npm run dev

Проблема заключается в том, что «desktop» - это имя каталога с заглавной буквы. Поэтому работа сервера с помощью следующих шагов работает отлично: 

cd Desktop/project_folder

npm run dev

Эта проблема также возникает, если вы открыли папку project_folder с использованием неверного корпуса, а затем использовали интерактивную оболочку для запуска сервера разработки, например: 

cd desktop/project_folder

## Open project_folder in VS Code
code .

## Start development server from VS Code's interactive shell
npm run dev

В корне проблемы я считаю, что пути к модулям неправильно импортируются из-за различий в ожидаемых именах путей. Если вы видите следующее предупреждение, исходящее от вашего сервера разработки, сначала убедитесь, что оно адресовано:

Существует несколько модулей, которые отличаются только регистром

...