NextJS не может распознавать файлы TypeScript

Я хочу разработать свой веб-сайт, используя TypeScript, а не JS. Поэтому я последовал за официальным лицом NextJS, чтобы установить TS с нуля, но когда я запускаю npm run dev, меня приветствует страница с ошибкой 404.
ОК, ниже мой tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Хм, вроде ничего страшного, я думаю :(

А дальше идет package.json.

{
  "name": "MY_PROJECT_NAME",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "go": "next build && next start",
    "debug": "NODE_OPTIONS='--inspect' next dev"
  },
  "dependencies": {
    "@mdx-js/loader": "^1.6.22",
    "@next/mdx": "^10.0.3",
    "@types/node": "^14.14.14",
    "@types/react": "^17.0.0",
    "@types/styled-components": "^5.1.5",
    "@types/webpack": "^4.41.25",
    "autoprefixer": "^10.1.0",
    "express": "^4.17.1",
    "gray-matter": "^4.0.2",
    "next": "^10.0.3",
    "postcss": "^8.2.1",
    "raw-loader": "^4.0.2",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-markdown": "^4.3.1",
    "remark-emoji": "^2.1.0",
    "remark-html": "^13.0.1",
    "remark-images": "^2.0.0",
    "styled-components": "^5.2.1",
    "tailwindcss": "^2.0.2",
    "typescript": "^4.1.3",
    "webpack": "^4.44.0"
  }
}

Хм, что не так с моими кодами?
Когда я запускаю свои коды как .jsx, все нормально работает. Но .tsx не работает.
Кто-нибудь знает об этой проблеме?

-- Добавить index.tsx --

import Layout from '../components/Layout'

export default () => (
    <>
        <Layout title = "Kreimben::Home" isHome = {true}>
            <div className = "flex justify-center text-center">
                <div className = "bg-gray-300 p-8 m-12 rounded-lg w-4/5 text-4xl font-serif">
                                Welcome to indie developer's website!
                </div>
            </div>
            <main className = "flex justify-center">
                <div className = "w-4/5 py-32 mb-12 shadow-xl rounded-lg bg-gradient-to-r from-teal-300 to-blue-500 text-center">
                    <p className = "text-4xl font-serif">I code</p>
                    <p className = "font-semibold text-6xl">iOS, macOS, and anything!</p>
                </div>
            </main>
        </Layout>
    </>
)

Вариант jsx в tsconfig.json должен быть react. В любом случае, можете ли вы поделиться тем, что вы сделали, приведя рабочий пример?

tmhao2005 20.12.2020 16:59

За @tmhao2005 _app.tsx следует официальный документ в этой ссылке, а затем index.tsx, чтобы показать буквально индексную страницу веб-сайта. когда я меняю весь файл tsx на jsx, волшебным образом работает нормально :(

Kreimben 20.12.2020 17:14

Я знаю, что вы следили за их документом. Но я очень хочу проверить, не пропустили ли вы что-то. Вот почему я спросил, что вы сделали

tmhao2005 20.12.2020 17:17

Хорошо, я добавил исходный код index.tsx, а затем просто скажите мне, что вам нужно :) спасибо @tmhao2005

Kreimben 20.12.2020 17:38

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

tmhao2005 20.12.2020 17:54

Давайте продолжим обсуждение в чате.

tmhao2005 20.12.2020 19:00
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
6
4 409
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я только что понял проблему из конфигурации плагина @next/mdx. pageExtensions должен быть [ts, tsx], поскольку вы перешли на Typescript.

Короче говоря, уточнение правильных файлов ext решит проблему:

next.config.js

// ...

module.exports = withMDX({
  pageExtensions: ['ts', 'tsx', 'md', 'mdx'], // Replace `jsx?` with `tsx?`
})

Другие вопросы по теме