~/ tilde paths with Eslint, Typescript, and Webpack

While migrating from Parcel to Webpack I wanted to keep the ~/ absolute path aliases Parcel provides out of the box.

~/components/Component.tsx
vs.
../../../../../../../../../../components/Component.tsx

The way it was configured in Parcel failed compilation with Webpack. The problem I had was that the original Parcel configuration was aliasing the forward slash after the tilde.

tsconfig.json: "~/*": ["./src/*"],
webpack.config.ts: alias: { '~/': path.resolve(__dirname, 'src/')},

While Typescript was able to find all the files through the aliased paths and everything looked fine in the editor. This caused Webpack to fail rewriting the aliased paths, unable to compile.

After rewriting all of my urls to test different configurations, it dawned on me to test removing the forward slash from the alias.

And it worked…

tsconfig.json

...
"paths": {
 "~*": ["./src/*"],
},
...

webpack.config.ts

...
resolve: {
  alias: {
   '~': path.resolve(__dirname, 'src/'),
  }, 
  extensions: ['.ts', '.tsx', '.js'],
},
...

.eslintrc.js

...
settings: {
  'import/resolver': {
     alias: {
       map: [['~', './src/']],
       extensions: ['.ts', '.js', '.tsx'],
     },
   },
},
...