Rollup 找不到任何元素（RollupError：意外的标记）

Question

我正在尝试使用 Rollup 制作 next.js 打字稿项目库。 我正在与 rollup 捆绑并将该包托管在 Github 上。 当我运行脚本时

rollup -c

我收到错误：

[!] RollupError: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src/stories/Banner/Banner.tsx (2:12)
1: export default function Banner() {
2:     return (<div className="banner">
               ^
3:       <div className="banner__content">
4:         <h1 className="banner__title">Banner Title</h1>

我尝试使用的所有元素都会发生这种情况。 如何解决这个问题？我认为它与 tsconfig.json.

有关

我的tsconfig.json是：

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "jsxImportSource": "@emotion/react",
    "incremental": true,
    "target": "es5",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "declaration": true,
    "declarationDir": "types",
    "sourceMap": true,
    "outDir": "dist",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "emitDeclarationOnly": true
  },
  "include": [
    ".",
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "next.config.cjss",
    ".stories"
  ],
  "exclude": ["node_modules"]
}

我的rollup.config.mjs是：

import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import typescript from "@rollup/plugin-typescript";
import dts from "rollup-plugin-dts";

export default [
  {
    external: ["react", "react-dom"],
    input: "src/index.tsx",
    output: [
      {
        file: "dist/cjs/types/index.d.ts",
        format: "cjs",
        sourcemap: true,
      },
      {
        file: "dist/esm/types/index.d.ts",
        format: "esm",
        sourcemap: true,
      },
    ],
    plugins: [
      resolve(),
      commonjs(),
      typescript({ tsconfig: "./tsconfig.json" }),
    ],
  },
  {
    input: "dist/esm/types/index.d.ts",
    output: [{ file: "dist/index.d.ts", format: "esm" }],
    plugins: [dts()],
    external: [/\.(css|less|scss)$/],
  },
];

Answer 1

将文件从

file.d.ts

重命名为

file.ts

。