Не удалось найти файл объявления модуля react

Обновлено: 04.07.2024

Я читаю, как работает разрешение модуля TypeScript.

У меня есть следующий репозиторий: ts-di. После компиляции структура каталогов выглядит следующим образом:

В моем пакете.json я написал "main": "dist/index.js" .

В Node.js все работает отлично, но TypeScript:

Не удалось найти файл декларации для модуля ts-di. '/path/to/node_modules/ts-di/dist/index.js' неявно имеет тип "any".

И все же, если я импортирую как следует, то все работает:

Что я делаю неправильно?

Это чувство, когда вы смотрите на два дня и находите это так: просто удалите .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

Еще два способа, когда модуль не принадлежит вам - просто попробуйте установить его из @types :

Или, если ошибка установки - попробуйте переписать import на require :

Если вы не можете найти имя, запустите это для TypeScript 2.0: npm install @types/node --save-dev Я думаю, что использование require вместо import является чем-то вроде анти-паттерна: лучше объявить модуль в файле .d.ts ; см. мой ответ ниже. примечательно: вам нужно сделать это в дополнение к установке базового пакета (была эта проблема с sinon)

Если вы импортируете сторонний модуль 'foo' , который не предоставляет никаких типов, либо в самой библиотеке, либо в пакете @types/foo (сгенерированном из репозитория DefinitelyTyped), вы можете сделать эту ошибку прочь, объявив модуль в файле .d.ts :

Затем, когда вы импортируете foo это будет просто введено как any .

Кроме того, если вы хотите перевернуть свои собственные тиски, вы также можете это сделать:

Тогда это скомпилируется правильно:

Вам не нужно предоставлять полный набор символов для модуля, достаточно только для битов, которые вы фактически используете (и хотите иметь правильные типизации), поэтому это особенно легко сделать, если вы используете довольно небольшое количество API.

С другой стороны, если вы не заботитесь о типизации внешних библиотек и хотите, чтобы все библиотеки без типизаций были импортированы как any , вы можете добавить это в файл .d.ts :

Выгода (и минус) этого заключается в том, что вы можете импортировать абсолютно все, и TS будет компилироваться.

где компилятор ищет файлы d.ts ? Вы должны предоставить какую-либо конфигурацию, такую как typeRoots ? @Tom Он ищет файлы .d.ts в тех же местах, что и обычные файлы .ts : как указано «files», «include» и «exclude» в tsconfig.json . Я бы не рекомендовал использовать typeRoots для этой цели: он предназначен для размещения модулей внешнего типа (то есть node_modules/@types ), а не отдельных файлов .d.ts . Похоже, этот файл подстановки нужно называть "typings.d.ts" @jacob Я уверен, что нет. Ни один из файлов .d.ts которые я использую в своем проекте, не называется так. @Retsam Я вчера пробовал голые .d.ts , но это не сработало, и затем я увидел где-то пример с использованием подстановочного знака, который назвал файл typings.d.ts и это сработало. Это степень моего наблюдения. @jacob О, вы пытались просто назвать файл ".d.ts"? .d.ts - это расширение, вы должны поставить что-то перед ним, но это может быть что угодно, это не обязательно должны быть «печатания».

