Next.js: `_document.js not exporting React element` after upgrading to v5.0

Created on 9 Feb 2018 · 20Comments · Source: vercel/next.js

[x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

No errors

Current Behavior

After upgrading to Next v5 and React v16.2, I am getting this error when trying to build my project:
Error: _document.js is not exporting a React element

Here is what my _document.js looks like. The only thing that differs from the normal _document is that I'm using styled-components.

import Document, { Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';

export default class _Document extends Document {
  static getInitialProps({ renderPage }) {
    const sheet = new ServerStyleSheet();
    const page = renderPage(App => props => sheet.collectStyles(<App {...props} />));
    const styleTag = sheet.getStyleElement();
    return { ...page, styleTag };
  }

  render() {
    return (
      <html lang="en">
        <Head>
          {this.props.styleTag}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

My .babelrc:

{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    "transform-decorators-legacy",
    [
      "inline-react-svg",
      {
        "svgo": {
          "plugins": [
            {
              "removeAttrs": {
                "attrs": "(data-name)"
              }
            },
            {
              "cleanupIDs": false
            }
          ]
        }
      }
    ],
    [
      "styled-components",
      {
        "ssr": true,
        "displayName": true,
        "preprocess": false
      }
    ],
    [
      "transform-assets-import-to-string",
      {
        "baseDir": "static",
        "baseUri": "/"
      }
    ],
  ],
}

My next.config.js:

const path = require('path');
const VersionFile = require('webpack-version-file');

module.exports = {
  webpack(config, { buildId, dev }) {
    config = addBuildVersioning(config);
    return config;
  },
};

function addBuildVersioning(config) {
  config.plugins.push(new VersionFile({
    output: path.join('./server', 'version.json'),
    templateString: `{
  "name": "<% name %>",
  "version": "<%= version %>",
  "buildDate": "<%= buildDate %>"
}`,
  }));

  return config;
}

Anyone have any idea what may be causing this? Google doesn't come up with much about this error.

Thanks!

Source

dargue3

👍2

Most helpful comment

I very much wonder if anyone actually read:

could you put it into a repository, so I can have a quick look 👍

Please always provide a repository instead of +1 or I've also got the issue - these are impossible to debug as you can understand.

timneutkens on 1 Mar 2018

👍2

All 20 comments

I had the same issue too. I think this was caused by conflicts between your babel custom config and next5's webpack, try adding this to your .babelrc presets config:

...
["env", {
  "modules": false
}],
...

tuanna1601 on 12 Feb 2018

You should never add preset-env yourself, it's already included in next, and configurable on next/babel 👍

timneutkens on 12 Feb 2018

👍2

@dargue3 Did you end up figuring out the cause of this. I'm seeing the same thing.

andrewreedy on 25 Feb 2018

@andrewreedy No I did not, I just haven't attempting upgrading yet. Didn't want to step on @timneutkens 's shoes but I'm not sure this issue is resolved.

I've edited my original post to include my .babelrc and next.config.js incase that could be part of the problem

dargue3 on 26 Feb 2018

@dargue3 could you put it into a repository, so I can have a quick look 👍

timneutkens on 26 Feb 2018

alerg on 27 Feb 2018

For me it turns out it was Typescript using esnext modules and I had to change it to commonjs.

andrewreedy on 27 Feb 2018

I've got the same, is there any fix?

tgdn on 28 Feb 2018

I very much wonder if anyone actually read:

could you put it into a repository, so I can have a quick look 👍

Please always provide a repository instead of +1 or I've also got the issue - these are impossible to debug as you can understand.

timneutkens on 1 Mar 2018

👍2

Fixed it using example at https://github.com/zeit/next.js/blob/canary/examples/custom-server-typescript/

Thank you a lot @timneutkens though

tgdn on 1 Mar 2018

@tgdn I'm confused as to what the issue was then 😄 could you expand 🙏

timneutkens on 1 Mar 2018

👍1

To be honest I am not entirely sure. The issue appeared when I updated to Next@5. My previous TypeScript config did not work with it, once I started using next-plugins, specifically @zeit/next-typescript, the issue disappeared.
I was previously using a config similar to https://github.com/zeit/next.js/blob/bda073cfc1a79aa4ff5711183f6dfd3ef74bbca8/examples/with-typescript/package.json

tgdn on 2 Mar 2018

I have the same issue. Do you happen to have webpack installed in dev?

When upgraded to next5 and running a custom server leads to this error:

Error: Cannot find module 'webpack/lib/RequestShortener'

I then install webpack: npm install --save-dev webpack

which then, in turn leads to this error.

dillonraphael on 4 Mar 2018

I regret to say that after attempting another upgrade to v5, I could not replicate this error again... everything worked just fine. I can't really give you a diff of everything I've changed, but it does not seem to be anything within the actual _document.js file.

dargue3 on 5 Mar 2018

So in short:

rm -rf node_modules && rm package-lock.json && rm yarn.lock && yarn add next@latest react@latest react-dom@latest

To be sure:

All babel cache is flushed
You're on the latest version of Next.js
You're on the latest version of React

At the moment I would recommend upgrading to next@canary instead of latest, 5.1 coming soon 👍

timneutkens on 5 Mar 2018

👍1

Got the same thing, clearing things out as above did not fix but next@canary did.

OutThisLife on 13 Mar 2018

Going to close this 👍

timneutkens on 14 Mar 2018

In case anyone else comes across this, I also encountered the same error message. For me, the cause was from incorrectly importing from next rather than next/document.