timarney / react-app-rewired

Override create-react-app webpack configs without ejecting
MIT License
9.8k stars 424 forks source link

why is my tsconfig path cleared after startup, and how do I configure a path nickname? #573

Closed BM-laoli closed 2 years ago

BM-laoli commented 3 years ago

why is my tsconfig path cleared after startup, and how do I configure a path nickname?

Before:

tsconfig.js

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "experimentalDecorators": true,
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "./",
    "paths": {
      "@asset": ["/src/assets"],
  }
  },
}

config-overrides.js

const { paths } = require('react-app-rewired');
const configPath = require(paths.scriptVersion + '/config/webpack.config')

const multipleEntry = require('react-app-rewire-multiple-entry')([
  // module1
  {
    entry: 'src/page/Order/index.tsx',
    template: 'public/order.html',
    outPath: '/order.html'
  },
  // module2
  {
    entry: 'src/page/Singup/index.tsx',
    template: 'public/singup.html',
    outPath: '/singup.html'
  }
  // module other.....
]);

module.exports = {
  webpack: function(config, env) {
    multipleEntry.addMultiEntry(config);
    // config = {...config, ...configPath}
    // config.resolve.alias = {
    //     "@": path.resolve(__dirname, "src")
    // };
    return config;
  }
};

after tsconfig

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "experimentalDecorators": true,
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "./"
  },
  "include": [
    "src"
  ]
}
dawnmist commented 3 years ago

It's something that create-react-app's react-scripts package does - they explicitly delete anything that was in the paths variable when validating the tsconfig file: https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js#L159

There have been a few ways to work around it - one being to try making your tsconfig file extend from another file and set it in the other file, a second being to use something like patch-package to patch the line in react-scripts so it doesn't delete the paths entry.

There's some discussion on this in an older issue: https://github.com/timarney/react-app-rewired/issues/375#issuecomment-474806096

timarney commented 2 years ago

Closing --- this given it's not a bug and no activity.