Multiple webpack entry points for React redux project - reactjs

I want to create page wise bundle for react redux project.
How can we achieve this using webpack?
For simple react application we follows following way for multi entry
module.exports = {
entry: {
'index' : './src/index.js',
'contact' : './src/pages/contact.js'
}
};
But how can we do same thing with react redux application.

Related

React: Lerna React hooks error on monorepo

I have a problem with using Lerna.
My folders structure are like shown below:
packages
myapp
shared
myapp represents a create-react-app structure and shared contains some functions that is returning as below:
import React from 'react'
import Card from '#material-ui/core/Card';
function Hello(){
return (
<Card>
This is a test
</Card>
)
}
When I use material ui components instead of DIV's i get error that says:
Invalid hook call. Hooks can only be called inside of the body of a function component.
But when I use div and other html elements it works fine.
Maybe I got this error because of babel loader? I don't know what to do and how to setup things.
This happens because you have multiple versions of React installed, and more than one get's bundled into the app.
Try to add this to your webpack config:
config.resolve.alias = {
'react': path.join(__dirname, '..', '..', '..', 'node_modules', 'react'), // Adjust for your path to root node_modules
};

preact compat causing component to mount infinitely

I have working reactjs app with redux and react router.
I want to switch to preact.
When I updated webpack config to alias react and react dom.
Component started mounting infinitely. It mount then unmount .. goes on doing so.
Webpack config.
alias: {
"react": path.resolve(__dirname, 'react.js'),
"react-dom": path.resolve(__dirname, 'react.js')
},
react.js
var preact = require('preact-compat');
var react = {};
Object.keys(preact).forEach(function(key) {
react[key] = preact[key];
});
module.exports = react;
This file is because I am using react hot loader.
React app is working fine .. but adding preact has bug. pls guide me.
From my experience, preact-compat and React Hot Loader (RHL) don't work together very well (it's still on the TODO list of the developer of preact-compact, see this comment).
I work around these issues myself by not combining the two, i.e. use the "real" React and ReactDOM when I want to use RHL, or use preact-compat when I don't need RHL.

How can react lazyload child route using react-router?

Now I am using react-route to control my routes!
You know I tried to build a single page app. There is only one entry file named
index.js
When index.js is too heavy loading time will very long. Maybe 10000ms.
But there are many routes why must loaded them all first? If I can lazyload route not only child routes.
When I go to admin route it will load js file of admin and about will load js file of about , can I?
webpack bundle will have two files [name].js and come.js. But it too heavy.
Anyone meet the same problem?
You can do lazy loading of React Components with react-router in two ways.
Webpack's require.ensure way
When you go with this approach, you would be dealing with the react router object something like this,
childRoutes:[
{
path:"/pageone",
getComponents:(a, cb) => require.ensure([], require => {cb(null, require("pages/PageOne"));})
},
{
path:"/pagetwo",
getComponents:(a, cb) => require.ensure([], require => {cb(null, require("pages/PageTwo"));})
}
]
Webpack's bundle-loader way
When you go with this approach, you would be dealing with the webpack loaders option.
module: {
loaders: [{
test: /.*/,
include: [path.resolve(__dirname, 'pages/admin')],
loader: 'bundle?lazy&name=admin'
}]
}
You can find an example from react-router which uses bundle-loader and here is a nice blog about lazy-loading with bundle-loader and here is a blog with require.ensure

How can I render the react app with redux using the ReactJS.NET?

