0

Why am I getting this error while trying to run the build of my react-app?

I am getting the following error while trying to serve the 'build' of my react app:

command:

serve -s build

return:

Traceback (most recent call last):
        4: from -e:1:in `<main>'
        3: from /Users/johnelbasha/.rbenv/versions/2.6.6/lib/ruby/2.6.0/un.rb:324:in `httpd'
        2: from /Users/johnelbasha/.rbenv/versions/2.6.6/lib/ruby/2.6.0/un.rb:41:in `setup'
        1: from /Users/johnelbasha/.rbenv/versions/2.6.6/lib/ruby/2.6.0/un.rb:41:in `new' /Users/johnelbasha/.rbenv/versions/2.6.6/lib/ruby/2.6.0/un.rb:63:in `block in setup': invalid option: s (OptionParser::InvalidOption)
        4: from -e:1:in `<main>'
        3: from /Users/johnelbasha/.rbenv/versions/2.6.6/lib/ruby/2.6.0/un.rb:324:in `httpd'
        2: from /Users/johnelbasha/.rbenv/versions/2.6.6/lib/ruby/2.6.0/un.rb:41:in `setup'
        1: from /Users/johnelbasha/.rbenv/versions/2.6.6/lib/ruby/2.6.0/un.rb:41:in `new' /Users/johnelbasha/.rbenv/versions/2.6.6/lib/ruby/2.6.0/un.rb:63:in `block in setup': ambiguous option: -s (OptionParser::AmbiguousOption)

I used the following command before getting this error:

command:

npm run build

return:

> my-app@0.1.0 build /Users/johnelbasha/code/my-app
> react-scripts build

Creating an optimized production build...
Compiled with warnings.

src/components/Header.js
  Line 22:8:  'headingStyle' is assigned a value but never used  no-unused-vars

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

File sizes after gzip:

  42.61 KB  build/static/js/2.1d01524f.chunk.js
  1.59 KB   build/static/js/3.1fb51886.chunk.js
  1.36 KB   build/static/js/main.2fd5a198.chunk.js
  1.17 KB   build/static/js/runtime-main.3e447e76.js
  624 B     build/static/css/main.fb0aa769.chunk.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  yarn global add serve
  serve -s build

Find out more about deployment here:

  https://cra.link/deployment

Context:

I am learning React and following a tutorial video here: https://www.youtube.com/watch?v=w7ejDZ8SWv8&t=4846s

JohnElBasha
  • 11
  • 3

3 Answers3

0

Instead of yarns's serve command (as installed by the serve, you appear to start a different command which attempts t start a ruby webserver.

This might be caused by a shell function have installed to serve the current directory, as e.g. shown in this SO answer. This shell function overrides any additional executables you might have in your $PATH.

You can verify this with the following command:

type serve

This will either give you the full path to the executable which would be run (if the command resolves to an executable) or tells you the source of a defined function or alias your shell uses.

Depending on the result of the previous step, you might either rename or remove the shell function (and then restart your current shell), or you could run yarn's serve command using its full path. You can detect the full path of the executable by running which serve.

Holger Just
  • 52,918
  • 14
  • 115
  • 123
0

if you run that with a \ before it will work because it will run the non alias serve (your yarn one)

\serve -s build

Mauro
  • 1
0

It worked for me, thanks Mauro.

npm run build
\serve -s build

go to http://localhost:3000/ (refresh it if already opened)

serve -s was taken by ruby, as I'm working on a react app now. Somewhere serve -s was 'reserved' by ruby, and this manipulation allows the server to operate ✌️

kelsny
  • 23,009
  • 3
  • 19
  • 48
Stéphane POLETTI
  • 1