جاوااسکریپت - Jest با تایپاسکریپت وارد کردن را انجام نمیدهد (خطای نحوی: نمیتوان از دستور import خارج از یک ماژول استفاده کرد)

وقتی تستهای Jest را با Typescript اجرا میکنم، خطای زیر را در زمان وارد کردن یک فایل TS خارجی که در یک کتابخانه node_modules فراخوانی شده است، دریافت میکنم:

SyntaxError: Cannot use import statement outside a module

مطمئنم که یک پیکربندی را فراموش کردهام، اما آن چیست؟ از کمک شما سپاسگزارم.

این پیکربندی من است:

• tsconfig.json

{
  "compilerOptions": {
    "sourceMap": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowJs": true,
    "jsx": "react",
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "baseUrl": "./",
    "paths": {
      "*": ["src/*"]
    }
  },
  "strict": true,
  "module": "node",
  "compileOnSave": false,
  "include": ["src", "tests"]
}

• jest.config.js

    module.exports = {
      roots: ['<rootDir>'],
      preset: 'ts-jest',
      testRegex: 'tests/.*\\.test.(js|jsx|ts|tsx)$',
      transform: {
        '^.+\\.tsx?$': 'ts-jest',
      },
      moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
      moduleDirectories: ['node_modules', 'src'],
      setupFilesAfterEnv: ['<rootDir>/tests/jest.setup.ts'],
      collectCoverage: true,
      collectCoverageFrom: ['src/**/*.{js{,x},ts{,x}}', '!src/index.tsx'],
    }

• webpack.config.js

    /* eslint-disable @typescript-eslint/no-var-requires */
    const path = require('path')
    const webpack = require('webpack')
    
    module.exports = {
      entry: './src/index.tsx',
      mode: 'development',
      module: {
        rules: [
          {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            options: { presets: ['@babel/env'] },
          },
          {
            test: /\.tsx?$/,
            exclude: /node_modules/,
            loader: 'ts-loader',
          },
          {
            test: /\.css$/,
            exclude: /node_modules/,
            use: ['style-loader', 'css-loader'],
          },
        ],
      },
      resolve: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
        alias: { 'react-dom': '@hot-loader/react-dom' },
      },
      output: {
        path: path.resolve(__dirname, 'dist/'),
        publicPath: '/dist/',
        filename: 'app.js',
      },
      devServer: {
        contentBase: path.join(__dirname, 'public/'),
        port: 3000,
        publicPath: 'http://localhost:3000/dist/',
        hotOnly: true,
      },
      plugins: [new webpack.HotModuleReplacementPlugin()],
    }

پاسخ شماره ۱

من همان مشکل را داشتم، لطفاً بررسی کنید که همه مسیرها در ایمپورتهای شما درست هستند، در مورد من، من داشتم import NavbarCollapse from "react-bootstrap/esm/NavbarCollapse"; به جای import NavbarCollapse from "react-bootstrap/NavbarCollapse";

پاسخ شماره ۲

من فکر میکنم مشکل از

  "module": "node",

خطی در فایل tsconfig.json شما. آن را حذف کنید. شما مشخصات ماژول صحیح (commonjs) را در بخش compilerOptions خود دارید.