Got a blank white page after deploying react app to gitlab pages

Question

I want to deploy my react app (not create-react-app, built from skratch) to gitlab pages, all jobs are passed successfully, but the page is not working correctly. I have just a blank white page.

my .gitlab-ci.yml

stages:
  - build
  - deploy

build:
  image: node:latest    
  stage: build
  script:
    - npm install   
    - npm run build
  artifacts:
    paths:
      - build/          

pages:
  image: alpine:latest
  stage: deploy
  variables:
    GIT_STRATEGY: none 
  script:
    - mv build public      
    - cd public 
  artifacts:
    paths:
      - public

My webpack, I merge common with prod

webpack.common.js

module.exports = {
    resolve: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'] 
    },
    entry: {
        index: './src/index.tsx'
    },
    output: {
        filename: "[name].[chunkhash].js",
        chunkFilename: "[name].[chunkhash].js",
        path: path.resolve(__dirname, "public"),
        publicPath: "/"
      },
    plugins: [
        new MiniCssExtractPlugin({ filename: '[name].[contenthash].css', chunkFilename: '[name].[contenthash].css' }),
        new HtmlWebpackPlugin({
            template: "src/index.html",
            inject: "body",
            minify: {
              minifyCSS: true,
              minifyJS: true,
              collapseWhitespace: true
            }
          }),
    ],
    module: {
        rules: [
            {
                test: /\.(css|scss|sass)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/i,
                use: ['file-loader']
            },
            {
                test: /\.html$/,
                use: [{ loader: 'html-loader' }]
            },
            {
                test: /\.(js|jsx|ts|tsx)$/,
                exclude: /(node_modules|bower_components|prod)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript']
                    }
                }
            }
        ]
    }
}

webpack.prod.js

module.exports = merge(common, {
    mode: 'production',
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                test: /\.js(\?.*)?$/i,
             })],
        moduleIds: 'deterministic',
        runtimeChunk: 'single',
        splitChunks: {
            name: 'runtime',
            chunks: 'all'
        }
    }
})

package.json

    "scripts": {
        "start": "webpack-dev-server --config webpack.dev.js --open",
        "build": "webpack --config webpack.prod.js"
    },

As I mentioned locally works fine, both dev server and build.

I have no console error, just a warning:

Error with Permissions-Policy header: Unrecognized feature: 'interest-cohort'.

and

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://gitlab.com/users/sign_in with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

I logged out, when I logged in I get 401err

GET https://projects.gitlab.io/auth?code=2.... net::ERR_ABORTED 401

project is public

Answer 1

I wanted to clarify the answer from Waleed93 as i just ran into the same issue.

Gitlab Pages use URLs of the following format for pages: https://<username>.gitlab.com/<repository>

The default setup for a react app is that the page lives at / and hence the manifest.js would be available at /manifest.js. But now the page is at /<repository>. So when trying to download /manifest.js we actually just hit a gitlab auth wall at https://<username>.gitlab.com/manifest.js. The solution is adding "homepage": <repository> to package.json or adding your own domain to your Gitlab page

Answer 2

Had the same issue. Turned out homepage attribute in package.jsonwas containing incorrect site url.

You need to add this attribute (if not already) at the top of package.json, and make sure it is pointing to the gitlab pages url for your site.

{
   "homepage": "GITLAB_PAGES_URL",
   "name": "...",
   ...
}