Next.js: Cannot read property 'replace' of undefined when running Bitbucket Pipelines

[SylarRuby]

Bug report

Describe the bug

Build fails when creating an artifact in Bitbucket using the node image: node:10.16.3.

The pipeline yaml used:

pipelines:
    branches:
        master:
            - step:
                # Prepare a dist artifact on every commit to master
                name: Prepare a deployment artifact
                deployment: test
                image: node:10.16.3
                caches:
                    - node
                artifacts:
                    - dist/**
                script:
                    - mkdir -p dist/
                    - yarn install --frozen-lockfile --production
                    # Disable warnings as errors with CI=false
                    - CI=false yarn build
                    - mv node_modules dist/
                    - mv .next dist/
                    - mv next.config.js dist/
                    - mv eco.config.js dist/
                    - mv package.json dist/
                    - mv server.js dist/
                    # NGINX configurations
                    - mv nginx dist/

Running a local yarn build succeeds but not when on pipelines. The error points me to assetPrefix:nextConfig.assetPrefix.replace(/\/$/,'') which I found on line 13*

*The error I got:

TypeError: Cannot read property 'replace' of undefined
    at _default (/opt/atlassian/pipelines/agent/build/node_modules/next/dist/export/index.js:13:82)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

My next.config.js file:

const sass = require('@zeit/next-sass')
const css = require('@zeit/next-css')
const withPlugins = require("next-compose-plugins")
const path = require('path')
require('next-images')
require('dotenv').config()

const nextConfig = {
  assetPrefix: process.env.NODE_ENV === 'production' ? process.env.HOST : "/",
  publicRuntimeConfig: { 
    staticFolder: process.env.NODE_ENV === 'production' ? process.env.HOST : "/"
  },

  /**
   * Environment for client which will be available at built time.
   */
  env: {
    API_HOST: process.env.API_HOST
  },

  webpack(config) {
    config.resolve.alias['components'] = path.join(__dirname, 'components')
    config.resolve.alias['layouts'] = path.join(__dirname, 'layouts')
    config.resolve.alias['assets'] = path.join(__dirname, 'assets')

    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });

    return config;
  }
}

//https://github.com/zeit/next-plugins/issues/266#issuecomment-474721942
module.exports = withPlugins([
  [sass],
  [css, { cssModules: false, url: false }]
], nextConfig);

Next.js version: 9.1.5

Thanks.

[SylarRuby]

My bad. assetPrefix should be a path and not a url 😅

[SylarRuby]

I need to reopen this as there should not be an issue with assetPrefix being a url. When I set assetPrefix to a url, I get this error at build time. Why?

[Shinyaigeek]

Could it be possible that .env file in remote repository is different from that in your local environment ?

[timneutkens]

Opened a PR to show a better error message here: https://github.com/zeit/next.js/pull/9759

The issue is that you're providing undefined as the environment variable is probably not set.

[SylarRuby]

You are correct. How stupid of me. There is not a .env file during the pipeline build lol So doing this, in Bitbucket, solves it:

[...]
 - echo -e "HOST=${QA_HOST}\n" >> .env
[...]