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

Viewed 858

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

1 Answers

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": "...",
   ...
} 
Related