React app built with webpack-dev-server stuck on deploy?

Support
1

Logs:

> 5:51:22 PM: Build ready to start
> 5:51:24 PM: build-image version: 2cee85eb7f808bf3b6e87378c5307f9411f0a332
> 5:51:24 PM: build-image tag: v3.8.0
> 5:51:24 PM: buildbot version: b7aeb2675f82192daa8545b22bebab9c3b179d0e
> 5:51:24 PM: Fetching cached dependencies
> 5:51:24 PM: Starting to download cache of 959.7KB
> 5:51:24 PM: Finished downloading cache in 131.768471ms
> 5:51:24 PM: Starting to extract cache
> 5:51:24 PM: Finished extracting cache in 23.628238ms
> 5:51:24 PM: Finished fetching cache in 155.920697ms
> 5:51:24 PM: Starting to prepare the repo for build
> 5:51:25 PM: Preparing Git Reference refs/heads/main
> 5:51:25 PM: Parsing package.json dependencies
> 5:51:26 PM: Starting build script
> 5:51:26 PM: Installing dependencies
> 5:51:26 PM: Python version set to 2.7
> 5:51:27 PM: v12.18.0 is already installed.
> 5:51:27 PM: Now using node v12.18.0 (npm v6.14.4)
> 5:51:27 PM: Started restoring cached build plugins
> 5:51:27 PM: Finished restoring cached build plugins
> 5:51:27 PM: Attempting ruby version 2.7.2, read from environment
> 5:51:28 PM: Using ruby version 2.7.2
> 5:51:29 PM: Using PHP version 5.6
> 5:51:29 PM: Started restoring cached yarn cache
> 5:51:29 PM: Finished restoring cached yarn cache
> 5:51:29 PM: Installing yarn at version 1.22.10
> 5:51:29 PM: Installing Yarn!
> 5:51:29 PM: > Downloading tarball...
> 5:51:29 PM: [1/2]: https://yarnpkg.com/downloads/1.22.10/yarn-v1.22.10.tar.gz --> /tmp/yarn.tar.gz.ZC6CQW67yb
> 5:51:29 PM:   % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
> 5:51:29 PM:                                  Dload  Upload   Total   Spent    Left  Speed
> 5:51:29 PM:   0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
> 5:51:29 PM: 100    81  100    81    0     0    404      0 --:--:-- --:--:-- --:--:--   405
> 5:51:29 PM: 100    95  100    95    0     0    172      0 --:--:-- --:--:-- --:--:--   172
> 5:51:30 PM: 100   626  100   626    0     0    794      0 --:--:-- --:--:-- --:--:--   794
> 5:51:30 PM:   8 1215k    8  108k    0     0   112k      0  0:00:10 --:--:--  0:00:10  112k
> 5:51:30 PM: 100 1215k  100 1215k    0     0  1214k      0  0:00:01  0:00:01 --:--:-- 27.0M
> 5:51:30 PM: [2/2]: https://yarnpkg.com/downloads/1.22.10/yarn-v1.22.10.tar.gz.asc --> /tmp/yarn.tar.gz.ZC6CQW67yb.asc
> 5:51:30 PM: 100    85  100    85    0     0   1809      0 --:--:-- --:--:-- --:--:--  1809
> 5:51:30 PM: 100    99  100    99    0     0   1289      0 --:--:-- --:--:-- --:--:--  1289
> 5:51:30 PM: 100   630  100   630    0     0   6126      0 --:--:-- --:--:-- --:--:--  6126
> 5:51:30 PM: 100   832  100   832    0     0   7262      0 --:--:-- --:--:-- --:--:--  7262
> 5:51:30 PM: > Verifying integrity...
> 5:51:30 PM: gpg: Signature made Fri 02 Oct 2020 11:17:27 AM UTC using RSA key ID 69475BAA
> 5:51:30 PM: gpg: Good signature from "Yarn Packaging <yarn@dan.cx>"
> 5:51:30 PM: gpg: WARNING: This key is not certified with a trusted signature!
> 5:51:30 PM: gpg:          There is no indication that the signature belongs to the owner.
> 5:51:30 PM: Primary key fingerprint: 72EC F46A 56B4 AD39 C907  BBB7 1646 B01B 86E5 0310
> 5:51:30 PM:      Subkey fingerprint: 6D98 490C 6F1A CDDD 448E  4595 4F77 6793 6947 5BAA
> 5:51:30 PM: > GPG signature looks good
> 5:51:30 PM: > Extracting to ~/.yarn...
> 5:51:30 PM: > Adding to $PATH...
> 5:51:30 PM: > Successfully installed Yarn 1.22.10! Please open another terminal where the `yarn` command will now be available.
> 5:51:31 PM: No yarn workspaces detected
> 5:51:31 PM: Started restoring cached node modules
> 5:51:31 PM: Finished restoring cached node modules
> 5:51:31 PM: Installing NPM modules using Yarn version 1.22.10
> 5:51:31 PM: yarn install v1.22.10
> 5:51:31 PM: warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
> 5:51:31 PM: [1/4] Resolving packages...
> 5:51:32 PM: [2/4] Fetching packages...
> 5:51:54 PM: info fsevents@2.3.2: The platform "linux" is incompatible with this module.
> 5:51:54 PM: info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
> 5:51:54 PM: info fsevents@1.2.13: The platform "linux" is incompatible with this module.
> 5:51:54 PM: info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
> 5:51:54 PM: [3/4] Linking dependencies...
> 5:51:54 PM: warning " > @material-ui/core@5.0.0-alpha.34" has incorrect peer dependency "react@^17.0.0".
> 5:51:54 PM: warning " > @material-ui/core@5.0.0-alpha.34" has incorrect peer dependency "react-dom@^17.0.0".
> 5:51:54 PM: warning "@material-ui/core > @material-ui/private-theming@5.0.0-alpha.33" has incorrect peer dependency "react@^17.0.0".
> 5:51:54 PM: warning "@material-ui/core > @material-ui/styled-engine@5.0.0-alpha.34" has incorrect peer dependency "react@^17.0.0".
> 5:51:54 PM: warning "@material-ui/core > @material-ui/styles@5.0.0-alpha.33" has incorrect peer dependency "react@^17.0.0".
> 5:51:54 PM: warning "@material-ui/core > @material-ui/system@5.0.0-alpha.34" has incorrect peer dependency "react@^17.0.0".
> 5:51:54 PM: warning "@material-ui/core > @material-ui/system@5.0.0-alpha.34" has incorrect peer dependency "react-dom@^17.0.0".
> 5:51:54 PM: warning "@material-ui/core > @material-ui/unstyled@5.0.0-alpha.34" has incorrect peer dependency "react@^17.0.0".
> 5:51:54 PM: warning "@material-ui/core > @material-ui/unstyled@5.0.0-alpha.34" has incorrect peer dependency "react-dom@^17.0.0".
> 5:51:54 PM: warning "@material-ui/core > @material-ui/utils@5.0.0-alpha.33" has incorrect peer dependency "react@^17.0.0".
> 5:51:54 PM: warning " > bootstrap@4.6.0" has unmet peer dependency "jquery@1.9.1 - 3".
> 5:51:54 PM: warning " > bootstrap@4.6.0" has unmet peer dependency "popper.js@^1.16.1".
> 5:51:54 PM: warning " > terser-webpack-plugin@5.1.1" has incorrect peer dependency "webpack@^5.1.0".
> 5:52:06 PM: [4/4] Building fresh packages...
> 5:52:10 PM: Done in 38.33s.
> 5:52:10 PM: NPM modules installed using Yarn
> 5:52:10 PM: Started restoring cached go cache
> 5:52:10 PM: Finished restoring cached go cache
> 5:52:10 PM: go version go1.14.4 linux/amd64
> 5:52:10 PM: go version go1.14.4 linux/amd64
> 5:52:10 PM: Installing missing commands
> 5:52:10 PM: Verify run directory
> 5:52:10 PM: ​
> 5:52:10 PM: ────────────────────────────────────────────────────────────────
> 5:52:10 PM:   Netlify Build                                                 
> 5:52:10 PM: ────────────────────────────────────────────────────────────────
> 5:52:10 PM: ​
> 5:52:10 PM: ❯ Version
> 5:52:10 PM:   @netlify/build 12.26.0
> 5:52:10 PM: ​
> 5:52:10 PM: ❯ Flags
> 5:52:10 PM:   deployId: 60dfb48a53caab9bc151362e
> 5:52:10 PM: ​
> 5:52:10 PM: ❯ Current directory
> 5:52:10 PM:   /opt/build/repo
> 5:52:10 PM: ​
> 5:52:10 PM: ❯ Config file
> 5:52:10 PM:   No config file was defined: using default values.
> 5:52:10 PM: ​
> 5:52:10 PM: ❯ Context
> 5:52:10 PM:   production
> 5:52:11 PM: ​
> 5:52:11 PM: ────────────────────────────────────────────────────────────────
> 5:52:11 PM:   1. Build command from Netlify app                             
> 5:52:11 PM: ────────────────────────────────────────────────────────────────
> 5:52:11 PM: ​
> 5:52:11 PM: $ CI= npm start
> 5:52:11 PM: > my-fav-dog-images@0.0.1 start /opt/build/repo
> 5:52:11 PM: > yarn run start-dev
> 5:52:11 PM: yarn run v1.22.10
> 5:52:11 PM: $ webpack-dev-server --config=configs/webpack/dev.js
> 5:52:12 PM: β„Ή ο½’wdsο½£: Project is running at http://localhost:8080/
> 5:52:12 PM: β„Ή ο½’wdsο½£: webpack output is served from /
> 5:52:12 PM: β„Ή ο½’wdsο½£: Content not from webpack is served from /opt/build/repo
> 5:52:12 PM: β„Ή ο½’atlο½£: Using typescript@3.9.9 from typescript
> 5:52:12 PM: β„Ή ο½’atlο½£: Using tsconfig.json from /opt/build/repo/tsconfig.json (in a forked process)
> 5:52:28 PM: β„Ή ο½’atlο½£: Checking started in a separate process...
> 5:52:29 PM: β„Ή ο½’wdmο½£: Hash: 825a422171c8795584c4
> 5:52:29 PM: Version: webpack 4.46.0
> 5:52:29 PM: Time: 16682ms
> 5:52:29 PM: Built at: 07/03/2021 12:52:29 AM
> 5:52:29 PM:                                    Asset       Size  Chunks                    Chunk Names
> 5:52:29 PM: img/740d218856962fad06dd01f184e505d4.png  166 bytes          [emitted]
> 5:52:29 PM: img/7c08e1ee77007bf5784980dc8c64a070.png  286 bytes          [emitted]
> 5:52:29 PM: img/96d816a8b4580dd037da35d9b20b634f.png  258 bytes          [emitted]
> 5:52:29 PM: img/d5159ff0367108c09d5d562e3ca3089f.png  228 bytes          [emitted]
> 5:52:29 PM:                               index.html   1.02 KiB          [emitted]
> 5:52:29 PM:                                  main.js   4.26 MiB    main  [emitted]  [big]  main
> 5:52:29 PM: Entrypoint main [big] = main.js
> 5:52:29 PM: [0] multi ../node_modules/webpack-dev-server/client?http://localhost:8080 ../node_modules/webpack/hot/dev-server.js webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./index.tsx 76 bytes {main} [built]
> 5:52:29 PM: [../node_modules/react-redux/es/index.js] 776 bytes {main} [built]
> 5:52:29 PM: [../node_modules/strip-ansi/index.js] 161 bytes {main} [built]
> 5:52:29 PM: [../node_modules/webpack-dev-server/client/index.js?http://localhost:8080] ../node_modules/webpack-dev-server/client?http://localhost:8080 4.29 KiB {main} [built]
> 5:52:29 PM: [../node_modules/webpack-dev-server/client/overlay.js] 3.51 KiB {main} [built]
> 5:52:29 PM: [../node_modules/webpack-dev-server/client/socket.js] 1.53 KiB {main} [built]
> 5:52:29 PM: [../node_modules/webpack-dev-server/client/utils/createSocketUrl.js] 2.91 KiB {main} [built]
> 5:52:29 PM: [../node_modules/webpack-dev-server/client/utils/log.js] 964 bytes {main} [built]
> 5:52:29 PM: [../node_modules/webpack-dev-server/client/utils/reloadApp.js] 1.59 KiB {main} [built]
> 5:52:29 PM: [../node_modules/webpack-dev-server/client/utils/sendMessage.js] 402 bytes {main} [built]
> 5:52:29 PM: [../node_modules/webpack/buildin/module.js] 497 bytes {main} [built]
> 5:52:29 PM: [../node_modules/webpack/hot sync ^\.\/log$] ../node_modules/webpack/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
> 5:52:29 PM: [../node_modules/webpack/hot/dev-server.js] 1.59 KiB {main} [built]
> 5:52:29 PM: [../node_modules/webpack/hot/only-dev-server.js] 2.52 KiB {main} [built]
> 5:52:29 PM: [./index.tsx] 2.75 KiB {main} [built]
> 5:52:29 PM:     + 515 hidden modules
> 5:52:29 PM: Child html-webpack-plugin for "index.html":
> 5:52:29 PM:      1 asset
> 5:52:29 PM:     Entrypoint undefined = index.html
> 5:52:29 PM:     [../node_modules/html-webpack-plugin/lib/loader.js!./index.html] 1.18 KiB {0} [built]
> 5:52:29 PM:     [../node_modules/lodash/lodash.js] 531 KiB {0} [built]
> 5:52:29 PM:     [../node_modules/webpack/buildin/global.js] 472 bytes {0} [built]
> 5:52:29 PM:     [../node_modules/webpack/buildin/module.js] 497 bytes {0} [built]
> 5:52:29 PM: β„Ή ο½’wdmο½£: Compiled successfully.
> 5:52:29 PM: β„Ή ο½’atlο½£: Time: 707ms

After compiling successfully, it just stays like that and doesn’t deploy. am I missing something in my build?

I’m currently building with CI= npm start. Any help is appreciated!

"scripts": {
    "lint": "tslint './src/**/*.ts*' --format stylish --project . --force",
    "start": "yarn run start-dev",
    "start-dev": "webpack-dev-server --config=configs/webpack/dev.js",
    "test": "jest --watch --coverage --config=configs/jest.config.js"
  },
2

Hi @Chadlei

Welcome to the Netlify community.

I notice you don’t have a build command. Perhaps have a look over this support guide.

3

hi! didnt really get much from this article, but any suggestions on adding a build command to my project? it wasn’t created with the usual create-react-app command so I’m not sure what to do

4

I’m not a react expert by any stretch of the imagination. The build command in a test react app I have created (with yarn create react-app) has the build command as

"build": "react-scripts build"

Not knowing what you’ve created or how you’ve done it, it is impossible for me to speculate what build command to use.

5

right, this is an app created by someone else with webpack-dev-server and not the usual create-react-app, so I’m hoping someone has some insight on what to do instead of the ```
β€œbuild”: β€œreact-scripts build”

6

DevServer
webpack-dev-server can be used to quickly develop an application.

Production
In this guide, we’ll dive into some of the best practices and utilities for building a production site or application.

Which suggests using something like

"build": "webpack"
OR
"build": "webpack --config webpack.prod.js"

7

so when I do a npm start, it’ll run: "start-dev": "webpack-dev-server --config=configs/webpack/dev.js", and right now for my build command I have CI= npm start. adding the "build": "webpack-dev-server --config=configs/webpack/dev.js", didnt work

8

The Support Guide I linked to previously has the answer to why

How do I run a server/database at Netlify?
…the answer is: you can’t! :hushed:

It then goes on to say

Static site generators , gulp, grunt, webpack, et cetera - these can all be used to build a site at Netlify.

[I’ve added emphasis to webpack as that is what you are using.]

9

so good to know webpack CAN be used, but I’m still having trouble finding out how to make it work on netlify

10

Hi @Chadlei,

What @coelmay is trying to tell you is that, you can’t run a server on Netlify. What your command is doing is that, it’s starting a development server and the build never finishes. it eventually times out.

Instead, what you need is a command to build a production version - something that will output the required files and the command would exit. After this happens, Netlify will deploy your website. In webpack, the command might be something along the lines of webpack-cli build.

1 Like
11

I see, thanks for the clarification! I now have a "build": "webpack --mode production", command and changed the Publish directory to the dist folder that the build command produces, and it successfully deploys, but the site still gets a page not found error. the build command requires a index.js file, which gives me a You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file error if I try to put react code in it, which is needed to display the proper page. I have my babel-loader in a common.js file which the webpack should be able to read, but I’m not sure why it’s not picking it up. any ideas anyone?

12

You’d get a page not found error when there’s no index.html for Netlify to serve. Is your current configuration able to generate the HTML file?

13

so there’s a index.html file in the src/ directory, but with react apps it’s the index.js file that holds all the content. this is my directory tree. my build command is npm run build
but am i missing something?

Screen Shot 2021-07-06 at 6.33.58 PM
Screen Shot 2021-07-06 at 6.33.58 PM294Γ—623 18.7 KB

14

The directory structure looks fine. Are you sure your publish directory is correct? You could share you repo so we can check this for you.

15

the publish directory is src so that it could find the index files. heres my repo: GitHub - ChadLei/My-Favorite-Dog-Pics

thanks!

16

Hey @Chadlei

Found a tutorial on freeCodeCamp How to set up & deploy your React app from scratch using Webpack and Babel which is deployed to Netlify (source nsebhastian/my-react-boilerplate.)

It uses webpack-dev-server for testing and webpack for building.

I hope this may help you progress with your project and get a successful build & deploy.

17

Unfortunately, that repo fails in npm install phase for me. So, I am unable to test it.

18

I’m not getting that problem even after cloning or downloading. what’s the error youre seeing?

19

The node-gyp thing won’t install. It’s not the first time though, I have always had problems getting that to install when testing anyone’s repo. Probably something wrong with my config. I just never tried solving it.

For the time-being, did you try @coelmay’s suggestion?

20

no luck still! open to any new suggestions