Does not work with TypeScript on CRA4

[chyyran]

Repro here (Yarn PNP):

https://github.com/SnowflakePowered/hydrogen-paper/tree/8be317e82d668528945e6aa7ce37eb223b9928c4/theme

yarn run craco start results in the error

TypeScript error in D:/coding/hydrogen-paper/theme/src/components/ConfigurationWidgets/BooleanWidget/BooleanWidget.tsx(5,6):
Cannot find module 'components/ConfigurationWidgets/ConfigurationWidget/ConfigurationWidget' or its corresponding type declarations.  TS2307

    3 |
    4 | import ConfigurationWidget, { WidgetChildrenProps }
  > 5 | from 'components/ConfigurationWidgets/ConfigurationWidget/ConfigurationWidget'
      |      ^
    6 | import { ConfigurationOption } from 'support/Snowflake'
    7 |
    8 | type BooleanWidgetProps = {

However it seems to work with yarn storybook.

Debug output:

Initial options:

{
  "baseUrl": "./",
  "source": "tsconfig",
  "tsConfigPath": "./tsconfig.paths.json",
  "debug": true
}

Normalized options:

{
  "source": "tsconfig",
  "baseUrl": "./",
  "tsConfigPath": "./tsconfig.paths.json",
  "debug": true,
  "unsafeAllowModulesOutsideOfSrc": false
}

Initial aliases:

{
  "*": "D:\\coding\\hydrogen-paper\\theme\\src",
  "@": "D:\\coding\\hydrogen-paper\\theme\\src",
  "components": "D:\\coding\\hydrogen-paper\\theme\\src\\components",
  "containers": "D:\\coding\\hydrogen-paper\\theme\\src\\containers",
  "support": "D:\\coding\\hydrogen-paper\\theme\\src\\support",
  "stories": "D:\\coding\\hydrogen-paper\\theme\\src\\stories"
}

Aliases:

{
  "*": "D:\\coding\\hydrogen-paper\\theme\\src",
  "@": "D:\\coding\\hydrogen-paper\\theme\\src",
  "components": "D:\\coding\\hydrogen-paper\\theme\\src\\components",
  "containers": "D:\\coding\\hydrogen-paper\\theme\\src\\containers",
  "support": "D:\\coding\\hydrogen-paper\\theme\\src\\support",
  "stories": "D:\\coding\\hydrogen-paper\\theme\\src\\stories"
}

Webpack Config:

{
  "react-native": "react-native-web",
  "*": "D:\\coding\\hydrogen-paper\\theme\\src",
  "@": "D:\\coding\\hydrogen-paper\\theme\\src",
  "components": "D:\\coding\\hydrogen-paper\\theme\\src\\components",
  "containers": "D:\\coding\\hydrogen-paper\\theme\\src\\containers",
  "support": "D:\\coding\\hydrogen-paper\\theme\\src\\support",
  "stories": "D:\\coding\\hydrogen-paper\\theme\\src\\stories"
}

Then describe your problem and paste the plugin output.

[chyyran]

Turns out this was a problem with ForkTsCheckerWebpackPlugin, which isn't picking up the changes in tsconfig. To fix it, the default CRA instance of the plugin has to be replaced with a custom instance

webpack: {
      plugins: {
          // use our own ForkTsCheckerWebpackPlugin
          add: [new ForkTsCheckerWebpackPlugin({
            typescript: {
              configFile: 'tsconfig.json',
              diagnosticOptions: {
                semantic: true,
                syntactic: true,
              },
              mode: "write-references",
            },
          })], 
          remove: ["ForkTsCheckerWebpackPlugin"], // remove forktschecker
      },
    },
}