this.context._documentProp is undefined while deploying #16867

sibasishm · 2020-09-05T10:17:06Z

sibasishm
Sep 5, 2020

I am importing {Head} from 'next/document' and extending it to add all the style tags generated by tailwind CSS as inline-styling in the head. It works fine locally but fails with the error message Cannot destructure property 'assetPrefix' of 'this.context._documentProps' as it is undefined. during deployment.

Here is my build log:

15:40:20.027  	[4/4] Building fresh packages...
15:40:20.650  	success Saved lockfile.
15:40:20.654  	Done in 16.68s.
15:40:20.683  	Running "yarn run build"
15:40:20.959  	yarn run v1.22.4
15:40:20.994  	$ next build
15:40:21.679  	info  - Creating an optimized production build...
15:40:21.741  	Attention: Next.js now collects completely anonymous telemetry regarding usage.
15:40:21.741  	This information is used to shape Next.js' roadmap and prioritize features.
15:40:21.741  	You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
15:40:21.741  	https://nextjs.org/telemetry
15:40:22.996  	info  - Using external babel configuration from /vercel/29e23898/.babelrc
15:40:24.380  	risk - There are upcoming breaking changes: purgeLayersByDefault
15:40:24.380  	risk - We highly recommend opting-in to these changes now to simplify upgrading Tailwind in the future.
15:40:24.380  	risk - https://tailwindcss.com/docs/upcoming-changes
15:40:38.894  	info  - Compiled successfully
15:40:38.894  	info  - Collecting page data...
15:40:39.177  	info  - Generating static pages (0/2)
15:40:39.373  	Unhandled error during request: TypeError: Cannot destructure property 'assetPrefix' of 'this.context._documentProps' as it is undefined.
15:40:39.373  	    at InlineStylesHead.__getInlineStyles (/vercel/29e23898/.next/serverless/pages/404.js:741:7)
15:40:39.374  	    at InlineStylesHead.getCssLinks (/vercel/29e23898/.next/serverless/pages/404.js:736:17)
15:40:39.374  	    at InlineStylesHead.render (/vercel/29e23898/.next/serverless/pages/404.js:1554:35)
15:40:39.374  	    at d (/vercel/29e23898/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:38:231)
15:40:39.374  	    at $a (/vercel/29e23898/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:39:16)
15:40:39.374  	    at a.b.render (/vercel/29e23898/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:44:476)
15:40:39.374  	    at a.b.read (/vercel/29e23898/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:44:18)
15:40:39.374  	    at renderToStaticMarkup (/vercel/29e23898/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:54:462)
15:40:39.374  	    at renderDocument (/vercel/29e23898/node_modules/next/dist/next-server/server/render.js:3:640)
15:40:39.374  	    at renderToHTML (/vercel/29e23898/node_modules/next/dist/next-server/server/render.js:52:103)
15:40:39.374  	Error occurred prerendering page "/404". Read more: https://err.sh/next.js/prerender-error
15:40:39.374  	TypeError: Cannot destructure property 'assetPrefix' of 'this.context._documentProps' as it is undefined.
15:40:39.374  	    at InlineStylesHead.__getInlineStyles (/vercel/29e23898/.next/serverless/pages/404.js:741:7)
15:40:39.374  	    at InlineStylesHead.getCssLinks (/vercel/29e23898/.next/serverless/pages/404.js:736:17)
15:40:39.374  	    at InlineStylesHead.render (/vercel/29e23898/.next/serverless/pages/404.js:1554:35)
15:40:39.374  	    at d (/vercel/29e23898/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:38:231)
15:40:39.374  	    at $a (/vercel/29e23898/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:39:16)
15:40:39.374  	    at a.b.render (/vercel/29e23898/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:44:476)
15:40:39.374  	    at a.b.read (/vercel/29e23898/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:44:18)
15:40:39.374  	    at renderToStaticMarkup (/vercel/29e23898/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:54:462)
15:40:39.374  	    at renderDocument (/vercel/29e23898/node_modules/next/dist/next-server/server/render.js:3:640)
15:40:39.374  	    at renderToHTML (/vercel/29e23898/node_modules/next/dist/next-server/server/render.js:52:103)
15:40:39.374  	info  - Generating static pages (1/2)
15:40:39.380  	Unhandled error during request: TypeError: Cannot destructure property 'assetPrefix' of 'this.context._documentProps' as it is undefined.
15:40:39.380  	    at InlineStylesHead.__getInlineStyles (/vercel/29e23898/.next/serverless/pages/index.js:741:7)
15:40:39.380  	    at InlineStylesHead.getCssLinks (/vercel/29e23898/.next/serverless/pages/index.js:736:17)
15:40:39.380  	    at InlineStylesHead.render (/vercel/29e23898/.next/serverless/pages/index.js:2009:35)
15:40:39.380  	    at d (/vercel/29e23898/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:38:231)
15:40:39.380  	    at $a (/vercel/29e23898/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:39:16)
15:40:39.380  	    at a.b.render (/vercel/29e23898/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:44:476)
15:40:39.381  	    at a.b.read (/vercel/29e23898/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:44:18)
15:40:39.381  	    at renderToStaticMarkup (/vercel/29e23898/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:54:462)
15:40:39.381  	    at renderDocument (/vercel/29e23898/node_modules/next/dist/next-server/server/render.js:3:640)
15:40:39.381  	    at renderToHTML (/vercel/29e23898/node_modules/next/dist/next-server/server/render.js:52:103)
15:40:39.381  	Error occurred prerendering page "/". Read more: https://err.sh/next.js/prerender-error
15:40:39.381  	TypeError: Cannot destructure property 'assetPrefix' of 'this.context._documentProps' as it is undefined.
15:40:39.381  	    at InlineStylesHead.__getInlineStyles (/vercel/29e23898/.next/serverless/pages/index.js:741:7)
15:40:39.381  	    at InlineStylesHead.getCssLinks (/vercel/29e23898/.next/serverless/pages/index.js:736:17)
15:40:39.381  	    at InlineStylesHead.render (/vercel/29e23898/.next/serverless/pages/index.js:2009:35)
15:40:39.381  	    at d (/vercel/29e23898/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:38:231)
15:40:39.381  	    at $a (/vercel/29e23898/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:39:16)
15:40:39.381  	    at a.b.render (/vercel/29e23898/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:44:476)
15:40:39.381  	    at a.b.read (/vercel/29e23898/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:44:18)
15:40:39.381  	    at renderToStaticMarkup (/vercel/29e23898/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:54:462)
15:40:39.381  	    at renderDocument (/vercel/29e23898/node_modules/next/dist/next-server/server/render.js:3:640)
15:40:39.381  	    at renderToHTML (/vercel/29e23898/node_modules/next/dist/next-server/server/render.js:52:103)
15:40:39.382  	> Build error occurred
15:40:39.382  	info  - Generating static pages (2/2)
15:40:39.383  	Error: Export encountered errors on following paths:
15:40:39.383  		/
15:40:39.383  		/404
15:40:39.383  	    at exportApp (/vercel/29e23898/node_modules/next/dist/export/index.js:24:1103)
15:40:39.383  	    at runMicrotasks (<anonymous>)
15:40:39.384  	    at processTicksAndRejections (internal/process/task_queues.js:97:5)
15:40:39.384  	    at async build (/vercel/29e23898/node_modules/next/dist/build/index.js:37:212)
15:40:39.425  	error Command failed with exit code 1.
15:40:39.426  	info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
15:40:39.436  	Error: Command "yarn run build" exited with 1
15:40:42.214  	Done with "package.json"

