Включение общего проекта в приложение create-реагировать - PullRequest
Новая
       5

Включение общего проекта в приложение create-реагировать

1 голос
/ 14 января 2020

В моем проекте у меня есть следующая структура папок / проектов. 

Project
├── client (create-react-app)
│   ├── tsconfig.json
│   └── packages.json
├── server
│   ├── tsconfig.json
│   └── packages.json
└── shared
    ├── tsconfig.json
    └── packages.json

Общий проект - это в основном объявления типа интерфейса / класса, которые я использую как во фронт, так и в бэкэнд, поэтому они используют один и тот же тип объекта .

Я включил общий проект как в клиент, так и в сервер, используя проекты, на которые ссылаются из машинописного текста.

tsconfig. json

...
},
  "references": [
    {
      "path": "../shared"
    }
  ],

Хотя при попытке использовать один из импортированных типов в хуке useReducer:

Компонент в client / sr c

import React, { useReducer, useEffect } from 'react';
import { IRoadBook, GetNewRoadBook} from '../../../shared/src/types/IRoadBook';
import { Grid, TextField, Button } from '@material-ui/core';
import { useParams } from 'react-router-dom';

type State = {
    RoadBook: IRoadBook | any;
}
export default function RoadBookEditor() {
    const { objectId } = useParams();
    const [state, dispatch] = useReducer(reducer, {RoadBook : GetNewRoadBook()});
....

Следующая ошибка возникает при запуск проекта: «Модуль не найден. Вы попытались импортировать ../../../shared/src/types/IRoadBook, который находится за пределами каталога проекта src /. Относительный импорт вне src / не поддерживается».

Что из того, что я прочитал, является ограничением, налагаемым конфигурациями create-реагировать на приложение.

Если я делаю 

const [state, dispatch] = useReducer(reducer, {RoadBook :{}});

Код строится / работает успешно. (вызывает визуальные проблемы в будущем, но это не главное в этом вопросе).

Вопрос: Как правильно включить этот общий проект в мой клиент create-реагировать-приложение project?

shared / types / IRoadBook.tsx 

export interface IRoadBook {
        _id: string;
        Name: string;
        Description: string;
}

export function GetNewRoadBook(): IRoadBook {
        return { _id: '', Name: '', Description: '' } as IRoadBook;
}
...