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

Question

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:

• "typescript": "^4.1.5",
• "webpack": "^5.23.0",
• "webpack-cli": "^4.5.0"

Please let me know you need more details;

Apologete

Answer 1

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.

Apologete

Answer 2

Look here https://github.com/webpack/webpack/pull/11095/files

https://github.com/vankop/webpack/blob/7bbc2aa3ceb34d93b6f17549f02eca3518d680d2/lib/index.js#L433

https://github.com/vankop/webpack/blob/7bbc2aa3ceb34d93b6f17549f02eca3518d680d2/lib/schemes/FileUriPlugin.js#L25

What you are missing is that schemes other than "http" or "file" aren't supported by webpack. The error message is saying that.

import { store } from 'shared:/states/store';
import App from 'containers:/App';

shared and containers are not supported schemes, webpack won't pass them forward to babel/typescript, so this kind of URI won't work.

Unless, you are willing to write a bypass plugin, I though someone would've already made one, I only found this error. It seems kind of easy to copy the file plugin and add more schemes, that's what I'm going to do.

[edit:] In Webpack5, you can for example:

Just do this.

"use strict";

const node_url = require("url");

class AnySchemeUriPlugin {

    constructor(options = {}) {
        this.options = options;
    }

    apply(compiler) {
        compiler.hooks.compilation.tap(
            "AnySchemeUriPlugin",
            (compilation, { normalModuleFactory }) => {
                Array.from(this.options.schemes).forEach(scheme => {
                    normalModuleFactory.hooks.resolveForScheme
                        .for(scheme)
                        .tap("AnySchemeUriPlugin", resourceData => {
                            const uri = resourceData.resource.replace(`${scheme}://`, 'file://');
                            const url = new node_url.URL(uri);
                            const path = node_url.fileURLToPath(url);
                            const query = url.search;
                            const fragment = url.hash;
                            resourceData.path = path;
                            resourceData.query = query;
                            resourceData.fragment = fragment;
                            resourceData.resource = path + query + fragment;
                            return true;
                        });
                });
            }
        );
    }
}

module.exports = AnySchemeUriPlugin;

then, in your webpack.config

    // The HtmlWebpackPlugin allows us to use a template for the index.html page
    // and automatically injects <script> or <link> tags for generated bundles.
    const commonPlugins = [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: baseConfig.indexHtmlTemplate,
            inlineSource: '^.+\.(css)$',
        }),
        new AnySchemeUriPlugin({
            schemes: ['ssr']
        })
        //new BundleAnalyzerPlugin(),
    ];

    return {
        entry: {
            app: [
                baseConfig.fsharpEntry
            ],
        },
        context: baseConfig.srcDir,
        plugins: isProduction
            ? commonPlugins.concat([
            ]) : commonPlugins,
     }

Spelaean

Hey, thanks for the help and sorry for the late response. I have tried creating this custom plugin and implements it in my webpack configuration as per you stated. However, the error still persists. Even though I was wondering why we needed this extra plugin, as per my understanding, webpack should've supported this based on alias configuration. I am trying to crawl into CRA and see if I can spot anything. – Apologete