Интеграция Meteorjs с ChakraUI + React Router

Question

TL; DR, у меня возникла ошибка при интеграции между этими 3. Но когда я использую Meteor с ChakraUI, он отлично работает. Но когда я добавляю реагирующий маршрутизатор, он выдает эту ошибку

Предупреждение: React.createElement: тип недействителен - ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. Скорее всего, вы забыли экспортировать свой компонент из файла, в котором он определен, или вы могли перепутать импорт по умолчанию и именованный импорт.

Итак, в Meteor я оборачиваю приложение в client / main.jsx с поставщиком ChakraUI и Browser Router. Chakra нужно обернуть приложение в базу своего провайдера на основе их документации .

      import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
import { App } from '/imports/ui/App';
import { ChakraProvider } from "@chakra-ui/react"
import { ColorModeScript } from "@chakra-ui/react"
import { BrowserRouter  } from 'react-router-dom'

Meteor.startup(() => {
  render(
  <ChakraProvider>
    <ColorModeScript initialColorMode={'dark'} />
    <BrowserRouter>
      <App/>
    </BrowserRouter>
  </ChakraProvider>,
    document.getElementById('react-target'));
});

Затем в import / App.jsx я помещаю переключатель маршрута реакции для рендеринга страницы. Перед этим я поместил в него код Home.jsx.

      import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
import {Home} from './pages/Home'


export default function App() {
  return (
    <>
      <div>
        <Switch>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </>
  );
}

Так есть ли в моем коде неправильный способ «обернуть» приложения?

Спасибо

Answer 1

Несколько вещей, чтобы проверить:

1. в App.jsx вы экспортируете приложение по умолчанию, поэтому вы должны импортировать его в main.jsx без фигурных скобок
2. вы импортируете App.jsx из /imports/ui/Appно вы пишете, что он находится в imports/App.jsx-> убедитесь, что импорт правильный, здесь может быть проблема
3. не уверен, почему вы импортируете BrowserRouter as Routerв App.jsx, не думайте, что это должно привести к вашей ошибке (потому что он не используется в опубликованном вами фрагменте кода), но просто чтобы быть уверенным, его не следует использовать где-либо еще в App.jsx, если он уже находится в main.jsx

РЕДАКТИРОВАТЬ: то, что решило это, было выше, в основном номер 1, плюс еще один неправильный импорт в App.jsxтого же типа (экспортируется по умолчанию, но импортируется стиль деструктурирования)