Module parse failed: Unexpected token import type { interfaces } from 'inversify';

[chirastefan]

Running webpack serve throws this error.

I tried to add that module to babel-loader,

{
        test: /\.(ts|tsx)?$/,
        include: [
          paths.appSrc,
          path.resolve(paths.appNodeModules, 'mana-syringe'),
          path.resolve(paths.appNodeModules, 'inversify')
        ],
       ....
}

so the error is gone when running webpack serve, but then again I get this error in the browser. Inversify is dependency of @antdesign/charts

Is it normal to add those modules to the babel-loader?

webpack.config.js

const webpack = require('webpack');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const dotenv = require('dotenv');
const paths = require('./paths');
const path = require('path');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

const env = dotenv.config({ path: paths.dotenv }).parsed;
const environment = (process.env.NODE_ENV || 'development').trim();
const isDev = environment === 'development';
const babelOptions = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: 'last 3 versions'
      }
    ],
    '@babel/preset-react'
  ],
  plugins: []
};

module.exports = {
  context: paths.appSrc,
  plugins: [
    new ForkTsCheckerWebpackPlugin({
      async: isDev,
      typescript: {
        configFile: paths.appTSJson,
        context: paths.appPath,
        configOverwrite: {
          compilerOptions: {
            sourceMap: isDev,
            inlineSourceMap: false,
            declarationMap: false
          },
          exclude: ['**/*.test.js', '**/*.test.jsx', '**/*.test.ts', '**/*.test.tsx']
        }
      }
    }),
    new CopyPlugin({
      patterns: [
        {
          from: 'assets',
          to: 'assets/',
          cacheTransform: true
        }
      ]
    }),
    new HtmlWebPackPlugin({
      template: paths.appHtml,
      minify: {
        removeComments: true,
        collapseWhitespace: false
      }
    }),
    new webpack.DefinePlugin({
      'process.env': JSON.stringify(env)
    })
  ],
  resolve: {
    modules: ['node_modules', 'src'],
    extensions: ['.js', '.jsx', '.ts', '.tsx']
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)?$/,
        include: [paths.appSrc],
        use: [
          {
            loader: 'babel-loader',
            options: babelOptions
          }
        ]
      },
      {
        test: /\.(ts|tsx)?$/,
        include: [paths.appSrc],
        use: [
          {
            loader: 'babel-loader',
            options: {
              ...babelOptions,
              presets: [...babelOptions.presets, '@babel/preset-typescript']
            }
          },
          {
            loader: 'ts-loader',
            options: {
              configFile: paths.appTSJson,
              allowTsInNodeModules: true,
              transpileOnly: true
            }
          }
        ]
      }
    ]
  }
};

tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "declaration": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "react",
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "amd",
    "moduleResolution": "node",
    "noEmit": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "resolveJsonModule": true,
    "rootDir": "./",
    "target": "esnext",
    "skipLibCheck": true,
    "strict": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist", "config"]
}

Your Environment

OSX 12.3
chrome: 99.0.4844.84
node: 12.22.11
npm: 6.14.16
babel-loader: ^8.0.6
ts-loader: ^8.2.0
webpack: 4.46.0
webpack-dev-server: 3.5.1
@ant-design/charts: ^1.3.6