TypeScript в основном реализует правила и добавляет типы в ваш код, чтобы сделать его более понятным и точным из-за отсутствия ограничений в Javascript. TypeScript требует, чтобы вы описали свои данные, чтобы компилятор мог проверить ваш код и найти ошибки. Компилятор сообщит вам, если вы используете несогласованные типы, если вы находитесь вне области действия или вы пытаетесь вернуть другой тип. Поэтому, когда вы используете внешние библиотеки и модули с помощью TypeScript, они должны содержать файлы, описывающие типы в этом коде. Эти файлы называются файлами декларации типа с расширением d.ts Большинство типов объявлений для модулей npm уже написаны, и вы можете включить их, используя npm install @types/module_name (где 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 (с соответствующим относительным путем к ваши папки), чтобы позволить TypeScript знать, где он может найти определения типов ваших библиотек и модулей и добавить новое свойство "exclude": ["../../node_modules", "../../typings"] в файл. Вот пример того, как должен выглядеть ваш файл tsconfig.json:

Делая это, ошибка исчезнет, и вы сможете придерживаться последних правил ES6 и TypeScript.

Консоль говорит, что не может найти модуль в каталоге, но я проверил по крайней мере 10 раз на опечатки. В любом случае, здесь код компонента.

Я хочу сделать заголовок в корне

Это компонент Header

Я хотя бы 10 раз проверил, что модуль находится в этом месте ./src/components/header/header , и это так (папка "header" содержит "header.js").

Тем не менее, React по-прежнему выдает эту ошибку:

Не удалось скомпилировать

./src/App.js Module not found: Can't resolve './src/components/header/header' in '/home/wiseman/Desktop/React_Components/github-portfolio/src'

Тест Npm говорит то же самое.

ОТВЕТЫ

Ответ 1

Способ, которым мы обычно используем import , основан на относительном пути.

. и .. аналогичны тому, как мы используем для навигации в terminal таком как cd.. чтобы выйти из каталога и mv

/file. для перемещения file в текущий каталог.

В вашем случае App.js находится в каталоге src/ а header.js - в src/components . Чтобы import вы должны import Header from './components/header' . Это примерно переводится в мой текущий каталог, найдите папку компонентов, которая содержит файл заголовка.

Теперь, если из header.js , вам нужно что-то import с card , вы это сделаете. import Card from '../containers/card' . Это перевести, переместиться из моего текущего каталога, искать контейнеры имен папок, в которых есть файл карты.

Что касается import React, < Component >from 'react' , это не начинается с узла ./ или ../ или / поэтому узел начнет искать модуль в node_modules в определенном порядке до тех пор, пока не будет найдена react . Для более подробного понимания это можно прочитать здесь.

Ответ 2

Если вы создаете приложение с помощьюact-create-app, не забудьте установить переменную среды:

Или добавьте файл .env в корневую папку;

Ответ 3

Я делаю то же самое, что предложено выше, но он все еще показывает, что модуль не найден. Мой код App.js:

Ответ 4

Вы должны быть в папке проекта, если вы находитесь в src или public , вы должны выйти из этих папок. Предположим, что ваше имя реагирующего проекта - "привет-реакция", тогда cd hello-react

Ответ 5

У меня была похожая проблема.

ПРИМЕЧАНИЕ: ./ был до компонентов. Вы можете прочитать пост @Zac Kwan выше о том, как использовать import

Ответ 6

Вы должны изменить заголовок импорта с./src/components/header/header 'на

импортировать заголовок из../src/components/header/header '

Ответ 7

Вы можете попробовать выполнить 'npm install' в папке приложения. Это также может решить проблему. Это сработало для меня.

Ответ 8

Я думаю, что это двойное использование заголовка. Я сам попробовал что-то похожее и тоже вызвал проблемы. Я прописал файл компонента в соответствие с остальными, и он сработал.

Ответ 9

Проверьте наличие операторов импорта. Он должен заканчиваться точкой с запятой. Если вы пропустите, вы получите эту ошибку.

Есть ли какое-либо решение для этого? Я не уверен, как разрешить эту инструкцию импорта для работы с ts-loader и webpack.

index.js из react-materialize выглядит так. Но как мне решить эту проблему для импорта модуля в моих собственных файлах?

Я совершенно новичок в ReactJS,и я обнаружил, что застрял в следующем. Я установил react-карты через npm вот так: npm install --save react-cards Установка была в порядке, и я хочу импортировать ее в свой код следующим образом: import Card from 'react-cards'; Но потом я получил ошибку, сказав это.

У меня была аналогичная ошибка, но для меня это было react-router . Решил эту проблему, установив для нее типы.

Если вы хотите отключить его на всем сайте, вы можете вместо этого отредактировать tsconfig.json и установить noImplicitAny в false .

Для тех, кто хотел знать, как я преодолел это . Я занимался хакерством .

Внутри моего проекта я создал папку с именем @types и добавил ее в tsconfig.json, чтобы найти из нее все необходимые типы . Так что это выглядит примерно так -

И внутри этого я создал файл с именем alltypes.d.ts . Чтобы найти неизвестные типы из него . так что для меня это были неизвестные типы, и я добавил его туда.

Так что теперь typescript не жаловался на типы, которые больше не найдены . :) выигрышная ситуация выигрыша теперь :)

