Module build failed: UnhandledSchemeError: Reading from "alias:/App" is not handled by plugins (Unhandled scheme). #12792

chozzz · 2021-02-28T12:46:08Z

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

The text was updated successfully, but these errors were encountered:

alexander-akait · 2021-03-01T12:33:47Z

Limitation you can't use something: in import, because import ... from ... should have URL, so when you start something with data:/http:/https: webpack recognizes as URL

chozzz · 2021-03-01T13:41:50Z

@alexander-akait Is this a new limitation introduced in webpack 5? Because, I can see it works with ejected CRA with webpack 4, and I only needed to provide aliases in both webpack.config.js for the compiler and tsconfig.json for typescript.

I am currently trying to break one in CRA by removing each of every plugins they use to reproduce the same issue to isolate this.

alexander-akait · 2021-03-01T13:48:00Z

@chozzz And yes and no, we just recognize URLs in import ... from ... now, so it is features and it is small breaking change

chozzz · 2021-03-01T14:11:30Z

@alexander-akait Thanks for the heads up! It actually works as long as the format of the import isn't suffixed with :/.
I've modified the import as in from models:/ to models-/ - And the error is now gone.

This is pretty confusing though it's not documented anywhere (Or maybe I missed it?), I was expecting alias would work as it used to and how it's named as alias.

Feel free to close it if this is a wontfix type of bug.

alexander-akait · 2021-03-01T14:15:35Z

@sokra What do you think? I think we can improve checking on [a-zA-Z]:// (i.e. two slashes)

chozzz · 2021-03-01T14:28:08Z

@alexander-akait I can see few of improvements, correct me if I am overstepping here;

