webpack从node_modules用户导入ts文件

Question

我的nextJS应用程序一切正常，但是当我尝试从node_modules/workspace/dtos.ts中导出.ts文件时，给出了一条错误消息

.ts、.tsx文件也可以很好地工作

DTOs文件

export * from '.workspace/dtos';

错误

error - ./node_modules/.workspace/dtos.ts
Module parse failed: Unexpected token (11:7)
You may need an appropriate loader to handle this file type


> export interface APIDefinition {
|     cors?: CORSConfig;

tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "experimentalDecorators": true,
    "forceConsistentCasingInFileNames": true,
    "jsx": "preserve",
    "jsxFactory": "jsx",
    "lib": [
      "es2020",
      "dom"
    ],
    "esModuleInterop": true,
    "isolatedModules": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "noEmit": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": false,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": false,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "target": "esnext"
  },
  "exclude": [
    "node_modules",
    "build",
    "**/*.json",
    "**/*.js"
  ],
  "include": [
    "node_modules/.workspace/dtos.ts",
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ]
}

.babelrc

{
  "presets": [
    [
      "next/babel",
      {
        "preset-react": {
          "importSource": "theme-ui",
          "runtime": "automatic",
          "throwIfNamespace": false
        }
      }
    ]
  ]
}

next.config.js

const { i18n } = require('./next-i18next.config');

module.exports = {
  i18n
};

也许在配置中添加一些异常是值得的？

Answer 1

Webpack错误是说它不知道如何处理TS-语法。

我建议在webpack的配置中添加ts-loader，但不排除node_modules

rules: [
  {
    test: /\.tsx?$/,
    use: "ts-loader",
  },

不要忘记安装typescript和ts-loader。