У меня была такая же проблема с типами react-redux. Самым простым решением было добавить к tsconfig.json:

Пример:

Если для используемого вами модуля нет @types/<package> , вы можете легко обойти проблему, добавив комментарий // @ts-ignore выше, т. е.

В качестве альтернативы вы можете создать недостающий @types/<package> следующим образом:

В моем случае у меня были проблемы с react, поэтому я начал делать:

npm install @types/react

npm install @types/react-dom

Это сработало для меня

Я пытаюсь импортировать React из 'react' и получаю ошибку.. Настройка, которую я использую, была создана со стандартным npx create-react-app. Ошибка, которую я вижу, исходит от VS Code. импорт реагируют с 'react'; Не удалось найти файл объявления для модуля 'react'.

Я прохожу учебник Gatsby.js, и во втором уроке вам нужно импортировать некоторые шрифты. Когда я пытаюсь импортировать theme lawton , я вижу эту ошибку под import lawtonTheme from typography-theme-lawton; Сначала я сделал npm install --save typography-theme-lawton Could not find a declaration file.

Все, что вам нужно сделать, это запустить приведенный ниже сценарий. Затем remove/re-install модуль, который вы хотите использовать.

У меня была эта проблема, когда я добавил react-router-dom в новое приложение CRA с помощью typescript. После того , как я добавил @types/react-router , проблема была исправлена.

У меня была та же проблема, но не обязательно связанная с typescript, поэтому я немного поборолся с этими различными вариантами. Я делаю очень простой create-react-app, используя конкретный модуль react-portal-tooltip, , получая аналогичную ошибку:

Не удалось найти файл объявления для модуля 'react-portal-tooltip'. '/node_modules/react-portal-tooltip/lib/index.js ' неявно имеет тип 'any'. Попробуйте 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 :

Я немного боролся с различными местами, чтобы использовать эту общую стратегию 'declare module' (я очень новичок), поэтому я думаю, что это будет работать с различными вариантами, но я включил пути для того, что сработало для меня.

Сначала я думал, что import './declare_modules.d.ts' необходимо. Хотя теперь кажется, что это не так! Но я включаю этот шаг на случай, если он кому-то поможет.

Это мой первый ответ stackoverflow, поэтому я приношу свои извинения за разбросанный здесь процесс и надеюсь, что он все еще был полезен! :)

Просто установите необходимые типы для react, и это должно устранить ошибку.

если вы используете пряжу:

если вы используете npm:

Кроме того, эта ошибка исправляется, если пакет, который вы пытаетесь использовать, имеет собственный файл(ы) типа и указан в атрибуте package.json typings

Более хитрый способ-добавить, например, в 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), и это сработало!

Не удалось найти файл объявления для модуля 'react/jsx-runtime'

Если у кого-то возникла эта ошибка, вы будете удивлены , узнав, что при создании приложения react с create-react-app он показывает только @types/react в package.json . Но если вы проверите внутри папки node_modules/@types , вы не найдете никакой папки react .

Решение состоит в том, чтобы просто полностью стереть папку node_modules и переустановить - npm install или, возможно, можно пойти с установкой отдельного модуля - npm install @types/react .

в 2021 году, чтобы создать файл .d.ts вручную, вам просто нужно сделать следующее:

1 - введите src folder

2 - создать файл global.d.ts

3-объявите модули в нем, как:

я уже отвечал на него здесь раньше, и это было приятно

попробуйте добавить в файл tsconfig.json: "noImplicitAny": false сработало для меня

Я получил его после многих неприятностей В приложении react в папке src будет файл react-app-env.d.ts просто объявите модуль там

Могут быть случаи, когда некоторые зависимости не имеют типов, и ts заставляет вас включать типы для этого. Существует обходной путь для решения этой проблемы, который заключается в использовании javascript вместо этого.

import from "react-charts"; //error: Не удалось найти файл объявления для модуля 'react-charts'.

Обходной путь: const ReactChart = require("react-charts"); //no-error

работает просто отлично

Похожие вопросы:

Я пытался написать пользовательский файл декларации для модуля 'react-dates' npm, но не смог заставить компилятор разрешить мой файл декларации для этого модуля. Когда я делаю import.

