javascript - Material UI Select 组件崩溃 React 应用程序

Question

我正在尝试向我正在使用的 React 应用程序添加一个 Material ui 选择组件。当我尝试向表单添加选择功能时，它崩溃了。尽管使用了确切的示例 from the docs ，我得到同样的错误和应用程序崩溃。
到目前为止，我已经尝试过:

修改 ID

删除和更改各种 Prop 以查看我是否可以确定导致错误的特定点(不走运)

确定 value prop 是一个空字符串，有一个子匹配 MenuItem (运气不好)

设置一个 defaultValue Prop (运气不好)

删除其他组件以确保问题集中在 <Select>组件(它以 Select 为中心。FormControl 和 InputLabel 不会导致崩溃)

创建了一个仅包含示例 SimpleSelect 的新路由组件来自 from the docs (仍然崩溃，这个组件就在 App 组件的正下方，所以上游应该没有任何影响)

确定 @material-ui/core是最新的 (4.11.0)

删除了 node_modules 并重新安装了所有内容

在网上搜索了诸如此类的其他问题，但没有找到任何内容

控制台上的错误日志通常也很神秘:

The above error occurred in the <data:application/javascript;charset=utf-8;base64,aW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnOwppbXBvcnQgY3JlYXRlU3ZnSWNvbiBmcm9tICcuLi8uLi91dGlscy9jcmVhdGVTdmdJY29uJzsKLyoqCiAqIEBpZ25vcmUgLSBpbnRlcm5hbCBjb21wb25lbnQuCiAqLwoKZXhwb3J0IGRlZmF1bHQgY3JlYXRlU3ZnSWNvbiggLyojX19QVVJFX18qL1JlYWN0LmNyZWF0ZUVsZW1lbnQoInBhdGgiLCB7CiAgZDogIk03IDEwbDUgNSA1LTV6Igp9KSwgJ0Fycm93RHJvcERvd24nKTs=> component:
    in data:application/javascript;charset=utf-8;base64,aW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnOwppbXBvcnQgY3JlYXRlU3ZnSWNvbiBmcm9tICcuLi8uLi91dGlscy9jcmVhdGVTdmdJY29uJzsKLyoqCiAqIEBpZ25vcmUgLSBpbnRlcm5hbCBjb21wb25lbnQuCiAqLwoKZXhwb3J0IGRlZmF1bHQgY3JlYXRlU3ZnSWNvbiggLyojX19QVVJFX18qL1JlYWN0LmNyZWF0ZUVsZW1lbnQoInBhdGgiLCB7CiAgZDogIk03IDEwbDUgNSA1LTV6Igp9KSwgJ0Fycm93RHJvcERvd24nKTs= (created by ForwardRef(SelectInput))
    in ForwardRef(SelectInput) (created by ForwardRef(InputBase))
    in div (created by ForwardRef(InputBase))
    in ForwardRef(InputBase) (created by WithStyles(ForwardRef(InputBase)))
    in WithStyles(ForwardRef(InputBase)) (created by ForwardRef(FilledInput))
    in ForwardRef(FilledInput) (created by WithStyles(ForwardRef(FilledInput)))
    in WithStyles(ForwardRef(FilledInput)) (created by ForwardRef(Select))
    in ForwardRef(Select) (created by WithStyles(ForwardRef(Select)))
    in WithStyles(ForwardRef(Select)) (created by SimpleSelect)
    in div (created by ForwardRef(FormControl))
    in ForwardRef(FormControl) (created by WithStyles(ForwardRef(FormControl)))
    in WithStyles(ForwardRef(FormControl)) (created by SimpleSelect)
    in div (created by SimpleSelect)
    in SimpleSelect (created by Context.Consumer)
    in Route (created by App)
    in Switch (created by App)
    in ThemeProvider (created by App)
    in App
    in Router (created by BrowserRouter)
    in BrowserRouter

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/docs/error-boundaries.html to learn more about error boundaries.

和 Uncaught DOMException: String contains an invalid character .
这是产生相同错误的组件(来自文档的精确副本):

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormHelperText from '@material-ui/core/FormHelperText';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';

const useStyles = makeStyles((theme) => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
  selectEmpty: {
    marginTop: theme.spacing(2),
  },
}));

