Next.js - 导入 TypeScript 模块时找不到模块答案

【问题标题】：Next.js - module not found when importing TypeScript moduleNext.js - 导入 TypeScript 模块时找不到模块
【发布时间】：2023-04-02 06:28:01
【问题描述】：

这是我的代码：

// lib/test2.ts

export function test2() {
  console.log("test2");
}

// pages/index.tsx

import { GetServerSideProps } from "next";
// works
import { test } from "../lib/test.js";
// error
import { test2 } from "../lib/test2.js";

export const getServerSideProps: GetServerSideProps = async ({
  req,
}): Promise<{ props: {} }> => {
  test();
  test2();
  return { props: {} };
};

export default function Home(props: {}) {
  return <div>Hi</div>;
}

当我运行这段代码时，我得到了

Module not found: Can't resolve '../lib/test2.js' in '/Users/USER/Documents/software/nextjs-test/pages'

我不知道为什么。 lib/test2.ts不应该编译成lib/test2.js，导入应该没问题吧？我想我不太熟悉在混合使用 TypeScript 时如何实际解决导入问题。

链接到这里的所有代码：https://github.com/arcticmatt/nextjs-test

【问题讨论】：

您的意思是“import { test2 } from "../lib/test2.ts"; 有效”（.ts 而不是.js）？否则我看不出这些导入样式之间的区别。
@Bergi 导入样式没有区别。不同之处在于test.js 实际上是一个文件。 test2.js 不存在，test2.ts 存在。查看源代码可能会更清楚
你是说test.js是用JavaScript写的，test2.ts是用TypeScript写的？您还没有发布包含test.js 内容的sn-p，这令人困惑。

标签： typescript next.js es6-modules

【解决方案1】：

只需安装 babel 软件包，您就可以开始了。详情看这里https://www.npmjs.com/package/babel-loader。

npm install -D babel-loader @babel/core @babel/preset-env webpack

【讨论】：

【解决方案2】：

这是正在发生的事情的要点。

webpack 在Compilation.js 中抛出了一个ModuleNotFoundError。

原因是 webpack 是真正将 TypeScript 编译为 JavaScript 的东西。这个post 提供了一个不错的解释。

如果你添加

module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    console.log(config);
    config.module.rules.map((rule) => console.log(JSON.stringify(rule)));
    return config;
  },
};

到next.config.js，你可以看到 Next.js 使用的 webpack 配置。显然，他们使用next-babel-loader 在捆绑之前将 TypeScript 编译为 JavaScript。

总之，发生的事情是：

webpack 尝试在 Compilation.js 中查找 ../lib/test2.js。这是在将任何内容编译为 JavaScript 之前。
../lib/test2.js 不存在，因为 ../lib/test2.ts 尚未编译为 JavaScript。
抛出错误。

解决办法是省略文件扩展名，写import { test2 } from "../lib/test2";。您可以克隆我在 OP 中链接的 repo 并运行 yarn dev 来验证它是否有效。

【讨论】：

那么，解决方案是什么？
我自己也遇到了这个问题，+1 解决方案：)
然而，这直接与 TypeScript 的建议相矛盾，即始终在导入中包含 .js 文件扩展名......？ github.com/microsoft/TypeScript/issues/40878