Tips for create-react-app

interest

This is a recording work while using create-react-app.

[ERROR] SKIP_PREFLIGHT_CHECK=true

error happens when run npm start:
Alt

Solution:

  1. create a new file named .env in folder.
  2. write cmd SKIP_PREFLIGHT_CHECK=true into the file, save and restart npm.

change the localhost port 3000

  1. write in .env file with:

    1
    PORT=2200

    This works on Windows, not tried on Mac OS.

  2. On windows with npm (works):
    in package.json:

    1
    2
    3
    4
    "scripts": {
        "start": "set PORT=2200&&react-scripts start",
        ...
    }

  3. On Windows with yarn (not tried):
    in package.json:

    1
    2
    3
    "scripts": {
        "start": "set PORT=2200 && react-scripts start",
        ....

  4. using npm cross-env (not tried):

    1
    2
    3
    4
    "scripts": {
      "start": "cross-env PORT=3006 react-scripts start",
      ...
    }

    This method need to install cross-env to project first:

    1
    $ npm install --save-dev cross-env

[ERROR] Module not found: Can’t resolve ‘react-router-dom’ in ‘C:...\my-cv\src’

It means dependency react-router-dom have not been added/installed. just run:

1
$ npm install react-router-dom

The dependency will be automatically added to package.json and package-lock.json with latest version. Then npm start again.

Add stylesheets (Sass)

  1. install node-sass:
    1
    $ npm install node-sass --save
  2. rename <filename>.css file to <filename>.module.scss.
    About .module: 个人理解是为了避免同名的class作用域互相影响，把这个stylesheet限定仅用于此module (即编译后class前加一个stylesheetname-前缀，用以区分)
    For more details, see CSS Modules part in this post.

[Heroku ERROR] SecurityError: Failed to construct ‘WebSocket’

SecurityError: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.
This is due to react-scripts 3.3.0, check webpack script in node_modules/react-dev-utils/webpackHotDevClient.js:

1
2
3
4
// ...
// line 62, the original protocol is 'ws', change it to:
  protocol: window.location.protocol === 'https:' ? 'wss' : 'ws',
  // which means using 'wss' when connection is secure

But the problem is not resovled, cuz when Heroku deploy the app, it automatically downloads the node_modules, which will rewrite the script. So the only way I can fix this issue at present is downgrade react-scripts to 3.2.0 in package.json.
For more discussion about this problem, see stackoverflow.