Не удалось разрешить импорт при запуске es-dev-server с пользовательским пакетом npm

Содержание

Вопрос или проблема
Ответ или решение
Проблема: Невозможность разрешения импорта
Возможные источники проблемы
Рекомендации по устранению проблемы
Заключение

Вопрос или проблема

Привет, я создаю 2 простых тестовых проекта, где проект A – это пользовательский NPM пакет, а проект B его использует. При запуске через es-dev-server я получаю Ошибка: Не удалось разрешить импорт “npm-project-a” в “src/index.ts”.

Моя структура папок выглядит так:

project-a/src/index.ts

export function MRTAdd(v1: number, v2: number): number {
    return v1 + v2;
}

project-a/package.json

{
  "name": "npm-project-a",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "module": "commonjs",
  "scripts": {
    "build": "tsc"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "lodash": "^4.17.21"
  }
}

project-a/tsconfig.json

{
  "compilerOptions": {
    "target": "es2016",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "module": "commonjs",
    "declaration": true,
    "declarationMap": true,
    "outDir": "./dist",
    "skipLibCheck": true
  }
}

Далее я выполнил npm build, что дает мне сборку tsc внутри папки dist

Следующий шаг – это npm link внутри корня проекта-a, а затем в проекте-b я npm link npm-project-a

Теперь внутри project-b/src/index.ts

import { MRTAdd } from 'npm-project-a';

console.log(MRTAdd(1, 2));

Мой index.html ссылается на <script src="index.ts"></script>
Затем, когда я выполняю команду в project-b/package.json

"scripts": {
  "start": "es-dev-server --app-index src/index.html --node-resolve --watch --open"
},

я получаю эту ошибку

Пожалуйста, дайте совет!

Ответ или решение

Вопрос о проблеме с импортом при использовании es-dev-server с пользовательским npm-пакетом является распространенной ситуацией среди разработчиков. В вашем случае, вы создали два проекта: проект A, который представляет собой пользовательский npm-пакет, и проект B, который пытается использовать данный пакет. Ошибка "Could not resolve import ‘npm-project-a’ in ‘src/index.ts’" говорит о том, что es-dev-server не может найти указанный пакет. Давайте разберем возможные причины возникновения этой проблемы и способы их решения.

Проблема: Невозможность разрешения импорта

Исходная структура проектов

Ваши проекты имеют следующую структуру:

project-a (ваш npm-пакет)
- src/index.ts
- package.json
- tsconfig.json
- dist (папка с собранными файлами)
project-b (проект, который использует package-a)
- src/index.ts
- package.json
- index.html

Возможные источники проблемы

Неправильный путь импорта: Убедитесь, что в project-b/src/index.ts у вас корректно написан импорт:
```
import { MRTAdd } from 'npm-project-a';
```
Модули и конфигурация TypeScript: В вашем файле tsconfig.json для проекта A вы используете "module": "commonjs". Это может вызвать проблемы с совместимостью при импорте в проект B, особенно если он ожидает ES-модули. Попробуйте изменить module на esnext или es6:
```
{
 "compilerOptions": {
   "module": "esnext",
   ...
 }
}
```
Структура сборки и выходные файлы: После выполнения команды npm run build убедитесь, что ваши выходные файлы находятся в каталоге dist и имеют правильные файлы. Убедитесь, что файл dist/index.js присутствует и правильно собирается.
Использование команды npm link: Проверка правильности выполнения команд npm link — эта команда должна быть выполнена в правильных директориях. Введите следующую команду в корневой директории проекта A:
```
npm link
```
Затем в каталоге проекта B выполните:
```
npm link npm-project-a
```
Настройки es-dev-server: Чтобы убедиться, что es-dev-server видит ваш пользовательский пакет, убедитесь, что у вас установлен параметр --node-resolve. Это позволяет серверу автоматически разрешать имена пакетов. Ваш скрипт в package.json проекта B выглядит корректно:
```
"scripts": {
 "start": "es-dev-server --app-index src/index.html --node-resolve --watch --open"
}
```

Заключение

Таким образом, ошибка "Could not resolve import ‘npm-project-a’" может возникать из-за множества факторов, включая неверные конфигурации модулей и пути импорта. Пошаговая проверка каждого элемента в вашем сценарии, как описано выше, должна помочь вам в быстром обнаружении и исправлении проблемы. Чтобы избежать подобных ситуаций в будущем, продолжайте развивать свою экспертизу в работе с npm-пакетами и изучайте основы конфигурации TypeScript и окружения разработки.