npm start 启动后cmd出现如下报错。html出现遮罩层报错。。关掉遮罩层后页面显示没有问题。

来源:2-1 Header组件拆分及样式布局(1)

慕侠3297407

2022-06-13 07:30:03

Microsoft Windows [版本 10.0.18363.1556]
(c) 2019 Microsoft Corporation。保留所有权利。

C:\Users\18660\Desktop\my-app>npm start
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

> my-app@0.1.0 start
> react-scripts start

(node:52880) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:52880) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...
Failed to compile.

Should not import the named export 'version' (imported as 'version') from default-exporting module (only default export is available soon)
WARNING in ./node_modules/mutationobserver-shim/dist/mutationobserver.min.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\18660\Desktop\my-app\node_modules\mutationobserver-shim\dist\MutationObserver.js' file: Error: ENOENT: no such file or directory, open 'C:\Users\18660\Desktop\my-app\node_modules\mutationobserver-shim\dist\MutationObserver.js'

WARNING in ./node_modules/antd/dist/antd.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/antd/dist/antd.css)
Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning

(168:11) autoprefixer: Replace text-decoration-skip: ink to text-decoration-skip-ink: auto, because spec had been changed

WARNING in ./node_modules/antd/dist/antd.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/antd/dist/antd.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map: 'webpack:///./<no source>' URL is not supported

WARNING in ./node_modules/antd/dist/antd.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/antd/dist/antd.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map: 'webpack:///./components/icon/style/index.less' URL is not supported

WARNING in ./node_modules/antd/dist/antd.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/antd/dist/antd.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map: 'webpack:///./components/locale-provider/style/index.less' URL is not supported

ERROR in ./node_modules/antd/es/version/index.js 2:15-22
Should not import the named export 'version' (imported as 'version') from default-exporting module (only default export is available soon)

webpack compiled with 1 error and 5 warnings
Compiled with problems:X

ERROR in ./node_modules/antd/es/version/index.js 2:15-22

Should not import the named export 'version' (imported as 'version') from default-exporting module (only default export is available soon)

补充一点,我按照antd的时候先执行的npm install antd,然后执行的npm install antd@3.10.9。然后把node_modules删掉了,然后npm start

写回答

1回答

好帮手慕慕子

2022-06-13

同学你好,截图报错还是antd插件的问题,目前学习阶段,推荐同学使用的插件等版本与视频中讲解的保持一致,可以通过如下操作:

(1)手动删除自己项目中的node_modules文件夹,package.json和package-lock.json文件。

(2)下载源码,解压后,将源码的package.json文件复制粘贴到自己的项目中。

(3)执行npm install 重新安装所有的依赖。

对于这种目前比较常用的工具类的插件,例如:antd design,官方版本迭代速度也是非常快的,所以我们学习时不要被版本不一致影响学习进度,纠结在版本问题上,重点是学习如何使用这个工具类插件的思路,以及如何去查阅官网文档。

目前学习阶段,建议与视频中使用的版本保持一致,掌握了之后,再结合官方文档,了解下新版本中新增或者改变的内容即可,而且这么多API,也不可能全部记住,实际开发中使用到了,也是要及时查阅官方文档。

祝学习愉快~


0

0 学习 · 15276 问题

查看课程