How to use awesome-typescript-loader with babel to transpile a specific node module?

Question

For awhile now I've been trying to transpile a node module that is using the object spread operator. This is a problem for me because my application is suppose to support Edge and as of now, it does not support the object spread operator.

I configured the awesome-typescript loader to use babel by setting the useBabel property to true so that I don't need to install the babel-loader myself. I also added a preset called babel-preset-edge that adds many useful presets and plugins. The important one that it adds by default is the @babel-plugin-proposal-object-rest-spread which is needed to transpile that node module.

Even with this setup, awesome-typescript seems to always ignore the module I want to transpile. This became apparent to me when I did this

include: function(absPath) {
    // I want to in include my source code or the module I want to transpile.
    const includePath = /@furystack/.test(absPath) || /src/.test(absPath)
    // this will always output true because all the paths have src in their path. 
    // Not a single one from node modules.
    console.log(includePath)
    return includePath
}

It should have outputted some true and false values(true for it being either my source code or furystack and false for anything else) but that wasn't the case.

This is how my loaders look like

module: {
  rules: removeEmpty([
    {
      test: /\.(ts|tsx)$/,
      use: [
        {
          options: {
            useTranspileModule: true,
            forceIsolatedModules: true,
            useCache: true,
            useBabel: true,
            reportFiles: ['src/**/*.{ts,tsx}'],
            babelCore: '@babel/core'
          },
          loader: 'awesome-typescript-loader'
        }
      ],
      include: function(absPath) {
        return /@furystack/.test(absPath) || /src/.test(absPath)
      }
    },
}

This how my .babelrc looks like

{
  "presets": [
    [
      "edge",
      {
        "transpile": "modern",
        "modules": "false"
      }
    ]
  ]
}

And this is how my .tsconfig.json looks like

{
  "compilerOptions": {
    "outDir": "lib",
    "module": "esnext",
    "target": "esnext",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "jsx": "preserve",
    "baseUrl": "./src",
    "rootDir": "./src",
    "moduleResolution": "node",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "preserveConstEnums": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": false,
    "alwaysStrict": false,
    "allowSyntheticDefaultImports": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true,
    "noEmit": true,
    "types": ["jest", "node"]
  },
  "include": ["./src/**/*"],
  "exclude": ["node_modules"]
}

What is wrong with my configuration?

Answer 1

Thanks to this answer from Ashish(Is it possible to transpile local modules from node_module?), I was able to come up with a solution.

So the problem was that the module that I was using was importing a js file that was not completely transpiled(the object spread operator) instead of a ts or tsx file. This meant that I needed to reinstall babel loader so that I can make a separate pass with the babel loader for js files. The next problem I encountered was that module was compiled under commonjs and so the imports also had to be transpiled.

This is my loaders look now.

{
   {
      test: /\.js$/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: [
            [
              'edge',
              {
                transpile: 'es2015',
                modules: 'commonjs'
              }
            ]
          ]
        }
      },
      include: [path.resolve(__dirname, 'node_modules/@furystack')]
    },
    {
      test: /\.tsx?$/,
      use: [
        {
          options: {
            useTranspileModule: true,
            forceIsolatedModules: true,
            useCache: true,
            useBabel: true,
            babelOptions: {
              babelrc: false /* Important line */,
              presets: [
                [
                  'edge',
                  {
                    transpile: 'modern',
                    modules: 'false'
                  }
                ]
              ]
            },
            reportFiles: ['src/**/*.{ts,tsx}'],
            babelCore: '@babel/core'
          },
          loader: 'awesome-typescript-loader'
        }
      ],
      include: [path.resolve(__dirname, 'src')]
    },
}