R
Railway•2y ago
Charles_

Yarn build is not optimized

I've defined yarn build as my Build Command for a React website, however in the deploy logs I get: 
Note that the development build is not optimized.
To create a production build, use yarn build.
Note that the development build is not optimized.
To create a production build, use yarn build.
What am I missing?
25 Replies
Percy
Percy•2y ago
Project ID: b61d7fc0-1624-4c8a-ae9b-1a2a06f6e706
Percy
Percy•2y ago
Charles_
Charles_OP•2y ago
b61d7fc0-1624-4c8a-ae9b-1a2a06f6e706
Brody
Brody•2y ago
send your package.json?
Charles_
Charles_OP•2y ago
{
  "name": "quantsight",
  "version": "2.0.0",
  "private": true,
  "dependencies": {
    "@iconscout/react-unicons": "^1.1.6",
    "@reduxjs/toolkit": "^1.9.2",
    "@stripe/react-stripe-js": "^1.16.4",
    "@stripe/stripe-js": "^1.46.0",
    "axios": "^1.3.3",
    "bootstrap": "^5.1.3",
    "classnames": "^2.3.1",
    "emailjs-com": "^3.2.0",
    "feather-icons-react": "^0.5.0",
    "formik": "^2.2.9",
    "node-sass": "^8.0.0",
    "prismjs": "^1.29.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-drawer": "^1.3.4",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.8.1",
    "react-scripts": "^5.0.1",
    "reactstrap": "^9.1.1",
    "redux": "^4.2.1",
    "stripe": "^11.11.0",
    "web-vitals": "^2.1.4",
    "webpack": "^5.73.0",
    "yup": "^0.32.11"
  },
  "scripts": {
    "start": "react-scripts --openssl-legacy-provider start",
    "build": "react-scripts build --max_old_space_size=8000 build",
    "lint": "eslint .",
    "lint:fix": "eslint --fix .",
    "format": "prettier --write \"**/*.{js,jsx,json,md,html,css,less,scss}\"",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
{
  "name": "quantsight",
  "version": "2.0.0",
  "private": true,
  "dependencies": {
    "@iconscout/react-unicons": "^1.1.6",
    "@reduxjs/toolkit": "^1.9.2",
    "@stripe/react-stripe-js": "^1.16.4",
    "@stripe/stripe-js": "^1.46.0",
    "axios": "^1.3.3",
    "bootstrap": "^5.1.3",
    "classnames": "^2.3.1",
    "emailjs-com": "^3.2.0",
    "feather-icons-react": "^0.5.0",
    "formik": "^2.2.9",
    "node-sass": "^8.0.0",
    "prismjs": "^1.29.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-drawer": "^1.3.4",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.8.1",
    "react-scripts": "^5.0.1",
    "reactstrap": "^9.1.1",
    "redux": "^4.2.1",
    "stripe": "^11.11.0",
    "web-vitals": "^2.1.4",
    "webpack": "^5.73.0",
    "yup": "^0.32.11"
  },
  "scripts": {
    "start": "react-scripts --openssl-legacy-provider start",
    "build": "react-scripts build --max_old_space_size=8000 build",
    "lint": "eslint .",
    "lint:fix": "eslint --fix .",
    "format": "prettier --write \"**/*.{js,jsx,json,md,html,css,less,scss}\"",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "eslint:recommended",
      "plugin:react/recommended"
    ],
    "babelOptions": {
      "presets": [
        "@babel/preset-react"
      ]
    },
    "parser": "@babel/eslint-parser",
    "parserOptions": {
      "requireConfigFile": false,
      "ecmaVersion": 2020,
      "sourceType": "module",
      "ecmaFeatures": {
        "jsx": true
      }
    },
    "env": {
      "browser": true,
      "es6": true
    },
    "globals": {
      "$": true
    },
    "settings": {
      "react": {
        "version": "^17.0.1"
      }
    },
    "rules": {
      "semi": [
        "error",
        "never"
      ]
    }
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "eslint-config-standard-react": "^9.2.0",
    "eslint-plugin-react": "^7.20.6",
    "prettier": "^2.1.1"
  }
}
  "eslintConfig": {
    "extends": [
      "eslint:recommended",
      "plugin:react/recommended"
    ],
    "babelOptions": {
      "presets": [
        "@babel/preset-react"
      ]
    },
    "parser": "@babel/eslint-parser",
    "parserOptions": {
      "requireConfigFile": false,
      "ecmaVersion": 2020,
      "sourceType": "module",
      "ecmaFeatures": {
        "jsx": true
      }
    },
    "env": {
      "browser": true,
      "es6": true
    },
    "globals": {
      "$": true
    },
    "settings": {
      "react": {
        "version": "^17.0.1"
      }
    },
    "rules": {
      "semi": [
        "error",
        "never"
      ]
    }
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "eslint-config-standard-react": "^9.2.0",
    "eslint-plugin-react": "^7.20.6",
    "prettier": "^2.1.1"
  }
}
Had to split to due to char limit
Brody
Brody•2y ago
is this a csr rendered site?
Charles_
Charles_OP•2y ago
Correct
Brody
Brody•2y ago
well I see you have put build twice in the build script
Charles_
Charles_OP•2y ago
It's already there twice no?
Brody
Brody•2y ago
react-scripts build --max_old_space_size=8000 build build build what do you have defined as your build and start commands in the service settings
Charles_
Charles_OP•2y ago
I just have this in build and nothing in the deploy section I see, you're saying it should just be there once?
Brody
Brody•2y ago
Brody
Brody•2y ago
do you have anything set here?
rdil
rdil•2y ago
hey - yarn dev here! you should change it to NODE_OPTIONS=--max-old-space-size=8000 react-scripts build
Charles_
Charles_OP•2y ago
I don't have anything defined here, should I? I'm still getting same issue: 
yarn run v1.22.19
$ react-scripts --openssl-legacy-provider start
(node:38) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:38) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...
Compiled successfully!
You can now view [redacted] in the browser.
Local:            http://localhost:5449
On Your Network:  http://[redacted]:5449
Note that the development build is not optimized.
To create a production build, use yarn build.
webpack compiled successfully
Compiling...
Compiled successfully!
webpack compiled successfully
yarn run v1.22.19
$ react-scripts --openssl-legacy-provider start
(node:38) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:38) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...
Compiled successfully!
You can now view [redacted] in the browser.
Local:            http://localhost:5449
On Your Network:  http://[redacted]:5449
Note that the development build is not optimized.
To create a production build, use yarn build.
webpack compiled successfully
Compiling...
Compiled successfully!
webpack compiled successfully
rdil
rdil•2y ago
Are you on the latest version of react-scripts and associated tooling?
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Charles_
Charles_OP•2y ago
Looks like it Thank, will try
Brody
Brody•2y ago
also worth mentioning, react-scripts start, starts a development server and you should never use that in production, please use serve in your start command instead to serve the folder that was built
Charles_
Charles_OP•2y ago
Thanks @Brody - can you please confirm the exact command? I'm not a JS dev. I'm also assuming this should be defined as a "Start Command"?
Brody
Brody•2y ago
scripts.start in the package.json file serve build -s -p $PORT theres no need to define any build or start commands in the service settings, you can define them in the package.json file
Charles_
Charles_OP•2y ago
Thank you
Brody
Brody•2y ago
no problem!
Charles_
Charles_OP•2y ago
If I try to add server npm i serve I get some conflict errors - can you please point on how to best address this? 
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@">=16.8.0" from [email protected]
npm ERR!   node_modules/formik
npm ERR!     formik@"^2.2.9" from the root project
npm ERR!   peer react@"^18.2.0" from [email protected]
npm ERR!   node_modules/react-dom
npm ERR!     peer react-dom@"^16.8.0 || ^17 || ^18" from [email protected]
npm ERR!     node_modules/react-popper
npm ERR!       react-popper@"^2.2.4" from [email protected]
npm ERR!       node_modules/reactstrap
npm ERR!         reactstrap@"^9.1.1" from the root project
npm ERR!     peerOptional react-dom@"^16.8 || ^17.0 || ^18.0" from [email protected]
npm ERR!     node_modules/react-redux
npm ERR!       peerOptional react-redux@"^7.2.1 || ^8.0.2" from @reduxjs/[email protected]
npm ERR!       node_modules/@reduxjs/toolkit
npm ERR!         @reduxjs/toolkit@"^1.9.2" from the root project
npm ERR!       1 more (the root project)
npm ERR!     5 more (react-transition-group, react-router-dom, reactstrap, ...)
npm ERR!   11 more (react-popper, react-redux, react-scripts, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14.7 || ^15.0.0" from [email protected]
npm ERR! node_modules/react-drawer
npm ERR!   react-drawer@"^1.3.4" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@"^0.14.7 || ^15.0.0" from [email protected]
npm ERR!   node_modules/react-drawer
npm ERR!     react-drawer@"^1.3.4" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@">=16.8.0" from [email protected]
npm ERR!   node_modules/formik
npm ERR!     formik@"^2.2.9" from the root project
npm ERR!   peer react@"^18.2.0" from [email protected]
npm ERR!   node_modules/react-dom
npm ERR!     peer react-dom@"^16.8.0 || ^17 || ^18" from [email protected]
npm ERR!     node_modules/react-popper
npm ERR!       react-popper@"^2.2.4" from [email protected]
npm ERR!       node_modules/reactstrap
npm ERR!         reactstrap@"^9.1.1" from the root project
npm ERR!     peerOptional react-dom@"^16.8 || ^17.0 || ^18.0" from [email protected]
npm ERR!     node_modules/react-redux
npm ERR!       peerOptional react-redux@"^7.2.1 || ^8.0.2" from @reduxjs/[email protected]
npm ERR!       node_modules/@reduxjs/toolkit
npm ERR!         @reduxjs/toolkit@"^1.9.2" from the root project
npm ERR!       1 more (the root project)
npm ERR!     5 more (react-transition-group, react-router-dom, reactstrap, ...)
npm ERR!   11 more (react-popper, react-redux, react-scripts, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14.7 || ^15.0.0" from [email protected]
npm ERR! node_modules/react-drawer
npm ERR!   react-drawer@"^1.3.4" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@"^0.14.7 || ^15.0.0" from [email protected]
npm ERR!   node_modules/react-drawer
npm ERR!     react-drawer@"^1.3.4" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
Brody
Brody•2y ago
Fix the upstream dependency conflict or retry this command with --force or --legacy-peer-deps to accept an incorrect (and potentially broken) dependency resolution.
Want results from more Discord servers?
Add your server