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

Question

我正在创建一个新的 React 应用程序并尝试从头开始配置 webpack 编译器。当运行带有 webpack -c config/webpack.config.ts 的构建命令时会发生此问题 - 它给出如下错误；

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

知道是什么原因造成的或我遗漏了什么吗？任何建议表示赞赏。

我的目录结构如下：

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

文件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')
);

文件tsconfig.json/compilerOptions/paths

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

文件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'
  }
},

依赖关系：

"打字稿": "^4.1.5",
"webpack": "^5.23.0",
"webpack-cli": "^4.5.0"

请让我知道您需要更多详细信息；

Answer 1

看这里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

您缺少的是 webpack 不支持“http”或“file”以外的方案。错误消息是这样说的。

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

shared 和 containers 是不支持的方案，webpack 不会将它们转发给 babel/typescript，所以这种 URI 将不起作用。

除非，你愿意写一个绕过插件，我虽然有人已经做了一个，但我只发现了这个错误。复制文件插件并添加更多方案似乎很容易，这就是我要做的。

[edit:] 在 Webpack5 中，你可以例如：

就这样做吧。

"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;

然后，在您的 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,
     }

Answer 2

对于同样遇到相同问题的任何人，我已在此处提出此问题 webpack github issue

显然，这是 webpack 5 中引入的一项新功能，可以将所有 prefix: 识别为 URL 的一部分 - 因此出现错误。

我通过将我的别名从 containers:/ 重命名为 containers-/ 来解决这个问题 - 现在它可以正常工作了。

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

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

reactjs

typescript

webpack

webpack-5