内部服务器错误：无法在 virtual:remix/server-build 中加载 url。文件存在吗？

Question

我最近在我的混音应用程序中重命名了一条路线，由于配置/路径解析的原因我无法完全理解，它似乎找不到路线。这是新添加的路线：

app/routes/events.\eventId.tsx

文件夹结构

完整错误：

[vite] Internal server error: Failed to load url /app/routes/events./eventId.tsx (resolved id: /app/routes/events./eventId.tsx) in virtual:remix/server-build. Does the file exist?
  at loadAndTransform (file:///home/remixapp/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:51857:17)
  at async instantiateModule (file:///home/remixapp/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:52816:44)

我尝试查看配置文件，看看是否需要向某种路径解析器添加任何路径。

目前，我尝试将上面的路径显式添加到

include

中的

tsconfig.json

数组和

content

中的

tailwind.config.ts

数组中。

tsconfig.json

{
  "include": [
    "**/*.ts",
    "**/*.tsx",
    "**/.server/**/*.ts",
    "**/.server/**/*.tsx",
    "**/.client/**/*.ts",
    "**/.client/**/*.tsx",
  ],
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ES2022"],
    "types": ["@remix-run/node", "vite/client"],
    "isolatedModules": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "resolveJsonModule": true,
    "target": "ES2022",
    "strict": true,
    "allowJs": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./app/*"]
    },

    // Vite takes care of building everything, not tsc.
    "noEmit": true
  }
}

tailwind.config.ts

import type { Config } from "tailwindcss";

export default {
  content: ["./app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        sans: [
          '"Inter"',
          "ui-sans-serif",
          "system-ui",
          "sans-serif",
          '"Apple Color Emoji"',
          '"Segoe UI Emoji"',
          '"Segoe UI Symbol"',
          '"Noto Color Emoji"',
        ],
      },
    },
  },
  plugins: [],
} satisfies Config;

我已经成功完成了 Remix 教程，但是通过比较和对比教程的最终输出和我当前的应用程序，我并不能立即看出我缺少什么。

Answer 1

错误表示找不到文件

"/app/routes/events./eventId.tsx"

，但您已将文件命名为

"/app/routes/events.\eventId.tsx"

，因此服务器无法根据 URL 路径找到正确的文件。

通过 CLI 创建文件时，在终端中使用了转义

"\"

字符：

touch app/routes/contacts.\$contactId.tsx

。

创建app/routes目录和联系路由模块

mkdir app/routes
touch app/routes/contacts.\$contactId.tsx

再往下读一点：

在 Remix 路由文件约定中，

.

将在 URL 中创建

/

，并且

$

使片段动态化。

他们创建了一个名为

"app/routes/contacts.$contactId.tsx"

的文件。在这种情况下，问题似乎出在文件名中使用“”而不是“$”。

将文件重命名为

"events.$eventId.tsx"

。