Reactjs 要求SVG原因反应服务器错误:";未定义“反应”;
在使用加载SVG文件(如follow)生成的react服务器项目中,会触发react错误Reactjs 要求SVG原因反应服务器错误:";未定义“反应”;,reactjs,svg,webpack,react-server,Reactjs,Svg,Webpack,React Server,在使用加载SVG文件(如follow)生成的react服务器项目中,会触发react错误 const fmc = require('../images/logo.svg'); 出错 Failed to load page at "../pages/home.js" ReferenceError: React is not defined at Object.<anonymous> (/Users/me/Projects/myProject/dev/images/logo.svg:1
const fmc = require('../images/logo.svg');
出错
Failed to load page at "../pages/home.js" ReferenceError: React is not defined
at Object.<anonymous> (/Users/me/Projects/myProject/dev/images/logo.svg:1:1)
at Module._compile (module.js:541:32)
at loader (/Users/svasseur/Projects/delateurs/dev/node_modules/babel-register/lib/node.js:144:5)
at Object.require.extensions.(anonymous function) [as .js] (/Users/svasseur/Projects/delateurs/dev/node_modules/babel-register/lib/node.js:154:7)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/Users/me/Projects/myProject/dev/components/footer.js:5:13)
以下是我的React组件:
import React from 'react';
require('../styles/footer.scss');
const myLogo = require('../images/logo.svg');
export default class Footer extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div>
<nav className="flexcontainer">
<div className="flexitem"><img src={myLogo} className="footer-logo"/></div>
</nav>
</div>
);
}
}
即使不使用react组件,也必须
在文件中要求('react')
使用JSX。实际上,我从'react'导入react。我在React组件中使用这些SVG导出默认类Footer扩展React.Component
。
import React from 'react';
require('../styles/footer.scss');
const myLogo = require('../images/logo.svg');
export default class Footer extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div>
<nav className="flexcontainer">
<div className="flexitem"><img src={myLogo} className="footer-logo"/></div>
</nav>
</div>
);
}
}
<img src={require('../images/logo.svg')} />
└── react@0.14.8
└── react-server@0.4.8
└─┬ react-server-cli@0.4.9
└── webpack@1.13.2