reactjstypescriptwebpackwebpack-5

Module build failed: UnhandledSchemeError: Reading from "alias:/path" is not handled by plugins (Unhandled scheme)

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.js;

resolve: {
  modules: paths.clientAppModules,
  extensions: ['.tsx', '.ts', '.js'],
  alias: {
    'shared:': '/home/myuser/dev/projects/tsxpress-boilerplate/shared',
    'containers:': '/home/myuser/dev/projects/tsxpress-boilerplate/client/app/views/containers'
  }
},

Dependencies:

Please let me know you need more details;

Solution

  • For anyone who is also experiencing the same issue, I have raised this here webpack github issue

    Apparently, this is a new feature introduced in webpack 5 that would recognize all prefix: as a part of URL - Thus the error.

    I fixed this by renaming my aliases from containers:/ to containers-/ - And it now works as expected.