hello-klol
hello-klol

Reputation: 745

Export static NextJS App `TypeError: Cannot read property '/404' of undefined`

I've tried a couple of times to start a NextJS project from scratch using the quickstart method npx create-next-app and follow the isntructions outlined in the tutorial example https://nextjs.org/learn/excel/static-html-export/setup. I want to create a static HTML site.

I add the build and export jobs to the scripts tag in package.json:

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "export": "next export",
    "start": "next start"
  },

And create a next.config.js file from the example:

const fetch = require('isomorphic-unfetch');

module.exports = {
  exportPathMap: async function() {
    const paths = {
      '/': { page: '/' }
    };
  }
};

The build runs fine but when I try to run export I get the following error:

TypeError: Cannot read property '/404' of undefined
    at _default (~/Workspace/BlogNextJS/my-blog/node_modules/next/dist/export/index.js:10:202)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] export: `next export`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] export script.

This doesn't happen when I used the example project from the tutorial (https://github.com/zeit/next-learn-demo.git)

Can anyone tell me what might be going on or give pointers on what to look at?

Further information from the logs looks like this but I don't know much about what it means:

6 info lifecycle [email protected]~export: [email protected]
7 verbose lifecycle [email protected]~export: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~export: PATH: /home/klol/.nvm/versions/node/v12.12.0/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/klol/Workspace/BlogNextJS/my-blog/node_modules/.bin:/home/klol/.nvm/versions/node/v12.12.0/bin:/home/klol/anaconda3/bin:/home/klol/anaconda3/condabin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin
9 verbose lifecycle [email protected]~export: CWD: /home/klol/Workspace/BlogNextJS/my-blog
10 silly lifecycle [email protected]~export: Args: [ '-c', 'next export' ]
11 silly lifecycle [email protected]~export: Returned: code: 1  signal: null
12 info lifecycle [email protected]~export: Failed to exec export script
13 verbose stack Error: [email protected] export: `next export`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/home/klol/.nvm/versions/node/v12.12.0/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:210:5)
13 verbose stack     at ChildProcess.<anonymous> (/home/klol/.nvm/versions/node/v12.12.0/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:210:5)
13 verbose stack     at maybeClose (internal/child_process.js:1021:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)
14 verbose pkgid [email protected]
15 verbose cwd /home/klol/Workspace/BlogNextJS/my-blog
16 verbose Linux 5.0.0-31-generic
17 verbose argv "/home/klol/.nvm/versions/node/v12.12.0/bin/node" "/home/klol/.nvm/versions/node/v12.12.0/bin/npm" "run" "export"

Upvotes: 4

Views: 7158

Answers (1)

hello-klol
hello-klol

Reputation: 745

I had altered the module.exports code and failed to return the paths object I had created. The file next.config.js should look like this:

module.exports = {
  exportPathMap: async function() {
    const paths = {
      '/': { page: '/' }
    };
    return paths; //<--this was missing previously
  }
};

Upvotes: 5

Related Questions