Material-UI 无法导入滑块

Posted 2023-02-22

【中文标题】Material-UI 无法导入滑块

【英文标题】：Material-UI Can't import slider

【发布时间】：2020-05-11 21:21:00

【问题描述】：

import Slider from '@material-ui/lab/Slider';

在构建时返回错误

ERROR in ./src/components/StepSlider/StepSlider-view.jsx
Module not found: Error: Can't resolve '@material-ui/lab/Slider' in 'D:\GIT\...\components\StepSlider'
 @ ./src/components/StepSlider/StepSlider-view.jsx 2:0-45 29:26-32
 @ ./src/components/StepSlider/index.js
 @ ./src/components/plan_option_slider/PlanOptionSlider-view.jsx
 @ ./src/components/plan_option_slider/index.jsx
 @ ./src/features/plans/plans-view.jsx
 @ ./src/features/plans/index.jsx
 @ ./src/App.jsx
 @ ./src/index.jsx

搜索这个错误告诉我安装lab，我已经这样做了，但我想再给它一次机会：

npm install @material-ui/lab

npm WARN bootstrap@4.4.1 requires a peer of popper.js@^1.16.0 but none is installed. You must install peer dependencies yourself.
npm WARN material-ui-pickers@2.2.4 requires a peer of @material-ui/core@^3.2.0 but none is installed. You must install 
peer dependencies yourself.
npm WARN restaurant_project@1.0.0 No description
npm WARN restaurant_project@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted "os":"darwin","arch":"any" (current: "os":"win32","arch":"x64")

+ @material-ui/lab@4.0.0-alpha.40
updated 1 package and audited 12006 packages in 13.041s
found 0 vulnerabilities

我跟着这个： npm WARN ... requires a peer of ... but none is installed. You must install peer dependencies yourself （我很确定我已经安装了所有这些，但我认为我会按照指示进行操作）

npm install --save-dev popper.js@^1.16.0

npm WARN deprecated popper.js@1.16.0: Popper changed home, find its new releases at @popperjs/core
npm WARN material-ui-pickers@2.2.4 requires a peer of @material-ui/core@^3.2.0 but none is installed. You must install 
peer dependencies yourself.
npm WARN restaurant_project@1.0.0 No description
npm WARN restaurant_project@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted "os":"darwin","arch":"any" (current: "os":"win32","arch":"x64")

+ popper.js@1.16.0
updated 1 package and audited 12007 packages in 15.415s
found 0 vulnerabilities

npm install --save-dev @material-ui/core@^3.2.0

npm WARN @material-ui/icons@4.5.1 requires a peer of @material-ui/core@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @material-ui/lab@4.0.0-alpha.40 requires a peer of @material-ui/core@^4.9.0 but none is installed. You must install peer dependencies yourself.
npm WARN restaurant_project@1.0.0 No description
npm WARN restaurant_project@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted "os":"darwin","arch":"any" (current: "os":"win32","arch":"x64")

+ @material-ui/core@3.2.0
added 4 packages from 4 contributors, removed 26 packages, updated 5 packages and audited 11946 packages in 25.503s    
found 0 vulnerabilities

这看起来令人担忧，好像实验室要的是core4.9.0，不过还好：

npm install --save-dev @material-ui/core@^4.0.0

npm WARN @material-ui/lab@4.0.0-alpha.40 requires a peer of @material-ui/core@^4.9.0 but none is installed. You must install peer dependencies yourself.
npm WARN material-ui-pickers@2.2.4 requires a peer of @material-ui/core@^3.2.0 but none is installed. You must install 
peer dependencies yourself.
npm WARN restaurant_project@1.0.0 No description
npm WARN restaurant_project@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted "os":"darwin","arch":"any" (current: "os":"win32","arch":"x64")

+ @material-ui/core@4.0.0
added 26 packages from 8 contributors, removed 6 packages, updated 1 package and audited 12027 packages in 14.485s     
found 0 vulnerabilities

所以现在它告诉我我再次需要@material-ui/core@^3.2.0 ——太好了，让我看看我是否可以忽略它（它会清除我刚刚安装的 4.9.0）

npm install --save-dev @material-ui/core@^4.9.0

npm WARN material-ui-pickers@2.2.4 requires a peer of @material-ui/core@^3.2.0 but none is installed. You must install 
peer dependencies yourself.
npm WARN restaurant_project@1.0.0 No description
npm WARN restaurant_project@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted "os":"darwin","arch":"any" (current: "os":"win32","arch":"x64")

+ @material-ui/core@4.9.0
added 5 packages from 4 contributors, removed 3 packages, updated 5 packages and audited 12007 packages in 15.823s     
found 0 vulnerabilities

好吧，让我们看看我现在是否可以构建它。

没有骰子

ERROR in ./src/components/StepSlider/StepSlider-view.jsx
Module not found: Error: Can't resolve '@material-ui/lab/Slider' in 'D:\GIT\...\src\components\StepSlider'
 @ ./src/components/StepSlider/StepSlider-view.jsx 2:0-45 29:26-32
 @ ./src/components/StepSlider/index.js
 @ ./src/components/plan_option_slider/PlanOptionSlider-view.jsx
 @ ./src/components/plan_option_slider/index.jsx
 @ ./src/features/plans/plans-view.jsx
 @ ./src/features/plans/index.jsx
 @ ./src/App.jsx
 @ ./src/index.jsx

我会尝试更新所有内容：

npm update

npm WARN deprecated popper.js@1.16.1: Popper changed home, find its new releases at @popperjs/core
npm WARN material-ui-pickers@2.2.4 requires a peer of @material-ui/core@^3.2.0 but none is installed. You must install 
peer dependencies yourself.
npm WARN restaurant_project@1.0.0 No description
npm WARN restaurant_project@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted "os":"darwin","arch":"any" (current: "os":"win32","arch":"x64")

+ popper.js@1.16.1
updated 1 package and audited 12007 packages in 14.471s
found 0 vulnerabilities

再次构建：

没有骰子

ERROR in ./src/components/StepSlider/StepSlider-view.jsx
Module not found: Error: Can't resolve '@material-ui/lab/Slider' in 'D:\GIT\...\src\components\StepSlider'
 @ ./src/components/StepSlider/StepSlider-view.jsx 2:0-45 29:26-32
 @ ./src/components/StepSlider/index.js
 @ ./src/components/plan_option_slider/PlanOptionSlider-view.jsx
 @ ./src/components/plan_option_slider/index.jsx
 @ ./src/features/plans/plans-view.jsx
 @ ./src/features/plans/index.jsx
 @ ./src/App.jsx
 @ ./src/index.jsx

我会用新的 popper 试试

npm install @popperjs/core

npm WARN material-ui-pickers@2.2.4 requires a peer of @material-ui/core@^3.2.0 but none is installed. You must install 
peer dependencies yourself.
npm WARN restaurant_project@1.0.0 No description
npm WARN restaurant_project@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted "os":"darwin","arch":"any" (current: "os":"win32","arch":"x64")

+ @popperjs/core@2.0.0
added 1 package from 1 contributor and audited 12008 packages in 19.887s
found 0 vulnerabilities

我迷路了，非常感谢任何帮助

【参考方案1】：

https://material-ui.com/guides/migration-v3/

[Container] Moved from @material-ui/lab to @material-ui/core.

-import Container from '@material-ui/lab/Container';
+import Container from '@material-ui/core/Container';

读完这篇文章后，我测试了他们是否也移动了Slider，他们确实移动了。

import Slider from '@material-ui/lab/Slider';

应该是

import Slider from '@material-ui/core/Slider';

希望这可以节省别人我浪费的时间