webpack import ts file from node_modules ussue

Question

Everything works fine in my nextJS app, but when i am trying to export .ts file from node_modules/workspace/dtos.ts gives an error message

.ts, .tsx files works fine too

DTOs file

export * from '.workspace/dtos';

Error

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
};

Maybe it is worth adding some kind of exception to the config?

user_1411213 · Answer

Webpack error is saying that it does not know how to process TS-syntax.
I'd suggest adding ts-loader to webpack config but do NOT exclude node_modules

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

Do not forget to install typescript and ts-loader.

webpack import ts file from node_modules ussue

1 Answers