导入TypeScript Store至Svelte组件时遇‘非模块’错误的求助

问题描述 #

我在src/stores/gamestore.ts创建了一个TypeScript Store，代码如下：

import { writable } from 'svelte/store';

import ChessGame from '$lib/classes/Chess/ChessGame';
import ChessBoard from '$lib/classes/Chess/ChessBoard';
import { AbstractPlayer } from '$lib/classes/BoardGame/Player';
import { PieceColor } from '$lib/classes/BoardGame/Piece';
import { AbstractGameScore } from '$lib/classes/BoardGame/GameScore';

// ... instantiate your classes
const board = new ChessBoard();
const p1 = new AbstractPlayer('test', PieceColor.White);
const p2 = new AbstractPlayer('test', PieceColor.Black);
const score = new AbstractGameScore();
const chessGame = new ChessGame(board, [p1, p2], score);

export default writable({
    game: chessGame,
    board: chessGame.board,
    players: chessGame.players,
    score: chessGame.score,
    currentPlayer: chessGame.currentPlayer,
    winner: chessGame.winner
});

在Svelte组件中导入该Store时，出现错误：

Svelte: File
s:/Desktop/.../src/stores/gameStore.ts
is not a module.

组件代码：

<script lang="ts">
    import ChessGame from '$lib/classes/Chess/ChessGame';
    import gameStore from '$stores/gameStore';

    console.log('game', gameStore);
</script>

<div />

我能正常导入普通TypeScript类，但Store导入失败，我的tsconfig.json配置如下：

{
    "extends": "./.svelte-kit/tsconfig.json",
    "compilerOptions": {
        "allowJs": true,
        "checkJs": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true,
        "skipLibCheck": true,
        "sourceMap": true,
        "strict": true,
        "module": "esnext",
        "paths": {
            "@/*": ["./src/*"],
            "$lib":["./src/lib"],
            "$lib/*":["./src/lib/*"],
            "$stores/*": ["./src/stores/*"]
        }
    },

    // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
    //
    // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
    // from the referenced tsconfig.json - TypeScript does not merge them in
}

解决方案 #

1. 统一文件名与导入路径的大小写 #

你的Store文件实际是gamestore.ts（全小写），但组件中导入的路径是$stores/gameStore（驼峰式）。TypeScript的模块解析会严格校验文件名，哪怕系统不区分大小写也可能引发识别问题。

• 要么将组件中的导入改为import gameStore from '$stores/gamestore';
• 要么将Store文件名改为gameStore.ts，保持与导入路径一致。

2. 同步Svelte Kit的别名配置 #

仅在tsconfig.json中配置别名不够，需要在svelte.config.js的kit.alias中同步添加别名规则，确保Svelte Kit能正确解析路径：

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: vitePreprocess(),
    kit: {
        adapter: adapter(),
        alias: {
            '$stores': './src/stores',
            '$stores/*': './src/stores/*'
        }
    }
};

export default config;

3. 改用命名导出（可选） #

默认导出偶尔会出现解析异常，改用命名导出更符合ES模块规范，也能避免此类问题：

• 修改Store文件的导出：

  export const gameStore = writable({
      game: chessGame,
      board: chessGame.board,
      players: chessGame.players,
      score: chessGame.score,
      currentPlayer: chessGame.currentPlayer,
      winner: chessGame.winner
  });
  

• 组件中导入：

  import { gameStore } from '$stores/gamestore';
  

4. 清理缓存并重启服务 #

Svelte Kit的缓存可能导致模块解析异常，按以下步骤操作：

• 停止当前开发服务器
• 删除项目根目录下的.svelte-kit和node_modules/.vite文件夹
• 重新执行npm install
• 启动开发服务器npm run dev

内容的提问来源于stack exchange，提问作者Andreas Halvorsen Tollånes