Сообщение [React JSX] svg-иконка, но в промежуточном "компоненте" от 03.08.2019 11:28
Изменено 03.08.2019 12:27 VladCore
[React] svg-иконка, но в промежуточном "компоненте"
Казалось бы, на ровном месте, вот так, но некрасиво, работает:
а вот по правильному — вылетает ошибка
Причем информации из ошибки — НОЛЬ. Кто из них object?!!! только style тут object. И что не так?
Реакт 16.8.5 если это важно — ошибка в development mode выскакивает (npm start). В проде не проверял.
import { ReactComponent as WizardIconSvg } from '../../icons/Wizard-Icon.svg';
...
// где то ниже в return ();
return ( ...............
<WizardIconSvg style={{width: 32,height:32,fill:'white',strokeWidth:'10px',stroke:'white' }}/>
........... );а вот по правильному — вылетает ошибка
import { ReactComponent as WizardIconSvg } from '../../icons/Wizard-Icon.svg';
const WizardIcon = <WizardIconSvg style={{width: 32,height:32,fill:'white',strokeWidth:'10px',stroke:'white' }}/>;
...
// где то ниже в return ();
return ( ............... <WizardIcon /> ...............)Причем информации из ошибки — НОЛЬ. Кто из них object?!!! только style тут object. И что не так?
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of `DiskBenchmarkDialog`.
▶ 29 stack frames were collapsed.
Module../src/index.js
src/index.js:11
8 | const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
9 | const rootElement = document.getElementById('root');
10 |
> 11 | ReactDOM.render(
12 | <BrowserRouter basename={baseUrl}>
13 | <App />
14 | </BrowserRouter>,
View compiled
__webpack_require__
/home/user/RiderProjects/KernelManagementLab/Universe.W3Top/ClientApp/webpack/bootstrap:781
778 | };
779 |
780 | // Execute the module function
> 781 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 782 |
783 | // Flag the module as loaded
784 | module.l = true;
View compiled
fn
/home/user/RiderProjects/KernelManagementLab/Universe.W3Top/ClientApp/webpack/bootstrap:149
146 | );
147 | hotCurrentParents = [];
148 | }
> 149 | return __webpack_require__(request);
| ^ 150 | };
151 | var ObjectFactory = function ObjectFactory(name) {
152 | return {
View compiled
0
http://localhost:5010/static/js/main.chunk.js:24885:18
__webpack_require__
/home/user/RiderProjects/KernelManagementLab/Universe.W3Top/ClientApp/webpack/bootstrap:781
778 | };
779 |
780 | // Execute the module function
> 781 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 782 |
783 | // Flag the module as loaded
784 | module.l = true;
View compiled
checkDeferredModules
/home/user/RiderProjects/KernelManagementLab/Universe.W3Top/ClientApp/webpack/bootstrap:45
42 | }
43 | if(fulfilled) {
44 | deferredModules.splice(i--, 1);
> 45 | result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
| ^ 46 | }
47 | }
48 | return result;
View compiled
Array.webpackJsonpCallback [as push]
/home/user/RiderProjects/KernelManagementLab/Universe.W3Top/ClientApp/webpack/bootstrap:32
29 | deferredModules.push.apply(deferredModules, executeModules || []);
30 |
31 | // run deferred modules when all chunks ready
> 32 | return checkDeferredModules();
| ^ 33 | };
34 | function checkDeferredModules() {
35 | var result;
View compiled
(anonymous function)
http://localhost:5010/static/js/main.chunk.js:1:57
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.Реакт 16.8.5 если это важно — ошибка в development mode выскакивает (npm start). В проде не проверял.
[React JSX] svg-иконка, но в промежуточном "компоненте"
Казалось бы, на ровном месте, вот так, но некрасиво, работает:
а вот по правильному — вылетает ошибка
Причем информации из ошибки — НОЛЬ. Кто из них object?!!! только style тут object. И что не так?
Реакт 16.8.5 если это важно — ошибка в development mode выскакивает (npm start). В проде не проверял.
import { ReactComponent as WizardIconSvg } from '../../icons/Wizard-Icon.svg';
...
// где то ниже в return ();
return ( ...............
<WizardIconSvg style={{width: 32,height:32,fill:'white',strokeWidth:'10px',stroke:'white' }}/>
........... );а вот по правильному — вылетает ошибка
import { ReactComponent as WizardIconSvg } from '../../icons/Wizard-Icon.svg';
const WizardIcon = <WizardIconSvg style={{width: 32,height:32,fill:'white',strokeWidth:'10px',stroke:'white' }}/>;
...
// где то ниже в return ();
return ( ............... <WizardIcon /> ...............)Причем информации из ошибки — НОЛЬ. Кто из них object?!!! только style тут object. И что не так?
Element type is invalid: expected a string (for built-in components)
or a class/function (for composite components) but got: object.
Check the render method of `DiskBenchmarkDialog`.
▶ 29 stack frames were collapsed.
Module../src/index.js
src/index.js:11
8 | const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
9 | const rootElement = document.getElementById('root');
10 |
> 11 | ReactDOM.render(
12 | <BrowserRouter basename={baseUrl}>
13 | <App />
14 | </BrowserRouter>,
View compiled
__webpack_require__
/home/user/RiderProjects/KernelManagementLab/Universe.W3Top/ClientApp/webpack/bootstrap:781
778 | };
779 |
780 | // Execute the module function
> 781 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 782 |
783 | // Flag the module as loaded
784 | module.l = true;
View compiled
fn
/home/user/RiderProjects/KernelManagementLab/Universe.W3Top/ClientApp/webpack/bootstrap:149
146 | );
147 | hotCurrentParents = [];
148 | }
> 149 | return __webpack_require__(request);
| ^ 150 | };
151 | var ObjectFactory = function ObjectFactory(name) {
152 | return {
View compiled
0
http://localhost:5010/static/js/main.chunk.js:24885:18
__webpack_require__
/home/user/RiderProjects/KernelManagementLab/Universe.W3Top/ClientApp/webpack/bootstrap:781
778 | };
779 |
780 | // Execute the module function
> 781 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 782 |
783 | // Flag the module as loaded
784 | module.l = true;
View compiled
checkDeferredModules
/home/user/RiderProjects/KernelManagementLab/Universe.W3Top/ClientApp/webpack/bootstrap:45
42 | }
43 | if(fulfilled) {
44 | deferredModules.splice(i--, 1);
> 45 | result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
| ^ 46 | }
47 | }
48 | return result;
View compiled
Array.webpackJsonpCallback [as push]
/home/user/RiderProjects/KernelManagementLab/Universe.W3Top/ClientApp/webpack/bootstrap:32
29 | deferredModules.push.apply(deferredModules, executeModules || []);
30 |
31 | // run deferred modules when all chunks ready
> 32 | return checkDeferredModules();
| ^ 33 | };
34 | function checkDeferredModules() {
35 | var result;
View compiled
(anonymous function)
http://localhost:5010/static/js/main.chunk.js:1:57
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.Реакт 16.8.5 если это важно — ошибка в development mode выскакивает (npm start). В проде не проверял.