Skip to main content

Typical mistakes

Updated at: Feb 11, 2021

Carefull/Explicit imports Do not just import whatever you need, pay attention to what will be grabbed with it. Check how code is structuted in imported module.

ex

import { Grid, Row, Col } from 'react-bootstrap';

is translated into:

var reactBootstrap = require('react-bootstrap');
var Grid = reactBootstrap.Grid;
var Row = reactBootstrap.Row;
var Col = reactBootstrap.Col;

As u can see whole bootstrap is grabbed even if we only need Grid, Row, Col. Our own code has lost of imports like this. Fixing for libraries is easy with: https://www.npmjs.com/package/babel-plugin-transform-imports But for our own code we need refactorings.

Ex refactoring: https://gitlab.com/powr/powr/-/merge_requests/6388/diffs#5dc078c84fb5f72527bc1305d427dd9d0a315183