Search code examples
reactjsgithub-pagescreate-react-app

Deploying React App to Git Hub Pages failed


I am trying to deploy my react app to github pages............

Followed a tutorial and managed to make it work for a previous project. When i run npm run deploy I am getting this error Any help would be appreciated how to interpret this error I tried different solutions found here but none helped

npm run deploy

> [email protected] predeploy C:\Users\mels_\Documents\Neighbourhood-Map-React
> npm run build


> [email protected] build C:\Users\mels_\Documents\Neighbourhood-Map-React
> react-scripts build

   Creating an optimized production build...
   Failed to compile.

   Error: Parse Error: <meta name="viewport" content="width=device-width, initial  
     -scale=1>
      <meta name="theme-color" content="#000000">
      <!--
        manifest.json provides metadata used when your web app is added to the
        homescreen on Android. See https://developers.google.com/web/fundamental  
      s/engage-and-retain/web-app-manifest/
      -->
      <link rel="manifest" href="/github.io/Neighbourhood-Map-React/manifest.jso  n">
      <link rel="shortcut icon" href="/github.io/Neighbourhood-Map-React/favicon  .ico">
      <!--
        Notice the use of /github.io/Neighbourhood-Map-React in the tags above.
        It will be replaced with the URL of the `public` folder during the build  .
        Only files inside the `public` folder can be referenced from the HTML.
        Unlike "/favicon.ico" or "favicon.ico", "/github.io/Neighbourhood-Map-Re  act/favicon.ico" will
        work correctly both with client-side routing and a non-root public URL.
        Learn how to configure a non-root public URL by running `npm run build`.      -->
      <title>React App</title>
    <link href="/github.io/Neighbourhood-Map-React/static/css/main.c066d278.css"   rel="stylesheet"></head>
    <body>
      <noscript>
        You need to enable JavaScript to run this app.
      </noscript>
      <div id="root"></div>
      <!--
        This HTML file is a template.
        If you open it directly in the browser, you will see an empty page.
        You can add webfonts, meta tags, or analytics to this file.
        The build step will place the bundled scripts into the <body> tag.
        To begin the development, run `npm start` or `yarn start`.
        To create a production bundle, use `npm run build` or `yarn build`.
      -->
    <script type="text/javascript" src="/github.io/Neighbourhood-Map-React/stati  c/js/main.df359430.js"></script></body>
  </html>

  - htmlparser.js:240 new HTMLParser
    [Neighbourhood-Map-React]/[html-minifier]/src/htmlparser.js:240:13

  - htmlminifier.js:951 minify
    [Neighbourhood-Map-React]/[html-minifier]/src/htmlminifier.js:951:3

  - htmlminifier.js:1306 exports.minify
    [Neighbourhood-Map-React]/[html-minifier]/src/htmlminifier.js:1306:16

  - index.js:296
    [Neighbourhood-Map-React]/[html-webpack-plugin]/index.js:296:16

  - util.js:16 tryCatcher
    [Neighbourhood-Map-React]/[bluebird]/js/release/util.js:16:23

  - promise.js:512 Promise._settlePromiseFromHandler
    [Neighbourhood-Map-React]/[bluebird]/js/release/promise.js:512:31

  - promise.js:569 Promise._settlePromise
    [Neighbourhood-Map-React]/[bluebird]/js/release/promise.js:569:18

  - promise.js:614 Promise._settlePromise0
    [Neighbourhood-Map-React]/[bluebird]/js/release/promise.js:614:10

  - promise.js:693 Promise._settlePromises
    [Neighbourhood-Map-React]/[bluebird]/js/release/promise.js:693:18

  - async.js:133 Async._drainQueue
    [Neighbourhood-Map-React]/[bluebird]/js/release/async.js:133:16

  - async.js:143 Async._drainQueues
    [Neighbourhood-Map-React]/[bluebird]/js/release/async.js:143:10

  - async.js:17 Immediate.Async.drainQueues [as _onImmediate]
    [Neighbourhood-Map-React]/[bluebird]/js/release/async.js:17:14


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\mels_\AppData\Roaming\npm-cache\_logs\2018-07-20T13_00_54_457Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] predeploy: `npm run build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] predeploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\mels_\AppData\Roaming\npm-cache\_logs\2018-07-20T13_00_54_550Z-debug.log
warning: LF will be replaced by CRLF in package-lock.json.
The file will have its original line endings in your working directory.


Solution

  • As @Orkhan Jafarov pointed out, Your script failed on parsing error. You are missing " at the end of your meta tag.

       Error: Parse Error: <meta name="viewport" content="width=device-width, initial-scale=1>