Я читал, как работает разрешение модуля TypeScript. У меня есть следующий репозиторий: @ts-stack/di . После компиляции структура каталогов выглядит следующим образом: ├── dist │ ├── annotations.d.ts.

пока я добавляю любой компонент в свой чистый проект react-native, экран приложения превращается в белую пустую страницу. Строка импорта 'react-native-foo-package' имеет '. ' рядом с именем пакета.

Я пытаюсь установить react-input-search . У меня есть ошибка: Не удалось найти файл объявления для модуля 'react-search-input'. '. /app/node_modules/react-search-input/lib/index.js' неявно имеет.

VB CODE code Привет всем! Я пишу одно приложение, используя REACT, и когда я пытался использовать import < BrowserRouter, Route, Link >from "react-router-dom"; Я получаю следующую ошибку.

Я читаю, как работает разрешение модуля TypeScript .

У меня есть следующий репозиторий: ts-di . После компиляции структура каталогов выглядит следующим образом:

В моем пакете «main»: «dist / index.js» я написал . import < Injector >from 'ts-di' ;

В Node.js все работает отлично, но TypeScript:

Не удалось найти файл декларации для модуля ts-di. '/path/to/node_modules/ts-di/@types/index.js' неявно имеет тип ' npm install - D @types / module - name '.

И все же, если я импортирую как следует, то все работает:

Что я делаю не так?

Еще два способа, когда модуль не принадлежит вам - просто попробуйте установить его из : // import * as yourModuleName from 'module-name'; const yourModuleName = require ( 'module-name' );

Или, если установите ошибочный - попробуйте переписать import в "main": "dist/index.js" :

Это чувство , когда вы смотрите в течение двух дней , и найти его , как это: просто удалить .js из в и все работает отлично! "main" : "dist/index" , typings

UPD : этот ответ относительный, если у вас есть собственный пакет npm, если нет - см. Мой ответ ниже .

И если выше ответ не разрешен импорт вашего модуля, попробуйте просто добавить в : "main" : "dist/index" , "typings" : "dist/index" , dist

Конечно, вот папка dist - там хранятся файлы вашего модуля.

Если вы импортируете сторонний модуль @types/foo , который не предоставляет .d.ts // foo.d.ts, объявляет модуль 'foo' ; , либо в самой библиотеке, либо в foo пакете (сгенерированном из репозитория DefinitelyTyped ), вы можете удалить эту ошибку, объявив модуль в any файле:

Затем, когда вы импортируете, это будет просто введено как . import < getRandomNumber >from 'foo' ; const x = getRandomNumber (); // x is inferred as number any

Кроме того, если вы хотите перевернуть свои собственные тиски, вы также можете это сделать:

Тогда это скомпилируется правильно:

Вам не нужно предоставлять полный набор символов для модуля, достаточно только для битов, которые вы фактически используете (и хотите иметь правильные типизации), поэтому его особенно легко сделать, если вы используете довольно небольшое количество API.

С другой стороны, если вы не заботитесь о типизации внешних библиотек и хотите, чтобы все библиотеки без типизаций были импортированы как any , вы можете добавить это в файл: declare module '*' ;

TypeScript в основном реализует правила и добавляет типы в ваш код, чтобы сделать его более понятным и точным из-за отсутствия ограничений в Javascript. TypeScript требует, чтобы вы описали свои данные, чтобы компилятор мог проверить ваш код и найти ошибки. Компилятор сообщит вам, если вы используете несогласованные типы, если вы находитесь вне области действия или вы пытаетесь вернуть другой тип. Поэтому, когда вы используете внешние библиотеки и модули с помощью TypeScript, они должны содержать файлы, описывающие типы в этом коде. Эти файлы называются файлами декларации типа с расширением npm install @types/module_name . Большинство типов объявлений для модулей npm уже написаны, и вы можете включить их с помощью import * as module_name from 'module-name' (где module_name - это имя модуля, типы которого вы хотите включить).

Тем не менее, есть модули, которые не имеют определений типов, и чтобы ошибка исчезла и импортировала модуль typings , создав папку 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.

Я решил эту проблему просто так:

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

Читайте также: