TypeScript + rollupで「Note that you need plugins to import files that are not JavaScript 」というエラー

Question

TypeScript + rollup.js を使ってモジュールを自作しています。

モジュール自体のバンドルは問題ないのですが、デモ用スクリプトのみ下記のようなエラーが表示されてしまいます。

解決方法はありますでしょうか？

demo/src/demo.ts → demo/build.js...
[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
demo/src/demo.ts (1:10)

1: const test:number = 123;
             ^

現状

フォルダ構成

/
+- src  # モジュールのソース
+- dist # 出力先
+- demo # デモ用ファイル
   |  bundle.js   # デモスクリプトの出力 
   +- src
         demo.js  # デモスクリプトのソース

demo.ts

const test:number = 123;
console.log(test);

package.json 抜粋

  "scripts": {
    "demo": "rollup -c rollup.demo.config.js"
  },
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@babel/preset-env": "^7.16.4",
    "@rollup/plugin-babel": "^5.3.0",
    "@rollup/plugin-commonjs": "^21.0.1",
    "@rollup/plugin-node-resolve": "^13.0.6",
    "@rollup/plugin-typescript": "^8.3.0",
    "rollup": "^2.60.0",
    "rollup-plugin-terser": "^7.0.2",
    "tslib": "^2.3.1",
    "typescript": "^4.5.2"
  }

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ES6",
    "moduleResolution": "node",
    "baseUrl": "./",
    "paths": {
      "@/*":["src/*"]
    },
    "resolveJsonModule": true,
    "allowJs": true,
    "sourceMap": true,
    "noEmit": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "strictNullChecks": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

rollup.demo.config.js

import pluginTypescript from "@rollup/plugin-typescript";

export default {
  input: 'demo/src/demo.ts',
  output: [{
    file: 'demo/build.js',
    format: 'iife',
  }],
  plugins: [
    pluginTypescript({
      // 試してみたオプション
      // declaration: false,
      // isolatedModules: false,
      // baseUrl: './demo',
      // rootDir: 'demo/src',
      // include: ['demo/src/**/*.ts'],
      // paths: {
      //   '@/*':['demo/src/*']
      // },
    }),
  ],};

説明

demo.ts のTypeScript構文、型指定の部分でエラーになります。
型指定を削除してJavaScriptの構文にすると問題なく出力されます。

demo.tsを/demo/srcから/srcに移動すると問題なく出力されます。
（もちろんrollupの設定を同様に変更します）

@rollup/plugin-typescriptの設定でrootDirを指定すると良いという情報があったので試しましたが駄目でした。その他コメントアウトしているものも同様です。

補足

テストのため簡略化していますが、最終的にはモジュールのimportをしたり、babelを使ったりします。

補足2

色々試したり@rollup/plugin-typescriptのドキュメントを見て気付いたんですが、tsconfig.jsonの設定が全て使えるわけではないんですね（今さら）。

デモ用にtsconfig.demo.jsonを別途用意したら解決しそう……。試します。

Answer 1

解決しました！
デモスクリプト用にtsconfig.demo.jsonを用意し、下記を変更することで出力できました。

    "paths": {
-      "@/*":["src/*"]
+      "@/*":["base/src/*"]
    },
-    "isolatedModules": true,
+   // "isolatedModules": true,
    "esModuleInterop": true,
-  "include": ["src/**/*.ts"],
+  "include": ["demo/src/**/*.ts"],

rollup.demo.config.jsから指定します。

    pluginTypescript({
      tsconfig: 'tsconfig.demo.json',
    }),