React+Webpack搭建终端模拟器提示URL scheme "webpack"不支持

问题原因1：Switch语句缺少break导致逻辑穿透 #

你在manageInput方法里的ls、mkdir、clear三个case分支都没有加break语句，输入对应命令后逻辑会一直向下执行到default分支，状态更新逻辑混乱，可能触发意外的组件渲染逻辑。
修复方式：给这三个分支补上break：

const manageInput = () => {
    switch (values.userInput) {
        case "help":
            setShowComponent(true);
            setShowError(false);
            break;
        case "ls":
            setShowComponent(true);
            setShowError(false);
            break; // 新增
        case "mkdir":
            setShowComponent(true);
            setShowError(false);
            break; // 新增
        case "clear":
            setShowComponent(true);
            setShowError(false);
            break; // 新增
        default:
            setShowComponent(false);
            setShowError(true);
    }
};

问题原因2：webpack-dev-server配置语法不匹配 #

你用的devServer.contentBase是webpack-dev-server v3版本的配置项，如果你安装的是v4及以上版本的devServer，这个配置已经被废弃，替换为static配置项。配置不匹配会导致devServer的资源路径解析错误，出现webpack scheme不支持的报错。
修复方式：修改webpack.config.js的devServer配置：

devServer: {
    port: 5000,
    static: "./dist", // 把contentBase换成static
    historyApiFallback: true,
},

问题原因3：输入框disabled属性逻辑冗余 #

你输入框的disabled属性写为disabled={!blinking ? disabled : disabled}，无论blinking的值是什么，最终都是取disabled变量的值，完全没有达到你想要的控制效果，可能导致输入框状态不符合预期，建议调整为你实际需要的逻辑，比如直接取disabled状态即可：

disabled={disabled}

可选检查项 #

如果修改完上述配置还是报错，可以检查下你的babel配置是否正确安装了@babel/preset-react preset，并且在.babelrc或者babel-loader的options里配置了该preset，确保React的JSX语法能被正确转译。

内容的提问来源于stack exchange，提问作者user15790776