create-react-app – Page 15

Using `”homepage”` in package.json, without messing up paths for localhost

November 19, 2022 by Tarik

Docs for create-react-app explains how to serve same build from different relative paths. If you put homepage as “homepage”: “.”, assets will be served relative to index.html. You will then be able to move your app from http://mywebsite.example to http://mywebsite.example/relativepath or even http://mywebsite.example/relative/path without having to rebuild it. For development purposes, serving using yarn start … Read more

Use custom build output folder when using create-react-app

November 19, 2022 by Tarik

Edit your package.json: “build”: “react-scripts build && mv build webapp”

‘React’ refers to a UMD global, but the current file is a module

November 13, 2022 by Tarik

Create React App supports the new JSX transformation out of the box in version 4 but if you are using a custom setup, the following is needed to remove the TypeScript error when writing jsx without import React from ‘react’: typescript of at least version 4.1 react and react-dom of at least version 17 tsconfig.json … Read more

‘React’ was used before it was defined

October 23, 2022 by Tarik

From the official documentation. “rules”: { // note you must disable the base rule as it can report incorrect errors “no-use-before-define”: “off”, “@typescript-eslint/no-use-before-define”: [“error”] }

TypeScript error: Property ‘X’ does not exist on type ‘Window’

October 19, 2022 by Tarik

Why does declare const window: any; work? Because you declare a local variable of type any. Having something of type any essentially turns off type checking for window so you can do anything with it. I really do not recommend this solution, it is a really bad one. Why doesn’t type Window = { FB: … Read more

What does this “react-scripts eject” command do?

October 15, 2022 by Tarik

create-react-app encapsulates all of the npm modules it is using internally, so that your package.json will be very clean and simple without you having to worry about it. However, if you want to start doing more complex things and installing modules that may interact with modules create-react-app is using under the hood, those new modules … Read more

npm ERR! code UNABLE_TO_GET_ISSUER_CERT_LOCALLY

October 10, 2022 by Tarik

A quick solution from the internet search was npm config set strict-ssl false, luckily it worked. But as a part of my work environment, I am restricted to set the strict-ssl flag to false. Later I found a safe and working solution, npm config set registry http://registry.npmjs.org/ this worked perfectly and I got a success … Read more

create react app not picking up .env files?

October 9, 2022 by Tarik

With create react app, you need to prefix REACT_APP_ to the variable name. ex: REACT_APP_API_URL=http://localhost:3000/api REACT_APP_CALLBACK_URL=http://localhost:3005/callback CRA Docs on Adding Custom Environment Variables: Note: You must create custom environment variables beginning with REACT_APP_. Any other variables except NODE_ENV will be ignored to avoid accidentally exposing a private key on the machine that could have the … Read more

The create-react-app imports restriction outside of src directory

October 1, 2022 by Tarik

This is special restriction added by developers of create-react-app. It is implemented in ModuleScopePlugin to ensure files reside in src/. That plugin ensures that relative imports from app’s source directory don’t reach outside of it. There is no official way to disable this feature except using eject and modify webpack config. But, most features and … Read more

What exactly is the ‘react-scripts start’ command?

September 30, 2022 by Tarik

create-react-app and react-scripts react-scripts is a set of scripts from the create-react-app starter pack. create-react-app helps you kick off projects without configuring, so you do not have to setup your project by yourself. react-scripts start sets up the development environment and starts a server, as well as hot module reloading. You can read here to … Read more