Мобильная версияЯ пытаюсь создать веб-сайт, используя Next.js, Typescript и Tailwind. Он работал отлично, пока я не попытался использовать Material Tailwind для создания карточек, после чего Next.js начал возвращать, казалось бы, несущественную ошибку во время компиляции... Я не могу точно понять, в чем проблема. В качестве редактора я использую GitHub Codespaces, поскольку он работает на моем школьном Chromebook.
Вот возвращается ошибка:
Не удалось скомпилировать ./app/globals.css:4:0 Модуль не найден: невозможно разрешить './${i.urlToImage}' https://nextjs.org/docs/messages/module-not-found Импортировать трассировку для запрошенного модуля: ./app/globals.css Эта ошибка произошла во время процесса сборки, и ее можно устранить, только исправив ошибку. Однако ${i.urlToImage — это значение, возвращаемое вызовом API, поэтому я не понимаю, почему его называют «модулем» и какое отношение он имеет к CSS (Трассировка импорта — это ./app/globals.css). Вызов API работает и возвращает действительные URL-адреса (я отредактировал его в console.log). Из-за этой проблемы веб-сайт не скомпилируется, поэтому я не могу работать над остальным. Это соревнование, поэтому помощь будет очень кстати!
Это код:
"использовать сервер" импортировать «dotenv/config»; новости асинхронной функции () { const req = await fetch(`https://newsapi.org/v2/everything?q='green Energy'&apiKey=${process.env.NEWS_API_KEY}`); const resp = ожидание req.json(); возврат соответственно; }; экспортировать асинхронную функцию по умолчанию News () { константные данные = ждут новостей (); возвращаться ( Последние новости {данные.статьи ? ( data.articles.map((i: { title: строка, URL: строка, urlToImage: строка, описание: строка,PublishAt: строка }) => { возвращаться (
{i.title} {i.publishedAt
{i.description}
); }))
Загрузка...
)} ); };
Это globals.css.
база @tailwind; компоненты @tailwind; утилиты @tailwind; @layer base { html { @apply bg-black-50; @apply text-white-50; переполнение-х: скрыто; } ч1, ч2, ч3, п { поле слева: 5%; } } @layer утилиты { .stroke-текст { начертание шрифта: жирный; -webkit-text-stroke: 1px #F6F6F650; размер шрифта: 30vw; -webkit-text-fill-color: прозрачный; } } Код работал отлично, пока я не попытался использовать Material Tailwind внутри return:
{i.title} {i.publishedAt
{i.description}
Именно тогда началась ошибка. Сначала я подумал, что это может быть асинхронная лажа, поэтому создал компонент, но это не сработало. Затем я перешел к globals.css и начал комментировать код (./app/globals.css:4:0 — пустая строка). Он начал работать только после того, как я закомментировал @tailwind Utilities, но из-за этого стиль остальной части сайта стал ужасным. После этого я задался вопросом, была ли это ошибка, и удалил .next, затем tsconfig.json, чтобы посмотреть, исправит ли это автоматическая сборка, но это тоже не сработало. Я попробовал перезапустить сервер, снова запустить VSC и т. д., но ничего не помогло. Наконец я попытался вернуться к более старой версии своего кода, но ошибка все равно не исчезла, и ее использование в новом экземпляре GitHub Codespace тоже не сработало.
Насколько мне известно, ${i.urlToImage не является модулем; это строка URL-адреса, возвращаемая из API, поэтому, опять же, меня очень смущает, почему в ошибке написано «Импортировать трассировку для запрошенного модуля: ./app/globals.css».
Почему ${i.urlToImage считается модулем и почему это влияет на CSS? Как это исправить?
Спасибо!
