I've been banging my head against this one for a while. I had my Vite ReactJS project building with no problems, and have not made significant changes. It runs fine on local, but when I use yarn build, I get the following error:
[vite]: Rollup failed to resolve import "jss-plugin-{}" from "node_modules/#material-ui/styles/esm/jssPreset/jssPreset.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:
Error: [vite]: Rollup failed to resolve import "jss-plugin-{}" from "node_modules/#material-ui/styles/esm/jssPreset/jssPreset.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
at onRollupWarning (file:///Users/ryanwalter/Dev-Repos/Pelham/liquified/node_modules/vite/dist/node/chunks/dep-557f29e6.js:45907:19)
at onwarn (file:///Users/ryanwalter/Dev-Repos/Pelham/liquified/node_modules/vite/dist/node/chunks/dep-557f29e6.js:45705:13)
at Object.onwarn (file:///Users/ryanwalter/Dev-Repos/Pelham/liquified/node_modules/rollup/dist/es/shared/rollup.js:23225:13)
at ModuleLoader.handleResolveId (file:///Users/ryanwalter/Dev-Repos/Pelham/liquified/node_modules/rollup/dist/es/shared/rollup.js:22352:26)
at file:///Users/ryanwalter/Dev-Repos/Pelham/liquified/node_modules/rollup/dist/es/shared/rollup.js:22313:26
error Command failed with exit code 1.
I've tried updating my vite.config.js file as some posts had suggested with the following:
vite config
import { defineConfig } from 'vite'
import react from '#vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
define: {
"global": {},
},
resolve: {
alias: {
'./runtimeConfig': './runtimeConfig.browser',
'jss-plugin-{}': 'jss-plugin-global'
},
},
plugins: [
react()
]
})
Unfortunately, even though this does allow my app to build, I get an error in production: uncaught TypeError: {} is not a function.
Any advise here would be appreciated. I'm happy to share anything necessary.
Here's my package.json:
{
"name": "liquified",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"#aws-amplify/ui-react": "^3.5.1",
"#emotion/react": "^11.10.0",
"#emotion/styled": "^11.10.0",
"#material-ui/core": "^4.12.4",
"#mui/icons-material": "^5.8.4",
"#mui/material": "^5.10.1",
"aws-amplify": "^4.3.35",
"ethers": "^5.7.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"#types/react": "^18.0.17",
"#types/react-dom": "^18.0.6",
"#vitejs/plugin-react": "^2.1.0",
"autoprefixer": "^10.4.8",
"postcss": "^8.4.16",
"tailwindcss": "^3.1.8",
"vite": "^3.0.7"
}
}
Here's my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/logo.svg" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Liquified App</title>
<script type="module" crossorigin src="/assets/index.671813cb.js"></script>
<link rel="stylesheet" href="/assets/index.ac81934a.css">
</head>
<body>
<div id="root"></div>
</body>
</html>
Let me know if you need anything else. This is a tough one!
I found a solution that I don't love, but it works!
I use this vite.config.js file:
import { defineConfig } from 'vite'
import react from '#vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
resolve: {
alias: {
'./runtimeConfig': './runtimeConfig.browser',
},
},
plugins: [
react()
]
})
The problem is that it won't run locally with this file as I get the Uncaught ReferenceError: global is not defined error without defining global. For example, the code that works locally is:
import { defineConfig } from 'vite'
import react from '#vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
// TODO: comment out before pushing to production
define: {
"global": {},
},
resolve: {
alias: {
'./runtimeConfig': './runtimeConfig.browser',
},
},
plugins: [
react()
]
})
I will just comment it out when I push to production.
Your solution is correct, yet manual changes are a bad thing especially if you want to use it in a CI/CD pipeline. A cleaner and simpler solution was provided here: https://github.com/bevacqua/dragula/issues/602#issuecomment-1109840139
<!-- your index.html -->
<script>
var global = global || window
</script>
You can find the explaination for it here: https://github.com/vitejs/vite/issues/2778#issuecomment-810086159
Vite doesn't include shims for Node variables like Webpack 4 does (in Version 5, shims also needs to be added by the user)
I like how it's explained here: https://stackoverflow.com/a/73208485/4556219
The problem is because vite doesn't define a global field in window as webpack does. And some libraries relies on it since webpack is much more older than vite.
Related
I want to deploy my react app which was built using vite into AWS Amplify but the build is failing. Here's how my package.json looks
{
"name": "app",
"author": "ashiqdey",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^7.2.6",
"react-router": "^6.2.1",
"react-router-dom": "^6.2.1",
},
"devDependencies": {
"#vitejs/plugin-react": "^2.1.0",
"prettier": "^2.5.1",
"vite": "^3.1.0"
}
}
What wrong I am doing?
Edit : Here's my yml file, After getting vite command not found error I had added npm i vite -g, still no luck
After adding the npm i vite I am getting this error
Developing software: 49% time spent on cloud configuration, 49% on build scripts, 2% writing code. And this is with all the amazing new tools becoming available.
Your package file correct and just like mine (although my vite is older) so this answer may not help you.
The amplify.yml has a preBuild step that should be doing a yarn install (or npm install), so vite and other packages will be downloaded.
I have amplify.yml in the root of my project because I changed baseDirectory: / to baseDirectory: /dist.
I have a vite.config.ts:
/// <reference types="vitest" />
/// <reference types="vite/client" />
import { defineConfig } from 'vite'
import react from '#vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
alias: [
{
find: './runtimeConfig',
replacement: './runtimeConfig.browser',
},
]
},
test: {
globals: true,
environment: 'jsdom',
setupFiles: './src/test/setup.ts',
}
})
My index.html has some extra for vite:
<body>
<div id="root"></div>
<script>
window.global = window;
window.process = {
env: { DEBUG: undefined },
};
var exports = {};
</script>
<script type="module" src="/src/main.tsx"></script>
</body>
EDIT
Here's my amplify.yml file:
version: 1
backend:
phases:
build:
commands:
- '# Execute Amplify CLI with the helper script'
- amplifyPush --simple
frontend:
phases:
preBuild:
commands:
- yarn install
build:
commands:
- yarn run build
artifacts:
baseDirectory: dist/
files:
- '**/*'
cache:
paths:
- node_modules/**/*
Revert the amplify configuration back to its original form and try to check your package.json for these following settings.
I am building a sample Nextjs app with webpack5 and for UI I am using Antd framework. I do not see the styles applied at all. When I go in the dev tools I do see ant classes applied to buttons but they are not styled. Here are my files:
globals.less:
#import 'antd/dist/antd.less';
_app.js:
import "../styles/globals.less";
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
next.config.js: (for providing loaders and to use webpack5)
module.exports = {
future: {
webpack5: true,
},
webpack: (config, options) => {
config.module.rules.push({
test: /\.less$/,
use: [
{
loader: "css-loader", // translates CSS into CommonJS
},
{
loader: "less-loader", // compiles Less to CSS
options: {
lessOptions: {
// If you are using less-loader#5 please spread the lessOptions to options directly
modifyVars: {
"primary-color": "#1DA57A",
"link-color": "#1DA57A",
"border-radius-base": "2px",
},
javascriptEnabled: true,
sourceMap: true,
},
},
},
],
});
return config;
},
};
index.js:
import { Button } from 'antd'
import Head from 'next/head'
export default function Home() {
return (
<div>
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main >
<h1 >
Welcome to Nextjs
</h1>
<div>
<Button type="primary">Primary Test</Button>
</div>
</main>
</div>
);
}
package.json:
{
"name": "hello",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"#zeit/next-less": "^1.0.1",
"antd": "^4.15.2",
"babel-plugin-import": "^1.13.3",
"css-loader": "^5.2.4",
"less": "^4.1.1",
"less-loader": "^8.1.1",
"next": "10.1.3",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"devDependencies": {}
}
When I look at the page through dev tools I don't even see the script tag.
Edit:
for anyone saying use ~ in the path to less file please note that starting ver 8.0.0 it's been depracated. Here is the link to changelog:
https://github.com/webpack-contrib/less-loader/blob/master/CHANGELOG.md
Prior to less-loader v8.0.0, you'll need to add a ~ to your antd.less import to tell the webpack loader to resolve the import from the node_modules directory.
#import '~antd/dist/antd.less';
My React app throws 404 errors in production when accessing static files (stylesheets, utilities, and more). The development environment works fine. After debugging for several days and further research I believe it's a webpack pathing issue as my understanding of build path and webpack.output is still lacking despite my research on webpack.js.org. After referencing other posts, I still can't grasp this final concept for bundling applications. All help is appreciated. See below for Things tried, and Posts referenced, and Notes for my process. Thank you.
Things tried:
Added "homepage" property in package.json pointing to "https://my_ghub_username.github.io/project_repo/"
Changed "homepage" property to "."
Changing React router to <HashRouter/> ensuring it imported correctly.
Pushed my latest changes to main before deploying my app to GH pages again
Added package.json scripts to pre-deploy, deploy, && build
Posts/Guides Referenced
How to deploy a React app to GitHub Pages
https://create-react-app.dev/docs/deployment/#github-pages-https-pagesgithubcom
Can't deploy webpack to gh-pages (react app)
I attached snippets of relevant code package.json(I), webpack.dev/prod/common.js(II), index.html(III), file tree(IV), and errors(V) in chrome tools.
(I)
{
"name": "digital-nomad",
"version": "1.2.2",
"description": "An immersive experience to experience life in major cities!",
"main": "index.jsx",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"predeploy": "npm run build",
"deploy": "gh-pages -d dist",
"build": "webpack --config webpack.prod.js",
"start": "webpack serve --config webpack.dev.js"
},
"homepage": ".",
"dependencies": {
"#babel/core": "^7.12.3",
"#babel/preset-env": "^7.12.1",
"#babel/preset-react": "^7.12.1",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"gh-pages": "^3.1.0",
"googleapis": "^64.0.0",
"inline-source-map": "^0.6.2",
"mini-css-extract-plugin": "^1.3.2",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-redux": "^7.2.1",
"react-router-dom": "^5.2.0",
"redux": "^4.0.5",
"webpack-cli": "^4.1.0",
"webpack-merge": "^5.4.1"
},
"devDependencies": {
"css-loader": "^5.0.0",
"eslint-plugin-react-hooks": "^4.2.0",
"html-webpack-plugin": "^4.5.0",
"style-loader": "^2.0.0",
"webpack": "^5.2.0",
"webpack-dev-server": "^3.11.0"
}
}
(IIA)
const { merge } = require('webpack-merge')
const common = require('./webpack.common.js')
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
contentBase: './',
compress: true,
open: true,
port: 8080,
watchContentBase: true,
historyApiFallback: true,
}
})
(IIB)
const { merge } = require('webpack-merge')
const common = require('./webpack.common.js')
module.exports = merge(common, {
mode: "production",
devtool: "source-map",
})
(IIC)
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
title: 'Production',
template: __dirname + '/index.html',
filename: 'index.html',
inject: 'body',
favicon: "favicon.png"
})
module.exports = {
entry: path.resolve(__dirname, "src", "index.jsx" ),
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
publicPath: './'
},
module: {
rules: [
{ test: /\.jsx?$/, exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: { presets: ['#babel/env', '#babel/react'] }
},
},
{ test: /\.css$/i,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: { publicPath: '../' }
},
'css-loader'
],
}
]
},
plugins: [
new CleanWebpackPlugin(),
new MiniCssExtractPlugin(),
HTMLWebpackPluginConfig
],
resolve: {
extensions: [".js", ".jsx", ".css", "*"]
},
performance: {
hints: false
},
stats: {
errorDetails: true,
warnings: true,
colors: true,
},
};
(III)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="favicon.png">
<!-- youtube video API -->
<script rel='preload' src="https://www.youtube.com/iframe_api"></script>
<!-- youtube data API -->
<script rel='preload' src="https://apis.google.com/js/api.js"></script>
<script defer src="./src/utils/YTVideoAPI.js"></script>
<script defer src="./src/utils/YTDataAPI.js"></script>
<script src="/dist/bundle.js"></script>
<link rel="stylesheet" type="text/css" href="./src/stylesheets/player.css">
<link rel="stylesheet" type="text/css" href="./src/stylesheets/root.css">
<link rel="stylesheet" type="text/css" href="./src/stylesheets/controls.css">
<title>Digital Nomad</title>
</head>
<body>.
<div id="root"></div>
</body>
</html>
(IV)
FileTree
(V)
GET https://username.github.io/project_name/src/stylesheets/player.css net::ERR_ABORTED 404
Note
I tried my hand over the past couple of days with alternative solutions like utilizing a 404 page to redirect to my app while still using Browser router as a potential solution but not understanding this last aspect of webpack is killing me since I know I can use webpack to my advantage. ( I really want to better conceptualize webpack pathing to improve existing apps ).
Lastly, any feedback on code quality, convention, and implementation is extremely welcome.
I'm trying to setup a react web app with webpack 4, but I can't make it working, I get "Uncaught Invariant Violation: Target container is not a DOM element." console error.
I spent last 2 days trying everything and I've read all similar problems here in stackoverflow but nothing worked for me.
It should be a stupid bug (a typo or bad config) but I can't see it, for some reason it can't find my html file or div element with 'app' id.
My project structure:
This is the generated html by html webpack plugin:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<div id='app'></div>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
My html template:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<div id='app'></div>
</body>
</html>
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('app')
);
App.js:
import React from 'react';
const App = () => {
return (
<div>
{'foobar'}
</div>
);
};
export default App;
webpack config:
const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.js",
output: {
path: path.join(__dirname, './dist'),
filename: 'bundle.js'
},
devServer: {
contentBase: './dist'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
plugins: [
new HtmlWebPackPlugin({
template: `./src/index.html`,
filename: `index.html`
})
]
};
I copied the code you provided with the same file structure (not including the jest and eslint files) you had and it successfully ran. Therefore, it's probably the inconsistencies in your webpack or babel versions that's causing the bug. Maybe you can try looking at my package.json compared to yours. Hope this helps!
package.json
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --mode development"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.4.3",
"#babel/preset-env": "^7.4.3",
"#babel/preset-react": "^7.0.0",
"babel": "^6.23.0",
"babel-loader": "^8.0.5",
"html-webpack-plugin": "^3.2.0",
"http-server": "^0.11.1",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.3.1"
},
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6"
}
}
.babelrc
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
}
I found the solution.
I was importing a component from one of my ui projects in App.js, I removed it an now is working fine.
I use webpack and have a simple react application, where I want to use react-autosuggest component. When I want to use this component in my application I get error:
Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's `render` method). Try rendering this component inside of a new top-level component which will hold the ref.
index.jsx
var React = require('react')
var Autosuggest = require('react-autosuggest')
var autoCompleteItems = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6'];
function getSuggestions(input, callback) {
const escapedInput = utils.escapeRegexCharacters(input.trim());
const lowercasedInput = input.trim().toLowerCase();
const suburbMatchRegex = new RegExp('\\b' + escapedInput, 'i');
const suggestions = autoCompleteItems
.filter( suburbObj => suburbMatchRegex.test(suburbObj.suburb) )
.sort( (suburbObj1, suburbObj2) =>
suburbObj1.suburb.toLowerCase().indexOf(lowercasedInput) -
suburbObj2.suburb.toLowerCase().indexOf(lowercasedInput)
)
.slice(0, 7)
.map( suburbObj => suburbObj.suburb );
setTimeout(() => callback(null, suggestions), 300);
}
class SuggestWrapper extends React.Component {
render () {
var inputId = 'input-example';
const inputAttributes = {
id: inputId,
className: "form-control",
defaultValue: '',
placeholder: this.props.propertyName
};
return (
<Autosuggest suggestions={getSuggestions}
inputAttributes={inputAttributes}
ref={ () => { document.getElementById(inputId).focus(); } } />
);
}
}
class App extends React.Component {
render () {
return (
<div>
<SuggestWrapper />
</div>
);
}
}
React.render(<App />, document.getElementById('content'));
package.json
{
"name": "react_modules",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "npm run serve | npm run dev",
"serve": "./node_modules/.bin/http-server -p 8080",
"dev": "webpack-dev-server -d --progress --colors --port 8090"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^5.8.24",
"babel-loader": "^5.3.2",
"bootstrap": "^3.3.5",
"bower-webpack-plugin": "^0.1.8",
"css-loader": "^0.18.0",
"events": "^1.0.2",
"extract-text-webpack-plugin": "^0.8.2",
"file-loader": "^0.8.4",
"http-server": "^0.8.0",
"jquery": "^2.1.4",
"jquery-ui": "^1.10.5",
"less": "^2.5.1",
"less-loader": "^2.2.0",
"lodash": "^3.10.1",
"node-sass": "^3.3.2",
"object-assign": "^4.0.1",
"path": "^0.11.14",
"react": "^0.13.3",
"react-autosuggest": "^1.18.3",
"react-hot-loader": "^1.3.0",
"sass-loader": "^2.0.1",
"style-loader": "^0.12.3",
"svg-sprite-loader": "0.0.3",
"url-loader": "^0.5.6",
"webpack": "^1.12.1",
"webpack-dev-server": "^1.10.1"
}
}
webpack.config.js
const BowerWebpackPlugin = require("bower-webpack-plugin");
module.exports = {
entry: './src/index.jsx',
output: {
filename: 'bundle.js',
sourceMapFilename: "[file].map",
publicPath: 'http://localhost:8090/assets'
},
debug: true,
devtool: 'inline-source-map',
module: {
loaders: [{
test: /\.js[x]?$/,
loaders: ['react-hot', 'babel'],
exclude: /node_modules/
}, {
test: /\.scss$/,
loaders: ['style', 'css?sourceMap', 'sass?sourceMap']
}, {
test: /\.less$/,
loaders: ['style', 'css?sourceMap', 'less?sourceMap']
}, {
test: /\.css$/,
loaders: ['style', 'css']
}, {
test: /\.woff$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff"
}, {
test: /\.woff2$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff2"
}, {
test: /\.(eot|ttf|svg|gif|png)$/,
loader: "file-loader"
}]
},
plugins: [
new BowerWebpackPlugin()
],
externals: {
'react': 'React'
},
resolve: {
extensions: ['', '.js', '.jsx']
}
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<!-- include react -->
<script src="./node_modules/react/dist/react-with-addons.js"></script>
</head>
<body>
<div id="content">
<!-- this is where the root react component will get rendered -->
</div>
<!-- include the webpack-dev-server script so our scripts get reloaded when we make a change -->
<!-- we'll run the webpack dev server on port 8090, so make sure it is correct -->
<script src="http://localhost:8090/webpack-dev-server.js"></script>
<!-- include the bundle that contains all our scripts, produced by webpack -->
<!-- the bundle is served by the webpack-dev-server, so serve it also from localhost:8090 -->
<script type="text/javascript" src="http://localhost:8090/assets/bundle.js"></script>
</body>
</html>
I tried to follow this post and add:
alias: {
'react': path.join(__dirname, 'node_modules', 'react')
},
but it didn't help.
This error can happen when you have two (or more) copies of React in your bundle. Try running npm ls react to see if this is happening. Then you might try npm dedupe (or upgrade to npm 3.x. It's still beta but it's pretty stable and it dedupes automatically). You really need all the packages you use to be compatible with the version of React you're using, of course, since having multiple Reacts causes errors (and a bloated bundle!).
Edit: just noticed you have a script tag for React and you're importing it. Taking out the react script tag might be all you need to fix the problem!
The explanation to your error is contained in the error message:
Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's render method). Try rendering this component inside of a new top-level component which will hold the ref.
You cannot add a ref to a top level component, as you are doing in your SuggestWrapper:
<Autosuggest suggestions={getSuggestions}
inputAttributes={inputAttributes}
ref={ () => { document.getElementById(inputId).focus(); } } />
To achieve what you want, you may use the componentDidMount lifecycle hook:
componentDidMount() {
document.getElementById(inputId).focus();
}
From the docs:
At this point in the lifecycle, the component has a DOM representation which you can access via React.findDOMNode(this). The componentDidMount() method of child components is invoked before that of parent components.