Я хочу создать проект с клиентской частью (react-app), серверной частью (express) и общей библиотекой (utils) в машинописном тексте. Я использую пряжу 2 рабочих пространства и хотел избежать использования ларны (если это возможно). К сожалению, я не мог заставить его работать уже несколько дней (и много гуглил ...). При попытке запустить клиентское приложение я получаю сообщение об ошибке:
Не удается найти модуль utils или соответствующие ему объявления типов. TS2307
Кто-нибудь знает, что я делаю не так?
Это моя структура проекта:
- .yarn
- packages
- client (created with create-react-app)
- utils (создается с помощью пряжи tsc --init)
- сервер
- .pnp.js
- .yarnrc.yml
- package.json
- yarn.lock
package.json (корень):
{
"private": true,
"name": "monorepo with shared library and yarn 2 workspaces",
"workspaces": [
"packages/*"
],
"scripts": {
"client": "yarn workspace client start",
"server": "yarn workspace server start",
"prepare": "yarn workspace utils build"
}
}
utils / package.json:
{
"name": "utils",
"private": true,
"version": "1.0.0",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"files": [
"dist"
],
"devDependencies": {
"@types/node": "^14.14.22",
"@typescript-eslint/eslint-plugin": "^4.14.0",
"@typescript-eslint/parser": "^4.14.0",
"eslint": "^7.18.0",
"eslint-config-prettier": "^7.2.0",
"eslint-plugin-prettier": "^3.3.1",
"prettier": "^2.2.1",
"typescript": "^4.1.3"
},
"scripts": {
"build": "tsc -b --verbose"
}
}
utils / src / index.ts:
function test() {
console.log("this is a function from the shared library ");
}
export = {
test
}
клиент / package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.15",
"@types/node": "^12.0.0",
"@types/react": "^16.9.53",
"@types/react-dom": "^16.9.8",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-refresh": "^0.9.0",
"react-scripts": "4.0.1",
"typescript": "^4.0.3",
"utils": "1.0.0", // also tried "utils": "workspace:packages/utils"
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start --verbose",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"eslint-config-react-app": "^6.0.0"
}
}
Я добавил простой импорт в client / src / App.tsx для тестирования:
import React from "react";
import logo from "./logo.svg";
import "./App.css";
import shared from "utils";
...
Спасибо!