Is there a way to do a direct module import for ReactDOM's render method to minimize bundle size?
For example, this direct module import works for findDOMNode:
import findDOMNode from 'react-dom/lib/findDOMNode';
...but this does not:
import { render } from 'react-dom/lib/ReactMount';
import { render } from 'react-dom';
Worked for me.
Related
I am using Create React App and have imported the way the documentation says to do, since Create React App doesn't support pure ESM packages yet.
import { EffectCards } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react/swiper-react.js";
But I get the error: Attempted import error: 'EffectCards' is not exported from 'swiper'.
EffectFade works fine, so why not EffectCards? Where else is it being exported from to be imported using Create React App?
The official documents stated that: "By default Swiper React uses core version of Swiper (without any additional components). If you want to use Navigation, Pagination and other components, you have to install them first."
To install them:
import SwiperCore, { EffectFade, EffectCards } from "swiper";
SwiperCore.use([EffectFade, EffectCards]);
In my case ("swiper": "^8.2.2") changing import statements helped
import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';
import 'swiper/swiper.scss'; // core Swiper
import 'swiper/modules/effect-cards/effect-cards.scss';
import { EffectCards } from "swiper";
I have structured everything properly. But while compiling react keep on says module not found how to fix?
Module not found: Can't resolve 'ui-config/themes' in 'C:\Users\Goodwork\desktop\mihy-ui-framework\src'
this is my index file
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from "react-router-dom";
import { MuiThemeProvider, createMuiTheme } from '#material-
ui/core/styles';
import { Provider } from 'react-redux';
import store from 'ui-redux/store';
import './index.css';
import App from 'ui-views/App';
import registerServiceWorker from './registerServiceWorker';
import themeObject from "ui-config/themes";
Unless you have configured webpack with resolve alias ui-config, it's not going to work because webpack looks for npm module called ui-config in node_modules.
To fix it,
Add to your webpack configuration the following:
resolve: {
alias: {
'ui-config: 'relative-path-to-ui-config'
}
}
alternatively, you can adjust the relative path in your import
import themeObject from "./ui-config/themes";
This is less optimal because eventually you'll end up struggeling with nested folders import '../../../../../' to find ui-config relative path.
For some reason when I try to import one particular module, react refuses to look in the correct directory (./node_modules/). Instead it looks in the ./src/ directory and throws this error:
/src/App.js
Module not found: Can't resolve 'react-d3gantt' in '/Users/RAVEN/Desktop/frontend/materialui/material/src'
All of my other modules are imported correctly. What is it about this one in particular?
Here is my code:
import React, { Component } from 'react';
import { DefaultButton, CompoundButton } from 'office-ui-fabric-react/lib/Button';
import { Image } from 'office-ui-fabric-react/lib/Image';
import { Icon } from 'office-ui-fabric-react/lib/Icon';
import { GanttChart } from "react-d3gantt";
import OilSite from './components/oilsite';
import BigButton from './components/bigButton';
import LeftNav from './components/leftNav';
import './index.css';
Edit: I used Create-React-App, in case this is relevant to my set up.
In some example, I saw :
import React, {
Component
} from 'react';
import {
StyleSheet, Text,...
} from 'react-native';
I know the 'react-native' purpose, but I don't understand why they import 'React' in some example? it makes me confused...
Thanks for your time :)
import React from 'react' is required for JSX to work.
Under the hood, JSX is being transpiled to React.createElement(...) invocations. So, even though you don't have to type React.createElement(), JSX still requires React to be active in the module namespace so that it can do it for you.
Example of what React looks like without the transpilation step.
Trying to use react-data-tables here and getting errors left right and center. Going crazy.
After following the instructions as per https://github.com/adazzle/react-data-grid and using the code samples from http://adazzle.github.io/react-data-grid/examples.html#/filterable-sortable-grid I am having the following issues.
If I use this in my file
import React from 'react';
import ReactDOM from 'react-dom';
import ReactDataGrid from 'react-data-grid';
import ReactDataGridPlugins from 'react-data-grid/addons';
var Toolbar = ReactDataGridPlugins.Toolbar;
var Selectors = ReactDataGridPlugins.Data.Selectors;
I get a "Cannot read property 'Toolbar' of undefined.
If I try
import React from 'react';
import ReactDOM from 'react-dom';
import ReactDataGrid from 'react-data-grid';
import Toolbar from 'react-data-grid/addons';
import Selectors from 'react-data-grid/addons';
I get the following error:
React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of HostProviderList.
And if I try
import React from 'react';
import ReactDOM from 'react-dom';
import ReactDataGrid from 'react-data-grid';
import {Toolbar} from 'react-data-grid/addons';
import {Selectors} from 'react-data-grid/addons';
I get this error
Warning: Unknown props onGridSort, columns, rowGetter, rowsCount, minHeight, onRowUpdated, toolbar, onAddFilter, minColumnWidth, columnEquality, enableCellSelect, rowHeight, enableRowSelect, rowKey, rowScrollTimeout, cellNavigationMode, headerRows, columnMetrics, cellMetaData, selectedRows, rowSelection, expandedRows, rowOffsetHeight, sortColumn, sortDirection, onSort, totalWidth, onViewportKeydown, onViewportKeyup, onViewportDragStart, onViewportDragEnd, onViewportDoubleClick, onColumnResize on tag. Remove these props from the element.
I am not sure what to do here. If I do just the basic data-grid as per the online example it works fine. However as soon as I try anything with the addons.jsx file it fails.
On a side note
nmp install react-data-grid/addons
does not work. The git repo is not found. However I do see that after doing an npm install of react-data-grid I do have a addons.jsx file that imports dist/react-data-grid.ui-plugins.js
The right way to import is
import { Toolbar, Data } from 'react-data-grid/addons';
const Selectors = Data.Selectors;