I'm getting error when running webpack with babel-loader
Module not found: Error: Cannot resolve module 'react-dom'
Here is my import statement
import ReactDOM from 'react-dom' ;
I 'm using React 0.14.0
In 0.14.x version dom rendering functions had been moved into react-dom package to be more universal.
As we look at packages like react-native, react-art, react-canvas, and
react-three, it has become clear that the beauty and essence of React
has nothing to do with browsers or the DOM.
To make this more clear and to make it easier to build more
environments that React can render to, we’re splitting the main react
package into two: react and react-dom. This paves the way to writing
components that can be shared between the web version of React and
React Native. We don’t expect all the code in an app to be shared, but
we want to be able to share the components that do behave the same
across platforms.
The react package contains React.createElement, .createClass,
.Component, .PropTypes, .Children, and the other helpers related to
elements and component classes. We think of these as the isomorphic or
universal helpers that you need to build components.
The react-dom package has ReactDOM.render, .unmountComponentAtNode,
and .findDOMNode. In react-dom/server we have server-side rendering
support with ReactDOMServer.renderToString and .renderToStaticMarkup.
Related
I'm curios to know why react provided the two import libraries
I have tried both the methods but I couldn't find any difference with both of them!
react-dom/client provides just methods for client development.
https://reactjs.org/docs/react-dom-client.html
It can't be used for server side development.
For example well-known function renderToString for SSR is exported from react-dom/server but not from react-dom/client
react-dom contains both of them.
I've got a Webpack config that successfully enables tree-shaking. However, I find it incredibly frustrating that regardless if I import react-dom as a default export or only render — the only function I need — it's the size in the final bundle is the same according to Webpack-bundle-analyzer. A whopping 114kb. Webpack has a recommended bundle size of 244kb, so simply using React-DOM takes up nearly half of that space. Why is this? And is there any way around it?
import { render } from "react-dom";
// or
import ReactDOM from "react-dom";
// both give same 114kb output in final bundle :(
Tree shaking only works if some of the code is not utilised and can be safely removed. React-DOM unfortunately pretty much uses all of the code it exports, and there's a lot of it.
I would recommend looking in to Preact (https://preactjs.com/), an alternative implementation of React. The Preact core is 3kb and almost fully compatible with React, and for full compatibility the preact-compat addon is also available.
It's far smaller and faster, so it's a win-win.
I'm absolutely sure, that I'm asking a silly question, but I really do not understand how this line of code works
import React from 'react';
My question: who and where searches for 'react' name?
For example, this site tells me, that for module-name I should use relative of absolute path, e.g
import React from './react';
or
import React from '/home/user/react';
I thought that 'react' is same as './react' but I've created ReactJS applcation via create-react-app command and didn't find any file named react.js in application folder.
So, obviously there is some tool or rule by which module name has been resolved to a proper file, but I cannot find proper documentation about this.
Import statements are importing packages by name from the node_modules directory in your app, which is where they're saved when you run an installation command such as npm install or yarn inside your app.
When you write:
import React from 'react';
As far as you're concerned, it's as if you'd written:
import React from './node_modules/react/index.js';
Importing by package name means you don't have to be aware of how a given package is structured or where your node_modules directory is relative to your javascript file.
I have some reusable React components published to NPM, that I am installing and using within my React application. Is it possible for me to set an alias in my React app, that can be used within these NPM components? For example, I want to allow the use of a folder common, which is within my React App, within the React components. So if I do this in my React components, it should work
import someVal from 'common';
I am bundling these React components with Webpack, and sending down the transpiled, bundled version for use within the React application. I tried setting the alias the regular way within the React app webpack config (by setting resolve.alias), but it does not work. Can this be done? Or am I approaching this incorrectly? Any suggestions would be great, thanks!
Edit: So the React components from NPM are within my node_modules folder, and it is already bundled up via it's own Webpack config. I then run these components through my React application Webpack config as well (I'm whitelisting the folder), in the hopes that the new common alias will be added there. But no luck. I keep getting a
someVal is undefined error.
My common file has the following: Ignore the logic for now (I'm only posting a part of the code)
import _myClass from '../components/MyClass';
const myClass = _myClass; // Other things are done to it
export default myClass;
In my React components Webpack bundle file (after I fixed the default import statement)
/* harmony import */ var common__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__(/*! common */ "./src/common/index.js");
...
return common__WEBPACK_IMPORTED_MODULE_25__["default"].myFunction({
...
});
This still seems to be looking for common within the React components package, and not within the React app package that I am trying to use this in.
I'm learning ReactJS right now and trying to separate all the components into discrete files.
Is there some strategy to simplify the process of requiring/importing components? It seems rather silly to have import React from 'react'; on the first line of every component file?
I'm using Babel for the import function.
To get around writing import React from 'react' every time, you can use Webpack and:
write a loader that adds the statement import React from 'react' to every JSX file it encounters; or,
use React from a CDN and include it as a Webpack external in your configuration.
I believe that's the recommended way if you want to use the import/export mechanism from ES6 to separate the component.
A way to not do this is to assign React as a global variable, but that kinda defeat the purpose of using import/export.
Indeed we need to do similar things in other languages like Java?