Next.js + TypeScript中无法导入.task文件的问题求助

核心原因 #

.task属于二进制格式文件，Next.js默认的webpack配置没有对应的loader解析这类文件，导致编译时无法处理该文件类型，触发报错。

解决方案 #

方案1：配置webpack加载二进制文件（推荐） #

在项目根目录创建或修改next.config.js（或next.config.ts），添加webpack规则处理.task文件：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.task$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: '[name].[hash].[ext]',
            outputPath: 'models/',
          },
        },
      ],
    });
    return config;
  },
};

module.exports = nextConfig;

安装file-loader依赖：

npm install file-loader --save-dev
# 或
yarn add file-loader --dev

修改导入逻辑（file-loader返回文件URL路径，需通过fetch加载）：

import modelUrl from '@/utils/models/model.task';

async function loadModel() {
  const response = await fetch(modelUrl);
  const modelBuffer = await response.arrayBuffer();
  // 根据你的模型库（如TensorFlow.js）处理二进制buffer，完成模型加载
}

方案2：将模型文件放到public目录 #

无需配置webpack，直接把model.task移到项目public/models/目录，通过路径直接访问：

const modelUrl = '/models/model.task';

async function loadModel() {
  const response = await fetch(modelUrl);
  const modelBuffer = await response.arrayBuffer();
  // 后续模型加载逻辑
}

方案3：用raw-loader加载原始二进制内容 #

若需直接导入文件的原始二进制内容，可使用raw-loader：

1. 安装依赖：

npm install raw-loader --save-dev
# 或
yarn add raw-loader --dev

2. 修改next.config.js：

const nextConfig = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.task$/,
      use: 'raw-loader',
    });
    return config;
  },
};

module.exports = nextConfig;

3. 导入并转换内容：

import modelContent from '@/utils/models/model.task';

// 将字符串转换为ArrayBuffer供模型库使用
const modelBuffer = new TextEncoder().encode(modelContent).buffer;
// 后续模型加载逻辑

额外配置（TypeScript） #

在项目根目录创建types/custom.d.ts，添加.task文件的类型声明，避免TS报错：

declare module '*.task' {
  const content: string;
  export default content;
}

内容的提问来源于stack exchange，提问作者James Delay