[React JSX] svg-иконка, но в промежуточном "компоненте"
От: VladCore  
Дата: 03.08.19 11:28
Оценка:
Казалось бы, на ровном месте, вот так, но некрасиво, работает:

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). В проде не проверял.
Отредактировано 03.08.2019 12:27 VladCore . Предыдущая версия . Еще …
Отредактировано 03.08.2019 12:12 VladCore . Предыдущая версия .
Отредактировано 03.08.2019 12:10 VladCore . Предыдущая версия .
 
Подождите ...
Wait...
Пока на собственное сообщение не было ответов, его можно удалить.