create-react-app

Issues

import scss variables into typescript files

import * as styles from './index.scss';

Create file 'global.d.ts' in your source directory (or outside, but must be included in the src directory defined in tsconfig)

declare module '*.scss' {
  const content: {[className: string]: string};
  export = content;
}

Then in your scss files

$navbar-height: 52px;

:export {
  navbarHeight: $navbar-height;
}

Error: Failed to load parser '@typescript-eslint/parser'

• add node_modules into .eslintignore at root of project (Issue)
• temporary fix: npm install -g create-react-app (Issue)

Error: can't resolve the typescript file (.ts extension)

create tsconfig.json in root (link)

{
  "compilerOptions": {
    "target": "es5",
    "lib": [ "dom" ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

Inside of docker

• for < v5.0.0, add CHOKIDAR_USEPOLLING=true to .env
• for v5.0.0, WATCHPACK_POLLING=true (Issue)

Using a proxy

• Fix not accessible outside localhost, add HOST=0.0.0.0 to .env
• Fix websocket hot reload, add WDS_SOCKET_PORT=443 to .env (Issue)

"scripts": {
  start": "WDS_SOCKET_PORT=443 HOST=0.0.0.0 react-scripts start"
}