material-ui Popper.js:11 未捕获的类型错误:styled_default 不是一个函数,位于 Popper.js:11:20

7eumitmz  于 6个月前  发布在  其他
关注(0)|答案(4)|浏览(68)

重复问题

  • 我搜索了现有的问题

最新版本

  • 我测试了最新版本

重现步骤 🕹

链接到实时示例: https://github.com/Nefcanto/MuiPopperBug
步骤:

  1. git clone https://github.com/Nefcanto/MuiPopperBug
  2. cd MuiPopperBug
  3. npm install
  4. npm run dev
  5. 浏览并查看错误

当前行为 😯

Popper抱怨关于 styled_default 并且没有给我们更多信息来调试这个问题。我在控制台上看到的全部是:

Popper.js:11 Uncaught TypeError: styled_default is not a function
    at Popper.js:11:20
(anonymous) @ Popper.js:11

我在终端里什么也没看到。我完全不知道。一点头绪都没有。

预期行为 🤔

当发生错误时,你们应该给我们更多的数据,至少是一个包含与我们的代码相关的调用堆栈的堆栈跟踪。
我的哪个组件导致了这个问题?我应该如何调试这个?
在具有数百个甚至有时数千个组件的实际应用程序中,通过试错来解决问题是不可能的。

上下文 🔦

  • 无响应*

你的环境 🌎

npx @mui/envinfo

System:
    OS: Linux 5.19 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
  Binaries:
    Node: 18.15.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.6.1 - /usr/local/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @emotion/react: ^11.10.6 => 11.10.6 
    @emotion/styled: ^11.10.6 => 11.10.6 
    @mui/base:  5.0.0-alpha.121 
    @mui/core-downloads-tracker:  5.11.13 
    @mui/icons-material: ^5.11.11 => 5.11.11 
    @mui/lab: ^5.0.0-alpha.101 => 5.0.0-alpha.123 
    @mui/material: ^5.11.13 => 5.11.13 
    @mui/private-theming:  5.11.13 
    @mui/styled-engine:  5.11.11 
    @mui/system:  5.11.13 
    @mui/types:  7.2.3 
    @mui/utils:  5.11.13 
    @mui/x-date-pickers: ^6.0.1 => 6.0.1 
    @types/react: ^18.0.27 => 18.0.28 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0

我在一个docker容器内。我的本地浏览器是:

Chrome 111.0.5563.64 (Official Build) (64-bit)
ttp71kqs

ttp71kqs1#

我也有这个问题,使用vite时

nzrxty8p

nzrxty8p2#

Popper运行良好,并不抱怨styled与Webpack捆绑在一起时不是一个函数 - 这使我相信这是Vite方面的问题,而不是您的项目中的问题。
我建议在他们的仓库中打开一个问题,并提供一个最小可复现示例(您创建的示例包含许多与问题无关的代码)。有一个小的复现示例确实可以帮助确定实际的错误。
如果它最终证明是我们构建中的一个错误,我很乐意解决这个问题,但我对Vite的打包器不太熟悉,无法弄清楚。

eimct9ow

eimct9ow3#

@michaldudak 的重点是我们试图创建一个最小可复现的例子。但这并没有发生在那里。它甚至在我们代码中间歇性地发生。有时候它可以工作。这就是我们提交我们的实际代码并去除登录和API调用的原因。
幸运的是,Vite团队已经使用相同的示例仓库找到了bug的来源。
他们已经确认这是一个Vite bug,但我认为你也可以为你的开发文档添加额外的文档。因为我看到很多MUI开发者都受到了这个bug的影响(与PopperCardBox或其他许多组件有关)。

os8fio9y

os8fio9y4#

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: [
      '@mui/icons-material',
      '@mui/material',
      '@emotion/react',
      '@emotion/styled',
    ],
  },
});

答案对我有用。

相关问题