加上Fragment后出现Fragment没有定义的报错

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

慕侠3297407

2022-06-13 08:30:37

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:54096) [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:54096) [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

WARNING in src\components\Header\index.js
  Line 10:5:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text

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)

ERROR in src\components\Header\index.js
  Line 9:5:  'Fragment' is not defined  react/jsx-no-undef

Search for the keywords to learn more about each error.

webpack compiled with 2 errors and 6 warnings
import React,{Component} from 'react';
import {Menu,Icon} from 'antd';
import logo from './logo.png';
import './style.css';

class AppHeader extends Component{
	render(){
		return (
			<Fragment>
				<img src={logo} className='app-header-logo'/>
				<Menu mode="horizontal">
					<Menu.Item key="mail">
						<Icon type="mail" />VOA慢速英语
					</Menu.Item>
				</Menu>
			</Fragment>
		)
	}
}

export default AppHeader;


写回答

2回答

好帮手慕慕子

2022-06-13

同学你好,自己能够发现并解决问题,真棒!!!可以学着根据报错信息来解决问题,慢慢培养自己独立解决问题的能力,祝学习愉快~

0

慕侠3297407

提问者

2022-06-13

奥知道了,没引入

0

0 学习 · 15276 问题

查看课程