Storybook 6.4.1 fails to start with Typescript issue 12358 (won't compile modules in node_modules)

[kurtinatlanta]

Describe the bug
When trying to start Storybook 6.4.1, I get this error:

ModuleBuildError: Module build failed (from ./node_modules/ts-loader/index.js):
Error: TypeScript emitted no output for <app-dir>/node_modules/@adp-wfn/mdf-components/index.ts. By default, ts-loader will not compile .ts files in node_modules.
You should not need to recompile .ts files there, but if you really want to, use the allowTsInNodeModules option.
See: https://github.com/Microsoft/TypeScript/issues/12358
    at makeSourceMapAndFinish (<app-dir>/node_modules/ts-loader/dist/index.js:52:18)
    at successLoader (<app-dir>/node_modules/ts-loader/dist/index.js:39:5)
    at Object.loader (<app-dir>/node_modules/ts-loader/dist/index.js:22:5)
    at processResult (<app-dir>/node_modules/webpack/lib/NormalModule.js:751:19)
    at <app-dir>/node_modules/webpack/lib/NormalModule.js:853:5
    at <app-dir>/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at <app-dir>/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (<app-dir>/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at makeSourceMapAndFinish (<app-dir>/node_modules/ts-loader/dist/index.js:52:9)
    at successLoader (<app-dir>/node_modules/ts-loader/dist/index.js:39:5)
    at Object.loader (<app-dir>/node_modules/ts-loader/dist/index.js:22:5)
    at LOADER_EXECUTION (<app-dir>/node_modules/loader-runner/lib/LoaderRunner.js:132:14)
    at runSyncOrAsync (<app-dir>/node_modules/loader-runner/lib/LoaderRunner.js:133:4)
    at iterateNormalLoaders (<app-dir>/node_modules/loader-runner/lib/LoaderRunner.js:250:2)
    at <app-dir>/node_modules/loader-runner/lib/LoaderRunner.js:223:4
    at <app-dir>/node_modules/webpack/lib/NormalModule.js:827:15
    at Array.eval (eval at create (<app-dir>/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:12:1)
    at runCallbacks (<app-dir>/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:27:15)
    at <app-dir>/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:200:4
ModuleBuildError: Module build failed (from ./node_modules/ts-loader/index.js):
Error: TypeScript emitted no output for <app-dir>node_modules/@adp-wfn/mdf-core/index.ts. By default, ts-loader will not compile .ts files in node_modules.
You should not need to recompile .ts files there, but if you really want to, use the allowTsInNodeModules option.
See: https://github.com/Microsoft/TypeScript/issues/12358
    at makeSourceMapAndFinish (<app-dir>/node_modules/ts-loader/dist/index.js:52:18)
    at successLoader (<app-dir>/node_modules/ts-loader/dist/index.js:39:5)
    at Object.loader (<app-dir>/node_modules/ts-loader/dist/index.js:22:5)
    at processResult (<app-dir>/node_modules/webpack/lib/NormalModule.js:751:19)
    at <app-dir>/node_modules/webpack/lib/NormalModule.js:853:5
    at <app-dir>/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at <app-dir>/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (<app-dir>/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at makeSourceMapAndFinish (<app-dir>/node_modules/ts-loader/dist/index.js:52:9)
    at successLoader (<app-dir>/node_modules/ts-loader/dist/index.js:39:5)
    at Object.loader (<app-dir>/node_modules/ts-loader/dist/index.js:22:5)
    at LOADER_EXECUTION (<app-dir>/node_modules/loader-runner/lib/LoaderRunner.js:132:14)
    at runSyncOrAsync (<app-dir>/node_modules/loader-runner/lib/LoaderRunner.js:133:4)
    at iterateNormalLoaders (<app-dir>/node_modules/loader-runner/lib/LoaderRunner.js:250:2)
    at <app-dir>/node_modules/loader-runner/lib/LoaderRunner.js:223:4
    at <app-dir>/node_modules/webpack/lib/NormalModule.js:827:15
    at Array.eval (eval at create (<app-dir>/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:12:1)
    at runCallbacks (<app-dir>/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:27:15)
    at /Users/hoytk/git/wc-test/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:200:4

To Reproduce
I'll see if I can boil this down at all, but all I did was update from 6.3.12 to 6.4.1 and boom.

System

Environment Info:

  System:
    OS: macOS 11.6.1
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
  Binaries:
    Node: 14.18.1 - /usr/local/bin/node
    npm: 6.14.15 - /usr/local/bin/npm
  Browsers:
    Chrome: 96.0.4664.55
    Edge: 93.0.961.52
    Firefox: 78.9.0
    Safari: 15.1
  npmPackages:
    @storybook/addon-a11y: 6.4.1 => 6.4.1 
    @storybook/addon-actions: 6.4.1 => 6.4.1 
    @storybook/addon-controls: 6.4.1 => 6.4.1 
    @storybook/addon-docs: 6.4.1 => 6.4.1 
    @storybook/addon-knobs: 6.4.0 => 6.4.0 
    @storybook/addon-links: 6.4.1 => 6.4.1 
    @storybook/addons: 6.4.1 => 6.4.1 
    @storybook/builder-webpack5: 6.4.1 => 6.4.1 
    @storybook/manager-webpack5: 6.4.1 => 6.4.1 
    @storybook/react: 6.4.1 => 6.4.1 

Additional context
This is our main.js:

const { merge } = require('webpack-merge');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { styleAssets } = require('@adp-wfn/mdf-core/webpack/webpack.parts');

module.exports = {
  core: {
    builder: 'webpack5'
  },
  stories: [
    '../src/stories/**/*.stories.mdx',
    '../src/stories/**/*.stories.tsx'
  ],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-docs',
    '@storybook/addon-knobs',
    '@storybook/addon-a11y',
    '@storybook/addon-controls'
  ],
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: 'react-docgen-typescript'
  },
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      use: [
        {
          loader: require.resolve('ts-loader')
        }
      ]
    });
    config.resolve.extensions.push('.ts', '.tsx');
    config.module.rules.push({
      test: /\.css$/,
      use: [
        {
          loader: 'null-loader'
        }
      ]
    });

    config.plugins.push(new CopyWebpackPlugin({
      patterns: [
        { from: './src/images', to: './src/images' },
        { from: './contentPaneTest', to: './contentPaneTest' }
      ]
    }));

    // Resolutions to replace node.js libraries no longer added by default by webpack 5.
    config.resolve.fallback.crypto = require.resolve('crypto-browserify');
    config.resolve.fallback.stream = require.resolve('stream-browserify');

    return merge(
      config,
      styleAssets({ suppressValidationPlugin: true })
    );
  }
};

[kurtinatlanta]

The solution was to update main.js to tell ts-loader that TypeScript in node_modules was OK:

    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      use: [
        {
          loader: require.resolve('ts-loader'),
          options: {
            allowTsInNodeModules: true
          }
        }
      ]
    });

I'm still curious as to what might have changed (and it could be TypeScript 4.5), but I'm back in business.