Не удалось найти файл объявления модуля react
Я прочитал, как работает разрешение модуля TypeScript .
У меня есть следующий репозиторий: @ ts-stack / di . После компиляции структура каталогов выглядит следующим образом:
В моем package.json я написал "main": "dist/index.js" .
В Node.js все отлично работает, но TypeScript:
Не удалось найти файл объявления для модуля '@ ts-stack / di'. '/path/to/node_modules/@ts-stack/di/dist/index.js' неявно имеет тип 'any'.
И все же, если я импортирую следующим образом, то все работает:
Что я делаю не так?
Вот два других решения
Если модуль не ваш, попробуйте установить типы из @types :
Если вышеприведенные ошибки установки - попробуйте изменить import операторы на require :
Я думаю, что использование require вместо import - это немного против паттерна: лучше объявить модуль в .d.ts файле; см. мой ответ ниже.
Это плохой совет. Это полностью сводит на нет смысл TypeScript и общую позицию FOSS о том, что «что-то достаточно простое стоит внести свой вклад». Если при наборе текста отсутствует, кто-то выполнил поиск, а кто-то не опубликовал, или отправил PR с вашими наборами, или не используйте систему набора, если вы просто хотите обойти это.
Если вы импортируете сторонний модуль 'foo' , который не предоставляет никаких типизаций, ни в самой библиотеке, ни в @types/foo пакете (сгенерированном из репозитория DefiniteTyped ), то вы можете устранить эту ошибку, объявив модуль в файл с .d.ts расширением. TypeScript ищет .d.ts файлы в тех же местах, что и обычные .ts файлы: как указано в «files», «include» и «exclude» в tsconfig.json .
Тогда, когда вы импортируете, foo он будет просто напечатан как any .
В качестве альтернативы, если вы хотите бросить свой собственный набор текста, вы можете сделать это тоже:
Тогда это будет правильно скомпилировано:
Вам не нужно предоставлять полную типографию для модуля, достаточно для тех битов, которые вы на самом деле используете (и вам нужны правильные типизации), поэтому это особенно легко сделать, если вы используете довольно небольшое количество API.
С другой стороны, если вы не заботитесь о типах внешних библиотек и хотите, чтобы все библиотеки без типизаций импортировались как any , вы можете добавить это в файл с .d.ts расширением:
Преимущество (и недостаток) в том, что вы можете импортировать абсолютно все, и TS будет компилироваться.
@Tom Он ищет .d.ts файлы в тех же местах, что и обычные .ts файлы: как указано «files», «include» и «exclude» в tsconfig.json . Я не рекомендовал бы использовать typeRoots для этой цели: это предназначено для расположения модулей внешнего типа (то есть node_modules/@types ), а не отдельных .d.ts файлов.
Если вам нужно быстрое исправление, просто добавьте это перед строкой импорта:
Это вызывает ошибку в более поздних версиях eslint: error Do not use "// @ts-ignore" comments because they suppress compilation errors @typescript-eslint/ban-ts-ignore
Это чувство , когда вы смотрите в течение двух дней , и найти его , как это: просто удалить .js из "main": "dist/index.js" в package.json и все работает отлично!
UPD : этот ответ относительно, если у вас есть собственный пакет npm, если нет - см. Мой ответ ниже .
И если ответ выше не решен импортировать ваш модуль, попробуйте просто добавить typings в package.json :
Конечно, здесь папка dist - это место, где хранятся файлы вашего модуля.
Я приходил к вашему вопросу и вашему ответу много раз в последние дни, и я хотел бы добавить, что мне не хватало, чтобы объявить эти типы в файле .d.ts, поэтому в моем случае были установлены модули узлов, которые поставлялись без типы (и я не смог установить explicity их типы) начали работать, объявив их в этом файле, написав "объявлять модуль 'MYDesiredModule'
Спасибо. Добавление «typings»: «dist / index» в мой package.json помогло мне. Странно, что VS Code выдает ошибку машинописного
TypeScript в основном реализует правила и добавляет типы в ваш код, чтобы сделать его более понятным и точным из-за отсутствия ограничений в Javascript. TypeScript требует от вас описания ваших данных, чтобы компилятор мог проверить ваш код и найти ошибки. Компилятор сообщит вам, используете ли вы несовпадающие типы, выходите ли вы из области видимости или пытаетесь ли вы вернуть другой тип. Поэтому, когда вы используете внешние библиотеки и модули с TypeScript, они должны содержать файлы, описывающие типы в этом коде. Эти файлы называются файлами объявлений типов с расширением d.ts . Большинство типов объявлений для модулей npm уже написаны, и вы можете включить их, используя npm install @types/module_name (где имя_модуля - это имя модуля, типы которого вы хотите включить).
Тем не менее, существуют модули, у которых нет определений их типов, и чтобы устранить ошибку и импортировать модуль с помощью import * as module_name from 'module-name' , создайте папку typings в корне вашего проекта, внутри создайте новую папку с именем вашего модуля и в этом папку создайте module_name.d.ts файл и напишите declare module 'module_name' . После этого просто зайдите в свой tsconfig.json файл и добавить "typeRoots": [ "../../typings", "../../node_modules/@types"] в compilerOptions (с соответствующим относительным путем к папкам) , чтобы машинопись знать , где он может найти типы определения библиотек и модулей и добавить новое свойство "exclude": ["../../node_modules", "../../typings"] в файл. Вот пример того, как должен выглядеть ваш файл tsconfig.json:
После этого ошибка исчезнет, и вы сможете придерживаться последних правил ES6 и TypeScript.
Это сработало только для меня, если бы я назвал файл наборов index.d.ts . Кроме этого, это было единственное решение, которое помогло мне.
Для всех, кто читает это, попробуйте переименовать файл .js в .ts
Изменить: Вы также можете добавить "allowJs": true в свой файл tsconfig.
Этот способ работает для меня:
1. добавьте свою собственную декларацию в файл декларации, такой как index.d.ts (возможно, в корне проекта) 2. добавьте ваш index.d.ts в tsconfig.json
- изменить: необходимые кавычки вокруг имени модуля
У меня была та же проблема с использованием модуля узла с приложением реагирования, написанным на машинописи. Модуль был успешно установлен с помощью npm i --save my-module . Он написан на javascript и экспортирует Client класс.
Компиляция завершается с ошибкой:
@types/my-module не существует, поэтому я добавил my-module.d.ts файл рядом с тем, куда my-module импортируется, с предложенной строкой. Я тогда получил ошибку:
Я решил проблему, сказав компилятору, что меня не волнует неявное any , то есть я установил false следующую строку tsconfig.json файла:
Я имею в виду, это работает, но вы теряете возможность строго набирать остальную часть вашего кода. Это не отличный обходной путь.
если вы хотите объявить интерфейс объекта (рекомендуется для большого проекта), вы можете использовать:
Is there any resolution for this? I'm unsure how to resolve this import statement to work with ts-loader and webpack.
The index.js of react-materialize looks likes this. But how do I resolve this for the module import in my own files?
@T Mitchell so does that mean any kind of types which we are missing we never would be able to compile webpack without this creating these types ? There should be some way ?
Примере:
Более хакерский способ - добавить, например, в boot.tsx строку
Это работает, но другие решения лучше IMO.
Я выполнил следующие команды из командной строки nodejs, находясь в каталоге папки проекта:
- npm init
- npm install -g webpack
- npm install --save react react-dom @types/react @types/react-dom
- npm install --save-dev typescript awesome-typescript-loader source-map-loader
- npm install ajv@^6.0.0
- npm i react-html-id
- импортировать пакет (в модулях узла) в файл App.js, добавив код: import UniqueId from 'react-html-id';
Я сделал выше (хотя у меня уже был установлен npm), и это сработало!
Кроме того, эта ошибка исправляется, если пакет, который вы пытаетесь использовать, имеет свои собственные файлы типов и перечисляет их в package.json > атрибут
Если для используемого вами модуля нет @types/ , вы можете легко обойти проблему, добавив // @ts-ignore комментарий выше, т.е.
В качестве альтернативы вы можете создать недостающее @types/ следующее:
У меня была эта проблема, когда я добавил react-router-dom в новое приложение CRA, используя машинопись. После того как я добавил @types/react-router , проблема была исправлена.
У меня была похожая ошибка, но для меня это была react-router . Решил это путем установки типов для него.
Если вы хотите отключить его для всего сайта, вы можете вместо этого отредактировать tsconfig.json и установить noImplicitAny на false .
У меня была та же проблема, но не обязательно связанная с машинописью, поэтому я немного боролся с этими разными вариантами. Я делаю очень простое приложение create-реагировать, используя специальный модуль react-portal-tooltip, , получая похожую ошибку:
Не удалось найти файл декларации для модуля «response-portal-tooltip». «/node_modules/react-portal-tooltip/lib/index.js» неявно имеет тип «любой». Попробуйте npm install @types/react-portal-tooltip , если он существует, или добавьте файл новой декларации (.d.ts), содержащий declare module 'react-portal-tooltip'; ts (7016)
Сначала я попробовал много шагов - добавление различных файлов .d.ts , различные установки npm.
Но в конечном итоге у меня сработало touch src/declare_modules.d.ts затем в src/declare_modules.d.ts :
Я немного боролся с различными местами, чтобы использовать эту общую стратегию «объявить модуль» (я очень новичок), поэтому я думаю, что это будет работать с различными вариантами, но я включил пути для того, что сработало, работает со мной.
Сначала я думал, что import './declare_modules.d.ts' был необходим. Хотя сейчас кажется, что это не так! Но я включаю шаг на случай, если это кому-то поможет.
Это мой первый ответ на stackoverflow, поэтому я прошу прощения за разбросанный здесь процесс и надеюсь, что он все еще был полезным! : )
Я установил библиотеку response-vis для своего кода реакции.
Я использовал эту команду, как в учебнике: npm install react-vis --save
Но когда я включаю библиотеку с этим кодом: import from 'react-vis';
Это дает мне следующую ошибку:
Could not find a declaration file for module 'react-vis'. 'C:/react-vis/dist/index.js' implicitly has an 'any' type.
Try npm install @types/react-vis if it exists or add a new declaration (.d.ts) file containing declare module 'react-vis';
И даже это не работает. Кто-нибудь знает, как это сделать?
Я просто новичок в реакции.
25 Answers 25
I had a similar error but for me it was react-router . Solved it by installing types for it.
If you would like to disable it site wide you can instead edit tsconfig.json and set noImplicitAny to false .
Although there is currently no such @types/react-navigation-tabs package yet, still the mentioned "noImplicitAny": false, did disable it (I got this issue because of using react-native init MyProject --template typescript, I think so at least) 👍
Best answer. Had the same issue with react-slick as my project is a TypeScript project. Fix npm i --save-dev @types/react-slick
For those who wanted to know that how did I overcome this . I did a hack kind of stuff .
Inside my project I created a folder called @types and added it to tsconfig.json for find all required types from it . So it looks somewhat like this -
And inside that I created a file called alltypes.d.ts . To find the unknown types from it . so for me these were the unknown types and I added it over there.
So now the typescript didn't complain about the types not found anymore . :) win win situation now :)
I missed the part about it being in a separate file. Seems like putting those declare statements in a file named index.d.ts fixed it for me. I didn't have to touch typeRoots.
That works just fine but it causes issues when using require for other stuff like images. Basically, it just doesn't allow you to use require for anything.
this solution no longer works with latest TS. nvalid module name in augmentation. Module 'some-dumb-lib-with-no-types' resolves to an untyped module at '/path/to/module', which cannot be augmented.
Something also worth mentioning: depending on the location of your source, you may also need to add "../types" to your "includes" array
I have issues with react-countdown-clock , created @types folder and did all the above steps. still getting the same error.
I've had a same problem with react-redux types. The simplest solution was add to tsconfig.json:
Example:
this worked great in IntelliJ IDE, but the custom typeRoots method (which is the accepted answer) did even work in VS Code IDE
I think this is a hack, though this solved the problem but Is there any valid and permanent solution for this problem?
I think this is the best solution to this problem, I don't think it's viable to npm i every package that throws the err
Problem solving begins from a simplest answer to avoid blockers during development. Next step is to find more elegant and focussed solution
If there is no @types/ for the module you are using, you may easily circumvent the issue by adding a // @ts-ignore comment above i.e.
Alternatively you may create the missing @types/ following:
Make sure to stop your react local server and start it again after doing the following:
1- Create .d.ts file manually, you just need to do the following:
2 - enter src folder
3 - create global.d.ts file
4 - declare modules in it like:
I answered it here before and it was nice
Make sure to stop your react local server and start it again if it still doesn't work after doing the above. npm start
In my case I had a problem with react, so I started doing:
npm install @types/react
and then to the
npm install @types/react-dom
This worked for me
Basically, it updates your existing packages when you re-run the commands. That was the reason the problem is solved.
Just install the necessary types for react and it should solve the error.
if you are using yarn:
if you are using npm:
Thanks. This worked for me. Surprising that I had to do this as I had created the react app using the command npx create-react-app react-quiz --template typescript I thought this would be enough to take care of all dependencies
All you need to do is run the below script. Then, remove/re-install the module that you want to use.
I had this same problem but not necessarily relating to typescript, so I struggled a bit with these different options. I am making a very basic create-react-app using a specific module react-portal-tooltip, getting similar error:
Could not find a declaration file for module 'react-portal-tooltip'. '/node_modules/react-portal-tooltip/lib/index.js' implicitly has an 'any' type. Try npm install @types/react-portal-tooltip if it exists or add a new declaration (.d.ts) file containing declare module 'react-portal-tooltip'; ts(7016)
I tried many steps first - adding various .d.ts files, various npm installs.
But what eventually worked for me was touch src/declare_modules.d.ts then in src/declare_modules.d.ts :
and in src/App.js :
I struggled a bit with the different locations to use this general 'declare module' strategy (I am very much a beginner) so I think this will work with different options but I am included paths for what worked work me.
I initially thought import './declare_modules.d.ts' was necessary. Although now it seems like it isn't! But I am including the step in case it helps someone.
This is my first stackoverflow answer so I apologize for the scattered process here and hope it was still helpful! :)
Любое решение для этого. Я не уверен, как разрешить этот оператор импорта для работы с ts-loader и веб-пакетом.
index.js реакции-материализации выглядит следующим образом. Но как решить это для импорта модуля в моих собственных файлах ..
Для тех, кто хотел узнать, как я это преодолел. Я делал подобные вещи.
Внутри моего проекта я создал папку с именем @Types и добавил ее в tsconfig.json, чтобы найти из нее все необходимые типы. Так это выглядит примерно так -
И внутри я создал файл с именем alltypes.d.ts . Чтобы найти неизвестные типы из него. так что для меня это были неизвестные типы, и я добавил их туда.
Так что теперь машинопись не жаловалась на типы, не найденные больше. :) выиграть выиграть ситуацию сейчас :)
У меня была такая же проблема с типами реаги-редукс. Самое простое решение было добавлено в tsconfig.json:
3 ответа
Таким образом, файл с импортированным response-vis может выглядеть так:
Надеюсь, скоро появится решение @types, но до тех пор это работало для меня.
P.S. Если вам интересно, что это за /// , вы можете прочитать соответствующую документацию по нему здесь. В машинописном тексте это называется «директивой с тройной косой чертой».
Убедитесь, что у вас установлена последняя версия react-vis (1.11.2)
Возможно, удалите все ваши модули node и снова запустите npm install с новым обновленным package.json. Обычно описываемая вами ошибка возникает из-за того, что ваши модули ведут себя странно . Вот почему я предлагаю переустановить их;)
Тогда ваш компонент будет нормально работать следующим образом:
Если вы последуете моему примеру с песочницей, у вас все будет хорошо !, удачи!
Я считаю, что вы используете машинописный текст для компиляции кода. Первая попытка npm install @types/react-vis .
Если это не сработает, вам придется выбрать более длинный маршрут:
- Создайте имя папки: typings в корне вашего проекта,
- внутри ввода создайте новую папку с именем: " response-vis" и в этой папке создайте файл response-vis.d.ts
- напишите declare module 'react-vis' в файл response-vis.d.ts.
- перейдите в файл tsconfig.json и добавьте "typeRoots": [ "../../typings", "../../node_modules/@types"] в compilerOptions (с правильным относительным путем к вашим папкам), чтобы TypeScript знал, где он может найти определения типов ваших библиотек и модулей и добавить новое свойство
- добавьте exclude": ["../../node_modules", "../../typings"] "в файл tsconfig.json. Вот пример того, как должен выглядеть ваш файл tsconfig.json:
Но когда веб-пакет компилирует мой, .tsx он выдает ошибку для вышеуказанного:
Любое решение для этого. Я не уверен, как разрешить этот оператор импорта для работы ts-loader и webpack.
Так index.js выглядит объект response-materialize. Но как решить эту проблему для импорта модуля в мои собственные файлы ..
@T Mitchell, значит ли это, что каких-либо типов, которые нам не хватает, мы никогда не сможем скомпилировать webpack без создания этих типов? Должен быть какой-то способ?
У меня была аналогичная ошибка, но для меня это было react-router . Решил, установив на него типы.
Если вы хотите отключить сайт , он широко вы можете вместо редактирования tsconfig.json и набор noImplicitAny в false .
Хотя в настоящее время такого пакета @ types / response-navigation-tabs нет, все же упомянутое "noImplicitAny": false, его отключило (я получил эту проблему из-за использования response-native init MyProject --template typescript, по крайней мере, я так думаю) 👍
Для тех, кто хотел знать, как я это преодолел. Я сделал что-то вроде хакерства.
Внутри своего проекта я создал папку с именем @types и добавил ее в tsconfig.json, чтобы найти в ней все необходимые типы. Это выглядит примерно так -
И внутри я создал файл с именем alltypes.d.ts . Найти из него неизвестные виды. так что для меня это были неизвестные типы, и я добавил их туда.
Так что теперь машинопись не жаловалась на типы, которые больше не были найдены. :) выиграть выиграть сейчас ситуацию :)
Я пропустил часть о том, что это было в отдельном файле. Похоже, что размещение этих declare утверждений в файле с именем index.d.ts исправлено для меня. TypeRoots трогать не пришлось.
Это работает нормально, но вызывает проблемы при использовании require для других вещей, таких как изображения. По сути, он просто не позволяет вам использовать его require ни для чего.
это решение больше не работает с последней версией TS. nvalid module name in augmentation. Module 'some-dumb-lib-with-no-types' resolves to an untyped module at '/path/to/module', which cannot be augmented.
Стоит также упомянуть кое-что: в зависимости от местоположения вашего источника вам может также потребоваться добавить "../types" в ваш массив "includes"
У меня есть проблемы с react-countdown-clock , созданной @types папкой и сделал все вышеуказанные шаги. по-прежнему получаю ту же ошибку.
У меня была такая же проблема с типами response-redux. Самое простое решение было добавлено в tsconfig.json:
Пример:
это отлично работало в IntelliJ IDE, но пользовательский typeRoots метод (который является принятым ответом) работал даже в VS Code IDE
Я думаю, что это взлом, хотя это решило проблему, но есть ли какое-либо действительное и постоянное решение этой проблемы?
Я думаю, что это лучшее решение этой проблемы, я не думаю, что это жизнеспособно для npm в каждом пакете, который выдает ошибку
Если @types/ модуль, который вы используете, отсутствует, вы можете легко обойти проблему, добавив // @ts-ignore комментарий выше, т.е.
В качестве альтернативы вы можете создать @types/ следующее:
В моем случае у меня была проблема с реакцией, поэтому я начал делать:
npm install @types/react
npm install @types/react-dom
Это сработало для меня
Даже несмотря на то, что они уже были установлены, повторный запуск этих команд решил проблему для меня.
По сути, он обновляет ваши существующие пакеты, когда вы повторно запускаете команды. По этой причине проблема решена.
Все, что вам нужно сделать, это запустить приведенный ниже сценарий. Затем удалите / переустановите модуль, который вы хотите использовать.
У меня возникла эта проблема, когда я добавил react-router-dom в новое приложение CRA с помощью машинописного текста. После того, как я добавил @types/react-router , проблема была исправлена.
У меня была такая же проблема, но не обязательно относящаяся к машинописному тексту, поэтому я немного боролся с этими различными вариантами. Я делаю очень простое приложение create-response-app, используя конкретный модуль, react-portal-tooltip, получающий аналогичную ошибку:
Не удалось найти файл декларации для модуля response-portal-tooltip. '/node_modules/react-portal-tooltip/lib/index.js' неявно имеет тип 'любой'. Попробуйте, npm install @types/react-portal-tooltip если он существует, или добавьте новый файл объявления (.d.ts), содержащий declare module 'react-portal-tooltip'; ts (7016)
Сначала я пробовал много шагов - добавлял различные .d.ts файлы, различные установки npm.
Но то, что в конечном итоге сработало для меня, было touch src/declare_modules.d.ts тогда в src/declare_modules.d.ts :
Я немного боролся с разными местоположениями, чтобы использовать эту общую стратегию «объявления модуля» (я очень новичок), поэтому я думаю, что это будет работать с разными вариантами, но я включил пути для того, что сработало у меня.
Я изначально думал import './declare_modules.d.ts' это необходимо. Хотя сейчас вроде как нет! Но я включаю шаг на случай, если он кому-то поможет.
Это мой первый ответ на stackoverflow, поэтому я прошу прощения за разрозненный процесс здесь и надеюсь, что он все еще был полезен! :)
Читайте также: