在Next.js应用程序中导入外部Typescript文件

Question

我有一个使用Typescript文件构建的Next.js应用程序A，以及一个名为B的包，该包包含以下index.tsx文件:

export default () => {
    console.log('hi');
}

当我通过以下方式在Next.js应用程序A的任何文件中导入它时：

import f from 'B';

我遇到了这个错误：

ModuleParseError: Module parse failed: Unexpected token (15:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

这似乎与Webpack有关，但我不知道如何解决它。

- Lucas Willems

---

我也遇到了同样的困难。你找到解决办法了吗？ - Marten Veldthuis

我在他们的存储库中开了一个问题：https://github.com/zeit/next.js/issues/9303。这似乎是一个已知的问题。 - Lucas Willems

相关 https://dev59.com/9FIG5IYBdhLWcg3wqTRF - Aleksandr Smyshliaev

Answer 1

你可以在13.0版本开始的next.config.js中添加transpilePackages: ['package-name'],。如果你使用的是较旧的next.js版本，你可以使用这个package，但它已经被弃用了。详细信息请参考https://nextjs.org/docs/app/api-reference/next-config-js/transpilePackages。

- Vadym Lohvynovych