Export a react / next.js website failed

Support
1

Hi,

I am trying to publish my first website through your platform;

It is a react next js app, connected to my private github repo properly; I am using the npm run export that works fine locally; but I get the following error when I try to deploy to netlify:

5:20:20 PM: Executing user command: npm run export
5:20:20 PM: > website-name@1.0.0 export /opt/build/repo
5:20:20 PM: > next export
5:20:21 PM: > using build directory: /opt/build/repo/.next
5:20:21 PM: { Error: ENOENT: no such file or directory, open '/opt/build/repo/.next/BUILD_ID'
5:20:21 PM:     at Object.openSync (fs.js:443:3)
5:20:21 PM:     at readFileSync (fs.js:343:35)
5:20:21 PM:     at _default (/opt/build/repo/node_modules/next/dist/export/index.js:1:3652)
5:20:21 PM:   errno: -2,
5:20:21 PM:   syscall: 'open',
5:20:21 PM:   code: 'ENOENT',
5:20:21 PM:   path: '/opt/build/repo/.next/BUILD_ID' }
5:20:21 PM: npm

My next.config.js file is as follow:

const withPlugins = require('next-compose-plugins');
const withOptimizedImages = require('next-optimized-images');
const withFonts = require('next-fonts');
const withCSS = require('@zeit/next-css');
const withOffline = require("next-offline");

const nextConfig = {
    target: "serverless",
    workboxOpts: {
      swDest: "static/service-worker.js",
      runtimeCaching: [
        {
          urlPattern: /^https?.*/,
          handler: "networkFirst",
          options: {
            cacheName: "https-calls",
            networkTimeoutSeconds: 15,
            expiration: {
              maxEntries: 150,
              maxAgeSeconds: 30 * 24 * 60 * 60 // 1 month
            },
            cacheableResponse: {
              statuses: [0, 200]
            }
          }
        }
      ]
    }
  };

module.exports = withPlugins(
    [
        [
            withOptimizedImages,
            {
                mozjpeg: {
                    quality: 90,
                },
                webp: {
                    preset: 'default',
                    quality: 90,
                },
            },
        ],
        withFonts,
        withCSS
    ],
    withOffline(nextConfig)
);

Did I miss anything?
Thank you so much in advance for your help :slight_smile:

2

hey there, what are your build settings? I am wondering if having the dot in the foldername .next is causing some problems.

3

Hi Perry,

Thank you for taking the time to look into my issue.

My build settings in netlify are:

build command: npm run export
Publish directory: out

Here is the script part in my package.json:

"scripts": {

    "build": "next build",

    "dev": "next dev",

    "start": "next start",

    "export": "next export",

    "deploy": "npm run build && npm run export"

  },

As for the dot in “.next” folder, this is the norm with next.js, its folder always has it.

Please let me know if you need anything else,
Thank you!

4

Hey @pierroo, is it possible that you have an environment variable hard-coded? The error to me looks like Netlify’s build environment can’t find this directory: '/opt/build/repo/.next/BUILD_ID', where I’m guessing BUILD_ID is supposed to be a constant. You could either set that in the Netlify UI here:

and then access it with process.env.BUILD_ID.

Or it looks like you can do it in your next.config:

Want to try that and let us know if it fixes things for you?

5

I realize I am waaaaay too late with this response, but I just had the same issue and I figured it out, so this might help someone:

So, in order to run next export, you first have to do a next build. this creates the .next folder which gets exported.

In your specific case you already have a good deploy command, which first does the build and then the export, so just change your netlify settings to do npm run deploy instead of npm run export

1 Like