I have created the Single page application where I have used the React, Redux and React-Router.
I want to render this SPA using ReactJS.NET for improve perfomance of loading the application.
The SPA is compiled as one Bundle.js using Webpack.
I have an ASP.NET MVC application where I can paste this bundle which will be rendered through the ReactJS.NET. Everything in this SPA will be worked in one ASP.NET view but with the React-router.
How can I do that? I can't find any project where is solved this combination with redux.
Thank you for the example or help.
I know this is an old question but if you're still having issues incorporating your React app into React.NET you should try the following template and have a look at how this fellow has done it.
He uses webpack to first build and compile a server specific set of code then pulls the compiled js into React.NET
app.UseReact(config =>
{
config
.SetLoadBabel(false)
.AddScriptWithoutTransform("~/js/react.server.bundle.js");
});
The webpack config looks like this.
var path = require('path');
var webpack = require('webpack');
var WebpackNotifierPlugin = require('webpack-notifier');
module.exports = {
entry: {
server: './React/server.jsx',
client: './React/client.jsx',
clientWithRender: './React/clientWithRender.jsx',
},
output: { path: __dirname + '/wwwroot/js/', filename: 'react.[name].bundle.js' },
module: {
loaders: [
{
test: /.jsx?$/,
loader: "babel-loader",
exclude: /node_modules/,
query: {
presets: ['es2015', 'react'],
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy']
}
}
]
},
plugins: [
new WebpackNotifierPlugin()
]
};
And heres the index
#{
Layout = null;
}
<html>
<head>
<title>Hello React</title>
</head>
<body>
<div id="app">
#{
if (Environment.GetEnvironmentVariables()["ASPNETCORE_ENVIRONMENT"].ToString() != "Development")
{
#Html.React("ReactComponents.App", new { val1 = "Top text" });
}
}
</div>
#{
if (Environment.GetEnvironmentVariables()["ASPNETCORE_ENVIRONMENT"].ToString() != "Development")
{
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
<script src="#Url.Content("~/js/react.client.bundle.js")"></script>
#Html.ReactInitJavaScript()
}
else
{
<script src="#Url.Content("~/js/react.clientWithRender.bundle.js")"></script>
}
}
</body>
</html>
Why use ReactJS.NET? There is nothing special about an MVC.NET stack which requires a separate project to get React up and running in it. I would use a combination of Babel, Webpack, React, React-Dom and React-Router instead. MVC.NET should just deliver the bundle everything else should be react and it's dependencies.
The problem with the default tutorial of React.NET is that it does not consider the fact you are using webpack to bundle your dependencies and instead has examples of adding them manually. This is not really the preferred way of writing React and makes a complicated process even more complicated by trying to hide away the initial complexity of setting up your React project.
Suggestion:
Webpack will bundle your react-router, react and react-dom amongst other stuff. You need MVC to be setup in a way that every url request is handled by the same controller action that way React-Router can handle the url changes. This answer explains how to do this. ASP.NET MVC - Catch All Route And Default Route
Without doing this, MVC will try to handle all url route changes instead of React-Router doing it's thing.

referencing an amd module(arcgis) in webpack app

I'm building a react app with webpack and i need to incorporate arcgis maps into a react component. I have know idea how to bring this into my project. I've tried creating an arcgis directory with an index.js of the built javascript and trying to reference that:
import {Map} from 'arcgis/index'
That doesn't work. I then just tried to include the css/js script tags directly into my index.html but when I try to require them, like in the example, webpack obviously can't find them. Is there some way to tell webpack to ignore require calls in my src file so it gets handled by the browser? I'm trying and failing at doing the following:
import React from 'react'
export default class EsriMap extends React.Component {
componentDidMount() {
const _this = this
require(["esri/map", "dojo/domReady!"], function(Map) {
var map = new Map(_this.refs.map, {
center: [-118, 34.5],
zoom: 8,
basemap: "topo"
});
});
}
render() {
return (
<div ref="map"></div>
)
}
}
You may want to try this https://github.com/tomwayson/esri-webpack-babel .
This method is nice because it doesn't bog down the build. You pull in the ESRI Api from the CDN, and tell webpack that it's an external.
//Add this...
externals: [
// Excludes any esri or dojo modules from the bundle.
// These are included in the ArcGIS API for JavaScript,
// and its Dojo loader will pull them from its own build output
function (context, request, callback) {
if (/^dojo/.test(request) ||
/^dojox/.test(request) ||
/^dijit/.test(request) ||
/^esri/.test(request)
) {
return callback(null, "amd " + request);
}
callback();
}
],
//And this to you output config
output: {
libraryTarget: "amd"
},
When your app loads you bootstrap you webpack modules using Dojo in a script tag.
<!-- 1. Configure and load ESRI libraries -->
<script>
window.dojoConfig = {
async: true
};
</script>
<script src="https://js.arcgis.com/4.1/"></script>
<!-- Load webpack bundles-->
<script>
require(["Angular/dist/polyfills.bundle.js", "Angular/dist/vendor.bundle.js", "Angular/dist/app.bundle.js"], function (polyfills, vendor, main) { });
</script>
I've got it working with an Angular 2 App I'm working on. The only downside is I haven't yet got the unit tests to run right using Karma. I've only been working on that a few hours now.. Hope to have a solution to the testing issue soon.
#getfuzzy's answer will work well as long as you don't need to lazy load the ArcGIS API (say for example only on a /map route).
For that you will want to take the approach I describe in this answer
This blog post explains why you need to use one of these two approaches and explains how they work as well as the pros/cons of each.
I think you can try using bower version of esrijsapi. Doc link

Resources