Проблемы при импорте пользовательского компонента модуля, который использует React-Router-Dom - PullRequest
Новая
       13

Проблемы при импорте пользовательского компонента модуля, который использует React-Router-Dom

1 голос
/ 11 июня 2019

При попытке импортировать компонент из другого моего проекта, превратив импортированный проект в модуль узла, компонент получается неопределенным. Этот компонент использует React-Router-Dom, который имеет свое собственное определение: 

<Link to=""> <Link />

Этот компонент затем импортируется в родительский проект с собственным маршрутизатором, однако при компиляции этот компонент не определен.

В чем может быть проблема, вызывающая это?

Попытка:

  1. Удалил весь импортact-router-dom из компонента и экспортировал компонент в виде чистого html-файла, что привело к успешному экспортированию компонента.

  2. Удален маршрутизатор из экспортируемого компонента и оставлена ​​только оболочка Link.

  3. Убрана необходимость в истории реквизита

Экспортируемый компонент: 

     export default function ExampleWrapper({ history }) {
       return (
        <div>
           <Router>
            <div>
                <Link to="/example">
                    <button>Example</button>
                </Link>

                <Link to="/secondExample">
                    <button>secondExample</button>
                </Link>
            </div>

            <Fragment >
                <Switch >
                    <Route path="/example" exact component={Example} />
                    <Route path="/secondExample" exact component={SecondExample} />
                </Switch>
            </Fragment>
          </Router>
        </div>

Индекс для выставления импорта в модульном индексе: 

export default Example;

export { SecondExample, ThirdExample, ExampleWrapper};

Компонент, использующий экспорт модуля узла: 

import { ExampleWrapper } from 'create-react-library';

function App() {
    return (
        <div className="App">

            <ExampleWrapper history={history} />

            <Router history={history}>
                <Navbar />
                <header className="App-header">
                    <div className="columns is-marginless">
                       <Fragment>
                           <Switch>
                              <Route path="/admin/home" exact component={Home} />
                           </Switch>
                        </Fragment>
                     </div>
                 </header>
             </Router>
         </div>
   );
}

Код ошибки: 

Cannot read property 'dispose' of undefined
./node_modules/react-dev-utils/webpackHotDevClient.js
C:/Users/userName/DEV/concepts/admin-ui/node_modules/react-dev-utils/webpackHotDevClient.js:45

1 Ответ

0 голосов
/ 11 июня 2019

Возможно, это потому, что вы используете экспорт по умолчанию, а при импорте вы используете именованный импорт.

Когда вы выполняете экспорт по умолчанию и хотите импортировать, вы используете этот синтаксис 

import TypeAnythingYouWantHere from 'xx/xx'

Вы можете ввести все, что вы хотите для справки, так как это экспорт по умолчанию, и он всегда одинаков.

Для именованных экспортов вы используете фигурные скобки 

import { MustBeSameNameAsInExport, ... , ... } from 'xx/xx'
...