export default function SimpleSelect() {
  const classes = useStyles();
  const [age, setAge] = React.useState('');

  const handleChange = (event) => {
    setAge(event.target.value);
  };

  return (
    <div>
      <FormControl className={classes.formControl}>
        <InputLabel id="demo-simple-select-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age}
          onChange={handleChange}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
      <FormControl className={classes.formControl}>
        <InputLabel id="demo-simple-select-helper-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-helper-label"
          id="demo-simple-select-helper"
          value={age}
          onChange={handleChange}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
        <FormHelperText>Some important helper text</FormHelperText>
      </FormControl>
      <FormControl className={classes.formControl}>
        <Select
          value={age}
          onChange={handleChange}
          displayEmpty
          className={classes.selectEmpty}
          inputProps={{ 'aria-label': 'Without label' }}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
        <FormHelperText>Without label</FormHelperText>
      </FormControl>
      <FormControl className={classes.formControl}>
        <InputLabel shrink id="demo-simple-select-placeholder-label-label">
          Age
        </InputLabel>
        <Select
          labelId="demo-simple-select-placeholder-label-label"
          id="demo-simple-select-placeholder-label"
          value={age}
          onChange={handleChange}
          displayEmpty
          className={classes.selectEmpty}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
        <FormHelperText>Label + placeholder</FormHelperText>
      </FormControl>
      <FormControl className={classes.formControl} disabled>
        <InputLabel id="demo-simple-select-disabled-label">Name</InputLabel>
        <Select
          labelId="demo-simple-select-disabled-label"
          id="demo-simple-select-disabled"
          value={age}
          onChange={handleChange}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
        <FormHelperText>Disabled</FormHelperText>
      </FormControl>
      <FormControl className={classes.formControl} error>
        <InputLabel id="demo-simple-select-error-label">Name</InputLabel>
        <Select
          labelId="demo-simple-select-error-label"
          id="demo-simple-select-error"
          value={age}
          onChange={handleChange}
          renderValue={(value) => `⚠️  - ${value}`}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
        <FormHelperText>Error</FormHelperText>
      </FormControl>
      <FormControl className={classes.formControl}>
        <InputLabel id="demo-simple-select-readonly-label">Name</InputLabel>
        <Select
          labelId="demo-simple-select-readonly-label"
          id="demo-simple-select-readonly"
          value={age}
          onChange={handleChange}
          inputProps={{ readOnly: true }}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
        <FormHelperText>Read only</FormHelperText>
      </FormControl>
      <FormControl className={classes.formControl}>
        <InputLabel id="demo-simple-select-autowidth-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-autowidth-label"
          id="demo-simple-select-autowidth"
          value={age}
          onChange={handleChange}
          autoWidth
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
        <FormHelperText>Auto width</FormHelperText>
      </FormControl>
      <FormControl className={classes.formControl}>
        <Select
          value={age}
          onChange={handleChange}
          displayEmpty
          className={classes.selectEmpty}
          inputProps={{ 'aria-label': 'Without label' }}
        >
          <MenuItem value="" disabled>
            Placeholder
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
        <FormHelperText>Placeholder</FormHelperText>
      </FormControl>
      <FormControl required className={classes.formControl}>
        <InputLabel id="demo-simple-select-required-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-required-label"
          id="demo-simple-select-required"
          value={age}
          onChange={handleChange}
          className={classes.selectEmpty}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
        <FormHelperText>Required</FormHelperText>
      </FormControl>
      <FormControl variant="outlined" className={classes.formControl}>
        <InputLabel id="demo-simple-select-outlined-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-outlined-label"
          id="demo-simple-select-outlined"
          value={age}
          onChange={handleChange}
          label="Age"
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
      <FormControl variant="filled" className={classes.formControl}>
        <InputLabel id="demo-simple-select-filled-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-filled-label"
          id="demo-simple-select-filled"
          value={age}
          onChange={handleChange}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
}

这可能是一个构建链相关的问题，所以这是我的 webpack 配置:

const webpack = require("webpack");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");

const isProd = process.env.NODE_ENV === "production";
const buildDir = "dist";
const useBundleAnalyzer = false;
const chalk = require("chalk");
const version = JSON.stringify(require("./package.json").version);
const author = JSON.stringify(require("./package.json").author);

console.log(
  chalk.white.bgBlue.bold(`
-------------------------------------------------------------------------
            Application Front End
            Version: ${version}
            running: ${process.env.NODE_ENV}
            by: ${author}
-------------------------------------------------------------------------
`)
);

module.exports = {
  entry: {
    main: "./src/root.jsx",
  },
  mode: process.env.NODE_ENV !== "production" ? "development" : "production",
  optimization: {
    splitChunks: {
      chunks: "async",
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: "~",
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
  output: {
    path: path.join(__dirname, buildDir),
    filename: "[name].[hash].js",
    chunkFilename: "[name].[id].[hash].chunk.js",
    publicPath: "/",
  },
  resolve: {
    modules: [path.join(__dirname, "./src"), "node_modules"],
    extensions: [".js", ".jsx"],
  },
  devServer: {
    hot: false,
    disableHostCheck: true,
    inline: true,
    contentBase: path.join("./", buildDir),
    historyApiFallback: true,
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Credentials": "true",
      "Access-Control-Allow-Headers": "true",
    },
  },
  devtool: process.env.NODE_ENV === "development" ? "inline-source-map" : "",
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        loader: "babel-loader",
        query: {
          presets: ["@babel/preset-env", "@babel/preset-react"],
        },
      },
      {
        test: /\.css$|\.scss$|\.sass$/,
        loaders: [
          "style-loader",
          "css-loader",
          "resolve-url-loader",
          "sass-loader",
        ],
      },
      {
        test: /.(png|woff(2)?|eot|ttf|svg)/,
        loader: "url-loader?limit=100000",
      },
    ],
  },
  plugins: [
    ...(isProd ? [new CleanWebpackPlugin({ verbose: true })] : []),
    /**
     * Show visualization of webpack bundle.
     */
    ...(useBundleAnalyzer ? [new BundleAnalyzerPlugin()] : []),
    new webpack.DefinePlugin({
      "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
      VERSION: version,
    }),
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "./src/html/index.html"),
      filename: "index.html",
      inject: "body",
    }),
  ],
};

