Bug report

What is the current behavior?

Webpack does not resolve path aliases.

I am creating a new react app and trying to configure webpack compiler from scratch. The issue happens when running the build command with webpack -c config/webpack.config.ts - It gives an error as following;

ERROR in containers:/App
Module build failed: UnhandledSchemeError: Reading from "containers:/App" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "containers:" URIs.
    at /home/myuser/dev/projects/tsxpress-boilerplate/node_modules/webpack/lib/NormalModule.js:659:26
    at Hook.eval [as callAsync] (eval at create (/home/myuser/dev/projects/tsxpress-boilerplate/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/myuser/dev/projects/tsxpress-boilerplate/node_modules/tapable/lib/Hook.js:18:14)
    at Object.processResource (/home/myuser/dev/projects/tsxpress-boilerplate/node_modules/webpack/lib/NormalModule.js:656:9)
    at processResource (/home/myuser/dev/projects/tsxpress-boilerplate/node_modules/loader-runner/lib/LoaderRunner.js:220:11)
    at iteratePitchingLoaders (/home/myuser/dev/projects/tsxpress-boilerplate/node_modules/loader-runner/lib/LoaderRunner.js:171:10)
    at runLoaders (/home/myuser/dev/projects/tsxpress-boilerplate/node_modules/loader-runner/lib/LoaderRunner.js:397:2)
    at NormalModule.doBuild (/home/myuser/dev/projects/tsxpress-boilerplate/node_modules/webpack/lib/NormalModule.js:646:3)
    at NormalModule.build (/home/myuser/dev/projects/tsxpress-boilerplate/node_modules/webpack/lib/NormalModule.js:791:15)
    at /home/myuser/dev/projects/tsxpress-boilerplate/node_modules/webpack/lib/Compilation.js:1239:12
 @ ./client/app/index.tsx 12:28-54

Any idea what might have caused this or what I am missing? Any suggestion is appreciated.

---

My directory structure is as following:

node_modules/
client/
  public/
  app/
    assets/
    index.tsx
server/
shared/
  http/
  models/
  state/
  utils/
build/
config/
  webpack.config.js

File index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Router, BrowserRouter } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import { store } from 'shared:/states/store';
import App from 'containers:/App';

const history = createBrowserHistory();

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Router>
  </Provider>,
  document.getElementById('app')
);

File tsconfig.json/compilerOptions/paths

  "paths": {
    "shared:/*": ["shared/*"],
    "containers:/*": ["client/app/views/containers/*"],
  }

File webpack.config.ts;

import * as webpack from 'webpack';
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
import { clientEnv } from './env';
import pathAliases from './aliases';
import paths from './paths';
import path from 'path';

const isEnvProduction = clientEnv.NODE_ENV === 'production',
  isEnvDevelopment = clientEnv.NODE_ENV === 'development';

module.exports = (webpackEnv: { [key: string]: any }) => {

  const config: webpack.Configuration = {
    mode: clientEnv.NODE_ENV,
    devtool: isEnvProduction && 'source-map',
    entry: {
      app: paths.clientAppIndex
    },
    target: 'web',
    module: {
      strictExportPresence: true,
      rules: [
        { parser: { requireEnsure: false } },
        {
          test: /\.tsx?$/,
          loader: 'ts-loader',
          exclude: /node_modules/,
          options: {
            allowTsInNodeModules: true, // <- this a specific option of ts-loader
            transpileOnly: isEnvDevelopment,
            compilerOptions: {
              module: 'commonjs',
              noEmit: false,
            },
          },
        }
      ],
    },
    resolve: {
      modules: paths.clientAppModules,
      extensions: ['.tsx', '.ts', '.js'],
      alias: { 
        ...{
            'ducks:': '/home/myuser/dev/projects/tsxpress-boilerplate/shared/states/ducks',
            'state:': '/home/myuser/dev/projects/tsxpress-boilerplate/shared/states',
            'models:': '/home/myuser/dev/projects/tsxpress-boilerplate/shared/models',
            'shared:': '/home/myuser/dev/projects/tsxpress-boilerplate/shared',
            'components:': '/home/myuser/dev/projects/tsxpress-boilerplate/client/app/views/components',
            'containers:': '/home/myuser/dev/projects/tsxpress-boilerplate/client/app/views/containers',
            'views:': '/home/myuser/dev/projects/tsxpress-boilerplate/client/app/views',
            'css:': '/home/myuser/dev/projects/tsxpress-boilerplate/client/app/assets/styles',
            'assets:': '/home/myuser/dev/projects/tsxpress-boilerplate/client/app/assets',
            'app:': '/home/myuser/dev/projects/tsxpress-boilerplate/client/app'
          }
      }
    },
    plugins: [
      new ForkTsCheckerWebpackPlugin({
        typescript: {
          enabled: true,
          typescriptPath: path.join(paths.appNodeModules, 'typescript/lib/typescript.js')
        },
        async: isEnvDevelopment,
        eslint: {
          files: './{client,server}/**/*.{ts,tsx,js,jsx}' // required - same as command `eslint ./src/**/*.{ts,tsx,js,jsx} --ext .ts,.tsx,.js,.jsx`
        }
      })
    ],
    output: {
      // The build folder.
      path: paths.clientAppBuild,
      pathinfo: isEnvDevelopment,
      filename: isEnvProduction ? 'static/js/[name].[contenthash:8].js' : 'static/js/bundle.js',
      chunkFilename: isEnvProduction ? 'static/js/[name].[contenthash:8].chunk.js' : 'static/js/[name].chunk.js',
      globalObject: 'this',
    },
    node: {
      global: false
    },
  };

  return config;
};

If the current behavior is a bug, please provide the steps to reproduce.

What is the expected behavior? Modules path should be resolved by the supplied aliases.

Other relevant information: webpack version: 5.23.0 webpack-cli version: 4.5.0 Node.js version: 14.16.0 Operating System: Ubuntu