How to use with customize-cra

[LorhanSohaky]

How to use with customize-cra

package.json

{
  "name": "package",
  "version": "1.3.0",
  "private": true,
  "scripts": {
    "start": "react-native start",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "web": "REACT_APP_ENV=development react-app-rewired start",
    "build": "echo Building to ${REACT_APP_ENV} environment && react-app-rewired build",
    "build-dev": "REACT_APP_ENV=development CI=false npm run build",
    "build-prod": "REACT_APP_ENV=production CI=true npm run build",
    "build-android": "cd android && ./gradlew bundleRelease",
    "test": "jest --passWithNoTests",
    "cy:open": "NODE_ENV=test cypress open",
    "cy:run:all": "NODE_ENV=test cypress run --config video=false",
    "cy:run:smoke": "NODE_ENV=test cypress run --config video=false,integrationFolder=cypress/integration/smoke",
    "serve": "serve -s build -p 3000",
    "serve-test-cypress": "start-test serve 3000 cy:run:all"
  },
  "dependencies": {
    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-vector-icons": "^4.6.0",
    "react-native-web": "^0.11.7",
    "react-scripts": "^3.4.1",
    ...
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/runtime": "^7.9.2",
    "@cypress/webpack-preprocessor": "^4.1.3",
    "babel-jest": "^24.9.0",
    "babel-plugin-react-native-web": "^0.12.2",
    "customize-cra": "^0.9.1",
    "cypress": "^4.3.0",
    "husky": "^4.2.3",
    "jest": "^24.9.0",
    "react-app-rewired": "^2.1.5",
    "react-test-renderer": "16.9.0",
    "serve": "^11.3.0",
    "start-server-and-test": "^1.10.11",
    ...
  },
  "jest": {
    "preset": "react-native",
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,mjs}"
    ],
    "testEnvironment": "node",
    "testURL": "http://localhost",
    "moduleNameMapper": {
      "^react-native$": "react-native-web"
    },
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint"
    }
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

config-overrides.js

const {
  override,
  disableEsLint,
  babelInclude,
  addBabelPlugin,
  addExternalBabelPlugins,
  addWebpackPlugin
} = require("customize-cra");
const webpack = require("webpack");

const path = require("path");

module.exports = override(
  disableEsLint(),
  addBabelPlugin("react-native-web"),
  addExternalBabelPlugins("@babel/plugin-proposal-class-properties"),
  babelInclude([
    path.resolve("src"),
    path.resolve("node_modules/react-native-vector-icons")
  ]),
  addWebpackPlugin(
    new webpack.DefinePlugin({
      __DEV__: process.env.REACT_APP_ENV === "development" || process.env.NODE_ENV === 'development'
    })
  )
);

• Operating System: Ubuntu 19.04
• Cypress Version: 4.3.0
• Browser Version:

[flotwig]

Issues in our GitHub repo are reserved for potential bugs or feature requests. This issue will be closed since it appears to be neither a bug nor a feature request.

We recommend questions relating to how to use Cypress be asked in our Discord server. Also try searching our existing GitHub issues, reading through our documentation, or searching Stack Overflow for relevant answers.