DEV Community: CHIN SHAN LEE

[React] Treating warnings as errors because process.env.CI = true.

CHIN SHAN LEE — Thu, 24 Jun 2021 14:48:18 +0000

yarn run v1.22.10
$ react-scripts build
Creating an optimized production build...

Treating warnings as errors because process.env.CI = true.
Most CI servers set it automatically.

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.


---End of Oryx build logs---
Oryx has failed to build the solution.

This problem occurs when you push code with warning in console.

To disable this, follow these steps :

go to your package.json
add CI=false into scripts > build like below

{
"scripts": {
    "start": "react-scripts start",
    "build": "CI=false react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
}

Then you can push the code again !
It should be successfully pushed.

[GIT] error “ Browserslist: caniuse-lite is outdated ”

CHIN SHAN LEE — Thu, 24 Jun 2021 12:40:52 +0000

*refer to : Browserslist: caniuse-lite is outdated #1184 *

I am using Github action and I keep facing the error below.

yarn run v1.22.10
$ react-scripts build
Creating an optimized production build...
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Treating warnings as errors because process.env.CI = true.

Most CI servers set it automatically.

Failed to compile.

I have tried npx browserslist@latest --update-db as it told me, but it does not work.

Then I trid npm i npm-update-all -g to update all outdated files can solve this issue . It works perfectly for me !

[HTML] open a link in new tab safely

CHIN SHAN LEE — Wed, 23 Jun 2021 06:12:30 +0000

refer to : https://mathiasbynens.github.io/rel-noopener/

Browsers now are implicitly set rel=noopener for any target=_blank link.But to prevent user using older version browser, how can we ensure they are open a new tab from our site safely ?

Just Simply add rel="noopener noreferrer"

<a                              
   href="https://google.com/"
   //our target is opening the link with tab
   target="_blank"
   //prevent pages from abusing window.opener
   rel="noopener noreferrer"
>
   Target-Page
</a>

[React] Render different title in your website

CHIN SHAN LEE — Sat, 19 Jun 2021 07:41:18 +0000

refer to : https://www.npmjs.com/package/react-helmet

Different title can helps user to recognize what content they are browsing now. Which is very important !

Install react-helmet
npm install --save react-helmet
import react-helmet
import { Helmet } from 'react-helmet';
custom title
const TITLE = 'custom-title';
add html code
<Helmet> <title>{ TITLE }</title> </Helmet>

Example :

import React, {useEffect} from 'react';
import '../../App.css';
import { Helmet } from 'react-helmet'

const TITLE = 'custom-title';

function ThePage() {
    return (
        <>
            <div className='page-container'>
                <Helmet>
                    <title>{ TITLE }</title>
                </Helmet>
                <div>
                    other content ...
                </div>
            </div>
        </>
    )
}

export default ThePage;

[GIT] Please enter a commit to explain why this merge is necessary

CHIN SHAN LEE — Sat, 19 Jun 2021 07:21:26 +0000

This often appear when you are working on merging branches to the main one. So, how can we solve this problem ?

finish the commit message
press esc
press :wq to write and quite