有没有人遇到过类似的问题？这个问题阻止了我的前进，并让我感到非常沮丧。
编辑:图标不是问题。下面的组件也发生了同样的事情:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";

const useStyles = makeStyles(theme => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
  selectEmpty: {
    marginTop: theme.spacing(2),
  },
}));

export default function SimpleSelect2() {
  const classes = useStyles();

  return (
    <div>
      <FormControl className={classes.formControl}>
        <InputLabel id="demo-simple-select-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={10}
          onChange={event => console.log(event)}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
}

编辑-2:
这是崩溃后的 DOM:

编辑-3:
Chrome 上更具描述性的错误消息:

Answer 1

我发现了问题并修复了它。我正在写一个更全面的解释作为答案，以便遇到类似问题的任何其他人都可以从中受益。这是我找到它的方法:
我在问题中发布的“神秘”错误消息包含以下字符串:

<data:application/javascript;charset=utf-8;base64,aW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnOwppbXBvcnQgY3JlYXRlU3ZnSWNvbiBmcm9tICcuLi8uLi91dGlscy9jcmVhdGVTdmdJY29uJzsKLyoqCiAqIEBpZ25vcmUgLSBpbnRlcm5hbCBjb21wb25lbnQuCiAqLwoKZXhwb3J0IGRlZmF1bHQgY3JlYXRlU3ZnSWNvbiggLyojX19QVVJFX18qL1JlYWN0LmNyZWF0ZUVsZW1lbnQoInBhdGgiLCB7CiAgZDogIk03IDEwbDUgNSA1LTV6Igp9KSwgJ0Fycm93RHJvcERvd24nKTs=

字符串的第一部分告诉我这是一个 base64 encoded字符串。当我解码它时，这就是我得到的:

"import * as React from 'react';
import createSvgIcon from '../../utils/createSvgIcon';
/**
 * @ignore - internal component.
 */

export default createSvgIcon( /*#__PURE__*/React.createElement(\"path\", {
  d: \"M7 10l5 5 5-5z\"
}), 'ArrowDropDown');"

正如评论所暗示的那样，这是 Material UI 使用的内部组件。涉及 svg 's 并基于此，我检查了我的 webpack 配置以了解我是如何处理的 svg以及修补它是否会解决这个问题。
这是 svg 的配置文件是在我的应用程序的 webpack 配置中处理的:

      {
        test: /.(png|woff(2)?|eot|ttf|svg)/,
        loader: "url-loader?limit=100000",
      },

url-loader在这里导致问题并将其注释掉可以解决此问题。顺便说一下，取消限制也不会改变任何事情。我将使用另一个加载程序来解决这个问题。所以最终这是一个工具问题。
感谢@Jared Smith 和@Ryan Cogswell 的评论。你们两个都很接近你的猜测，遵循它们最终会让我发现这个发现。