Блог

У меня есть next приложение. код для самого приложения ( pages , static и т.д.) находится в папке в репозитории. вызвано frontend . App. itelf обслуживается через express сервер через другую папку в репозитории. вызвано backend .

Во-первых, я не уверен, что разделение этих двух является наилучшей практикой, но лично мне нравится делать это таким образом. Обе папки имеют свои собственные соответствующие package.json и package-lock.json файлы.

Я также запускаюсь ApolloServer на внутреннем экспресс-сервере через /graphql конечную точку. Приложение. работает нормально, пока я не попытаюсь реализовать компонент с помощью перехватов react. А именно очень простой пример, предоставленный react-spring , как показано ниже:

 import { useSpring, animated } from 'react-spring'

function App() {
  const props = useSpring({ opacity: 1, from: { opacity: 0 } })
  return <animated.div style={props}>I will fade in</animated.div>
}
  

Я переименовал это из App в SpringDemo , и оно вызывается просто в компоненте страницы следующим образом:

 function Home() {
  return (
    <div>
      <SpringDemo />
    </div>
  )
}

export default Home
  

При обслуживании моего приложения через express сервер в backend папке я получаю следующую ошибку в браузере:

 Invariant Violation: Invalid hook call. Hooks can only be called inside of the 
body of a function component. 
This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
  

У вас могут быть несовпадающие версии React и средства визуализации (например, React DOM)

Я не верю, что это так, из моих соответствующих package.json файлов:

frontend/package.json

     "react": "^16.8.5",
    "react-apollo": "^2.5.2",
    "react-dom": "^16.8.5",
  

backend/package.json

     "react": "^16.8.5",
    "react-dom": "^16.8.5",
  

Похоже, что все версии совпадают не позднее 16.8.5 .

Возможно, вы нарушаете правила использования перехватов

Вряд ли с копией вставленного примера из react-spring документов.

У вас может быть более одной копии React в одном приложении

Я не верю, что я делаю, из моего package.json перечисленного выше, но я не уверен. Я прочитал это https://github.com/facebook/react/issues/14823 проблема, которая затем указала мне на это https://github.com/apollographql/react-apollo/issues/2792 но я не могу быть уверен, что это является причиной. Просмотр package-lock.json файла не проясняет (по крайней мере, для меня), действительно ли я использую другую версию react / react-dom via react-apollo .

Проверка package.json в react-apollo репозитории. здесь:https://github.com/apollographql/react-apollo/blob/master/package.json предполагает, что они используют ту же версию react and react-dom , хотя и отличную от моей версии react and react-dom , как указано выше:

react-apollo/package.json

     "react": "16.8.4",
"react-dom": "16.8.4",
  

Я также не знаю, соответствует ли это моей версии react-apollo , или действительно ли это является причиной этой проблемы.

Как я могу решить эту проблему и выяснить, действительно ли я запускаю несколько копий react / react-dom ? Для меня это не было проблемой ни с чем другим, основанным на react.

Редактировать:

Чтобы, надеюсь, помочь, я создал суть своих соответствующих package.json и package-lock.json файлов:

frontend/package.json — https://gist.github.com/benlester/c7d82d7ad46cae9b8972284baba003a6

frontend/package-lock.json — https://gist.github.com/benlester/8f85b3fa290e67445ee0b2df365d8307

backend/package.json — https://gist.github.com/benlester/0c8004bdbb5b87c50734ba8044c35cee

backend/package-lock.json — https://gist.github.com/benlester/29f7a25f2ee633a13bdbdcee28270ddf

npm ls react — frontend

 frontend@0.0.1 [directory]
└── react@16.8.5
  

npm ls react — серверная часть такая же, как указано выше.

Мне удалось исправить это, изменив структуру проекта.

Вместо того, чтобы иметь отдельный package.json and package-lock.json в каждой из папок frontend and backend , у меня теперь есть один package.json and package-lock.json в корневой папке (вместе с одной node_modules папкой).

Я не знаю, почему это устраняет проблему, как указано в моем вопросе выше, все мои react и react-dom версии, казалось, совпадали друг с другом, и я правильно использовал перехваты.

Мне также не особенно нравится это решение, поскольку оно вынуждает меня (по крайней мере, с одним репозиторием.) использовать один исходный код для зависимостей внешнего интерфейса и серверной части.

Если кто-нибудь знает о лучшем способе управления смешанными функциями интерфейса и бэкенда. Я весь внимание на комментариях.