Why don't we whitelist only several protocols for URL imports? e.g. ((https?)|(ftp)://)
I also think if alias configuration is set, compiler should also decide the priority between this URL feature or the config. And warn user if there's conflicts between them.
The error message seems to be a bit vague to me (Ignore this if it's just me) - Can we create the error to be more verbose to describe that "Hey, we're detecting import as URL now - You can't do this etc..instead ofUnhandledSchemeError` is not handled by plugins?

alexander-akait · 2021-03-01T14:36:10Z

Why don't we whitelist only several protocols for URL imports? e.g. ((https?)|(ftp)://)

webpack supports http(s)/data protocols in experimental mode, also ignoring something is not good, better generate warning/error

I also think if alias configuration is set, compiler should also decide the priority between this URL feature or the config. And warn user if there's conflicts between them.
The error message seems to be a bit vague to me (Ignore this if it's just me) - Can we create the error to be more verbose to describe that "Hey, we're detecting import as URL now - You can't do this etc..instead ofUnhandledSchemeError` is not handled by plugins?

Make sense

webpack-bot · 2021-06-16T06:31:56Z

This issue had no activity for at least three months.

It's subject to automatic issue closing if there is no activity in the next 15 days.

alexander-akait · 2021-06-16T10:25:10Z

bump

otakustay · 2021-07-25T06:12:44Z

Having similar issue:

Module build failed: UnhandledSchemeError: Reading from "data:image/svg+xml;<svg class="osui-spin-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="16" height="16"><defs><style/></defs><path d="M521.472 64.128L512 64A448 448 0 0064 512a37.12 37.12 0 1074.24 0A373.76 373.76 0 01512 138.24l20.48.576A373.76 373.76 0 01512 885.696 37.12 37.12 0 10512 960a448 448 0 009.472-895.872z"/></svg>" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "data:" URIs.

This is an issue after we upgraded css-loader, but this error message seems confusion, it said webpack handles data: URIs by default and also said I need an additional plugin to handle data: URIs.

Confirmed this is a syntax error in data uri, webpack gives unclear error message

sokra · 2021-07-25T16:22:15Z

Your data url is invalid. The ; need to be a ,

webpack-bot · 2021-11-09T06:31:56Z

Issue was closed because of inactivity.

If you think this is still a valid issue, please file a new issue with additional information.

vankop · 2021-11-09T11:32:27Z

@alexander-akait what this issue is about?.. regarding aliases for scheme request we already have issue. regarding handling custom scheme requests there is an API for that

alexander-akait · 2021-11-09T11:36:47Z

@vankop Yep, you are right, let's close in favor aliases for scheme requests

Afekhide · 2023-05-02T02:42:08Z

I'm having same issues,

Below is my webpack config `const path = require('path');
const PugPlugin = require('pug-plugin');
const webpack = require('webpack');
const WatchExternalFilesPlugin = require('webpack-watch-external-files-plugin');
const dirNode = path.resolve(__dirname, 'node_modules');
const dirAssets = path.resolve(__dirname, 'src/assets');
const dirStyles = path.resolve(__dirname, 'src/styles');
const dirPages = path.resolve(__dirname, 'src/pages');
const dirViews = path.resolve(__dirname, 'src/views');
const dirApp = path.resolve(__dirname, 'src/app');

module.exports = {
mode: 'none',
entry: {
index: path.resolve(dirPages, 'index.pug'),
},
resolve:{
modules: [dirNode],
alias:{
fonts: path.resolve(dirAssets, 'fonts'),
images: path.resolve(dirAssets, 'images'),
data: path.resolve(dirAssets, 'data'),
views: dirViews,
app: dirApp,
api: path.resolve(dirApp, 'api'),
styles: dirStyles,
store: path.resolve(dirApp, 'store'),
components: path.resolve(dirApp, 'components'),
}
},
plugins: [
new PugPlugin({
css: {
filename: 'assets/css/[name].[contenthash:8].css'
}
}),

    new webpack.DefinePlugin({
        process: {env: {}}
    })
],
output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    assetModuleFilename: '[name][ext]',
    clean: true,
},

module: {
    rules: [
        {
            test: /\.pug$/i,
            loader: PugPlugin.loader,
        },
        {
            test: /\.(svg|jpe?g|bmp|webp|png|gif)$/i,
            type: 'asset/resource'
        },
        {
            test: /\.(css|sass|scss)$/i,
            use: ['css-loader', 'sass-loader']
        },
        {
            test: /\.(woff|ttf|eot|woff2|otf)$/i,
            type: 'asset/resource',
        }
    ]
},
devtool: 'inline-source-map',
devServer: {
    static: path.resolve(__dirname, 'dist/'),
    watchFiles: {
        paths: ['./src/**/*.*'],
        options: {
            usePolling: true,
        }
    },
    port: 5000,
    hot: true,

},
watchOptions: {
    aggregateTimeout: 200,
    poll: 10,
},

}`

I'm currently using a package called node-fetch as a helper module for another package prismicio/client
The error I get is something of the above nature, a bunch of UnhandledScheme errors.
eg: node:lib is not handled by plugins

What I dont get is this: If I remove the node-fetch package, my project compiles successfully, but I get a lot of errors if I use node-fetch. However, the Prismic io docs, encourage using node-fetch, and that's exactly what I'm doing. Here's a link to the docs.

alexander-akait · 2023-05-02T08:59:05Z

Do you use node-fetch for the web target?

Afekhide · 2023-05-13T02:03:21Z

Yes I did use node-fetch. Node-fetch was even recommended by the official prismic docs, but following the docs verbatim got me that UnhandledSchemeError

…

On Tue, May 2, 2023, 9:59 AM Alexander Akait ***@***.***> wrote: Do you use node-fetch for the web target? — Reply to this email directly, view it on GitHub <#12792 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AIWGK4WJYEW64PDHIWDGWMTXEDEGJANCNFSM4YLAZGYQ> . You are receiving this because you commented.Message ID: ***@***.***>

webpack-bot added webpack-5 question labels Mar 1, 2021

alexander-akait closed this as completed Mar 1, 2021

alexander-akait reopened this Mar 1, 2021

alexander-akait added bug enhancement and removed question labels Mar 16, 2021

webpack-bot added the inactive label Jun 16, 2021

webpack-bot removed the inactive label Jun 16, 2021

webpack-bot added the inactive label Oct 25, 2021

webpack-bot closed this as completed Nov 9, 2021

alexander-akait reopened this Nov 9, 2021

webpack-bot removed the inactive label Nov 9, 2021

alexander-akait closed this as completed Nov 9, 2021

rifaldhiaw mentioned this issue Dec 26, 2023

Module build failed: UnhandledSchemeError: Reading from "bun:sqlite" is not handled by plugins (Unhandled scheme). oven-sh/bun#4350

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Module build failed: UnhandledSchemeError: Reading from "alias:/App" is not handled by plugins (Unhandled scheme). #12792

Module build failed: UnhandledSchemeError: Reading from "alias:/App" is not handled by plugins (Unhandled scheme). #12792

chozzz commented Feb 28, 2021 •

edited

alexander-akait commented Mar 1, 2021

chozzz commented Mar 1, 2021 •

edited

alexander-akait commented Mar 1, 2021

chozzz commented Mar 1, 2021 •

edited

alexander-akait commented Mar 1, 2021

chozzz commented Mar 1, 2021

alexander-akait commented Mar 1, 2021

webpack-bot commented Jun 16, 2021

alexander-akait commented Jun 16, 2021

otakustay commented Jul 25, 2021 •

edited

sokra commented Jul 25, 2021

webpack-bot commented Nov 9, 2021

vankop commented Nov 9, 2021 •

edited

alexander-akait commented Nov 9, 2021

Afekhide commented May 2, 2023

alexander-akait commented May 2, 2023

Afekhide commented May 13, 2023 via email

Module build failed: UnhandledSchemeError: Reading from "alias:/App" is not handled by plugins (Unhandled scheme). #12792

Module build failed: UnhandledSchemeError: Reading from "alias:/App" is not handled by plugins (Unhandled scheme). #12792

Comments

chozzz commented Feb 28, 2021 • edited

Bug report

alexander-akait commented Mar 1, 2021

chozzz commented Mar 1, 2021 • edited

alexander-akait commented Mar 1, 2021

chozzz commented Mar 1, 2021 • edited

alexander-akait commented Mar 1, 2021

chozzz commented Mar 1, 2021

alexander-akait commented Mar 1, 2021

webpack-bot commented Jun 16, 2021

alexander-akait commented Jun 16, 2021

otakustay commented Jul 25, 2021 • edited

sokra commented Jul 25, 2021

webpack-bot commented Nov 9, 2021

vankop commented Nov 9, 2021 • edited

alexander-akait commented Nov 9, 2021

Afekhide commented May 2, 2023

alexander-akait commented May 2, 2023

Afekhide commented May 13, 2023 via email

chozzz commented Feb 28, 2021 •

edited

chozzz commented Mar 1, 2021 •

edited

chozzz commented Mar 1, 2021 •

edited

otakustay commented Jul 25, 2021 •

edited

vankop commented Nov 9, 2021 •

edited