The error as indicated above is coming in the _document.js file but it works fine locally.

// eslint-disable-next-line max-classes-per-file
import * as fs from 'fs';
import * as path from 'path';

import Document, { Html, Head, Main, NextScript } from 'next/document';

class InlineStylesHead extends Head {
  getCssLinks() {
    return this.__getInlineStyles();
  }

  __getInlineStyles() {
    const { assetPrefix, files } = this.context._documentProps;

    if (!files || files.length === 0) return null;

    return files
      .filter((file) => /\.css$/u.test(file))
      .map((file) => (
        <style
          key={file}
          nonce={this.props.nonce}
          data-href={`${assetPrefix}/_next/${file}`}
          // eslint-disable-next-line react/no-danger
          dangerouslySetInnerHTML={{
            // eslint-disable-next-line no-sync
            __html: fs.readFileSync(path.join(process.cwd(), '.next', file), 'utf-8')
          }}
        />
      ));
  }
}

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);

    return { ...initialProps };
  }

  render() {
    return (
      <Html lang="en">
        <InlineStylesHead>
          <link
            rel="preload"
            href="/static/fonts/Jost-roman.var-latin.woff2"
            as="font"
            type="font/woff2"
            crossOrigin="true"
          />
          <meta content="IE=edge" httpEquiv="X-UA-Compatible" />
          <meta content="width=device-width, initial-scale=1" name="viewport" />
          <link
            rel="apple-touch-icon"
            sizes="180x180"
            href="/static/favicons/apple-touch-icon.png"
          />
          <link
            rel="icon"
            type="image/png"
            sizes="32x32"
            href="/static/favicons/favicon-32x32.png"
          />
          <link
            rel="icon"
            type="image/png"
            sizes="16x16"
            href="/static/favicons/favicon-16x16.png"
          />
          <link rel="manifest" href="/static/favicons/site.webmanifest" />
          <link rel="mask-icon" href="/static/favicons/safari-pinned-tab.svg" color="#0f141e" />
          <meta name="msapplication-TileColor" content="#ffc40d" />
          <meta name="theme-color" content="#ffffff" />
        </InlineStylesHead>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

chrishrtmn · 2020-09-16T12:09:28Z

chrishrtmn
Sep 16, 2020

Could be related, but I had to remove 'purgeLayersByDefault' from tailwind.config.js in order for production to work (when local was working fine).

0 replies

deadcoder0904 · 2020-09-16T13:44:39Z

deadcoder0904
Sep 16, 2020

Try this.context instead of this.context._documentProps. It worked for the newer version for assetPrefix but didn't work for files :(

For more info → #16162 & #16784

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

this.context._documentProp is undefined while deploying #16867

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

this.context._documentProp is undefined while deploying #16867

Uh oh!

Uh oh!

sibasishm Sep 5, 2020

Replies: 2 comments

Uh oh!

chrishrtmn Sep 16, 2020

Uh oh!

deadcoder0904 Sep 16, 2020

sibasishm
Sep 5, 2020

chrishrtmn
Sep 16, 2020

deadcoder0904
Sep 16, 2020