如何在next.js中加载导出Typescript的库

lsmd5eda 于 2023-03-18 发布在 TypeScript

关注(0)|答案(3)|浏览(158)

尝试从导出 Typescript 的私有库导入组件时，我们收到以下错误消息：

Module parse failed: Unexpected token (82:7)
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
| 
| // Types
> export type {

我尝试在 tsconfig 文件中显式包含库节点模块：

"include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "node_modules/@private-lib/*.*"
  ],
  "exclude": [""]

但不幸的是，没有用。似乎有可能改变 next.js 的 webpack 配置，但试图只推入一个Typescript加载器没有工作，不幸的是：

module.exports = {
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.(ts|js)x?$/,
      use: [
        options.defaultLoaders.babel,
        {
          loader: "ts-loader",
          options: {
            transpileOnly: true,
            experimentalWatchApi: true,
            onlyCompileBundledFiles: true,
          },
        },
      ],
    });

    return config;
  },
};

它会产生以下错误：

./node_modules/process/browser.js
TypeError: /home/blub/bla/website/node_modules/process/browser.js: Property left of AssignmentExpression expected node to be of a type ["LVal"] but instead got "BooleanLiteral"

那么有没有人也面临过这个问题，可以给我指出正确的方向？这里似乎有很多魔法在起作用，我有点迷失了方向。

next.js

来源：https://stackoverflow.com/questions/64989575/how-to-load-libraries-which-export-typescript-in-next-js

3条答案

按热度按时间

w51jfk4q1#

在遇到看起来像是同一个问题后，我提出了这个问题：带有 typescript 的next.js项目（yarn create next-app --typescript）。

Yarn：1.22.17
下一页：12.0.7
节点：14.18.1

对我来说，这发生在从一个tsx文件（项目内部）中包含一个ts包（next.js项目外部）之后，看起来幕后有魔法，并试图将ts文件解析为某个版本的普通js。
我的问题已由next-transpile-modules（^9.0.0）解决。具体来说，假设您：

next.config.js是这样开始的

/** @type {import('next').NextConfig} */

module.exports = {
  reactStrictMode: true,
  env: {
  },
}

1.有外部TS库private-lib，其中来自某处tsx文件的import { ... } from '/path/to/private-lib'导致编译时错误。
固定：

yarn add next-transpile-modules
yarn add file:/path/to/private-lib
1.更改private-lib的ts/tsx文件中的import语句
1.将next.config.js更新为如下所示

/** @type {import('next').NextConfig} */
// see https://github.com/martpie/next-transpile-modules#readme
const withTM = require('next-transpile-modules')(['private-lib']);

module.exports = withTM({
  reactStrictMode: true,
  env: {
  },
})

YMMV、HTH、#使用更多魔法修复魔法

赞(0）回复(0）举报 2023-03-18

kyks70gy2#

我猜这个问题是从与ts-loader传输jsx?文件，所以它是安全的，只是只传输tsx?文件的情况下ts-loadder：

webpack: (config, options) => {
  config.module.rules.push({
    test: /\.(ts)x?$/, // Just `tsx?` file only
    use: [
      // options.defaultLoaders.babel, I don't think it's necessary to have this loader too
      {
        loader: "ts-loader",
        options: {
          transpileOnly: true,
          experimentalWatchApi: true,
          onlyCompileBundledFiles: true,
        },
      },
    ],
  });

  return config;
},

还有一件事，如果您的存储库现在使用jsx?文件，这意味着在jsx?文件中导入tsx?文件，您可能需要在tsconfig.json中启用{ "allowJs": true }

赞(0）回复(0）举报 2023-03-18

ccrfmcuu3#

这个问题有点老了，所以我想我应该发布一个更新来扩展 directed-laugh 的原始答案，以帮助任何偶然发现这个问题的人。
如前所述，通过next.config.js传输模块似乎是一种解决方案，尽管在NextJS 13.1中不需要安装额外的next-transpile-modules包，因为这些特性在NextJS 13.1中是本机可用的。
在next.config.js中，只需添加transpilePackages选项并包含ts包的名称。

module.exports = {
  ...
  transpilePackages: ['my-ts-package'],
}

参见模块翻译

赞(0）回复(0）举报 2023-03-18

我来回答

如何在next.js中加载导出Typescript的库

3条答案

相关问题

热门标签

最新问答