'inAmpMode' of '(0 , _react).useContext(...)' as it is null.

[borachoidev]

After migrate nextjs 12 I got error when run project.
I don't know why this error occured .... 😭

2021-10-29T07:07:33.538Z	1c7003b2-3f04-407b-b1e6-fabf99ed1f8a	ERROR	TypeError: Cannot destructure property 'inAmpMode' of '(0 , _react).useContext(...)' as it is null.
    at Html (/var/task/packages/web/.next/server/chunks/6859.js:624:5)
    at d (/var/task/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:33:498)
    at bb (/var/task/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:16)
    at a.b.render (/var/task/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:42:43)
    at a.b.read (/var/task/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:83)
    at Object.exports.renderToStaticMarkup (/var/task/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:51:446)
    at Object.renderToHTML (/var/task/node_modules/next/dist/server/render.js:739:41)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async doRender (/var/task/node_modules/next/dist/server/next-server.js:1392:38)
    at async /var/task/node_modules/next/dist/server/next-server.js:1487:28
2021-10-29T07:07:33.539Z	1c7003b2-3f04-407b-b1e6-fabf99ed1f8a	ERROR	TypeError: Cannot destructure property 'inAmpMode' of '(0 , _react).useContext(...)' as it is null.
    at Html (/var/task/packages/web/.next/server/chunks/6859.js:624:5)
    at d (/var/task/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:33:498)
    at bb (/var/task/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:16)
    at a.b.render (/var/task/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:42:43)
    at a.b.read (/var/task/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:83)
    at Object.exports.renderToStaticMarkup (/var/task/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:51:446)
    at Object.renderToHTML (/var/task/node_modules/next/dist/server/render.js:739:41)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async doRender (/var/task/node_modules/next/dist/server/next-server.js:1392:38)
    at async /var/task/node_modules/next/dist/server/next-server.js:1487:28 {
  page: '/'
}
RequestId: 1c7003b2-3f04-407b-b1e6-fabf99ed1f8a Error: Runtime exited with error: exit status 1
Runtime.ExitError

[rburgst]

same problem here, any updates?

[borachoidev]

I resolved it ! I just remove yarn-lock, package-lock and reinstall.

[robotic-forest]

facing same issue, removing yarn-lock didn't work.

[borachoidev]

plus ) I also removed .next folder

[restobrill]

PLUS ULTRA, this works

[sahilshahane]

Package manager : Yarn v3.1.0
Yarn's configuration - nodeLinker: pnpm

I am facing same issue. Tried removing yarn.lock and reinstalling but issue remains.

The only solution i found was to change nodeLinker to node_modules

[muhad-bk]

pnpm not working with keystone, use npm or yarn

[rburgst]

Yarn with pnp does not work either

[conoremclaughlin]

Did anyone ever figure out how to fix this? Still having the same issue with Next 13.4.x - it's a bummer that the behavior between the dev and production builds is so inconsistent when it comes to package resolution and testing.

[cherepanov]

got this error when accidentally turned on transpiling of next/dist

[adamrneary]

We are seeing this issue currently. Would it make sense to convert this to an Issue? I wonder if others are encountering it, as well.

[dennisroethig]

Same here, just ran into this trying to upgrade from v10 to v11 ... any insights in how to resolve it would be great (tried all of the above. Also sidenote, it seems to happen only running dev mode, the build passes fine and the page renders/works after that 😕

[sunniejai]

I just downgraded from 12.0.7 to 12.0.4 and the error seemed to go away. I was experiencing this running next build, next dev was working just fine. Hope tha thelps!

[proko]

People still having the issue: Do you have a custom _document ?
I had not and after adding the default one from here the problem went away.
I was upgrading from 10 to 12.

[adaOctopus]

Hey! Your solution is the only one that made the error go away. But, my app now is rendered completely blank. Do i need to add something into my _app.js file as well? Cause simply adding _document.js as shown in the link you shared, makes the error go away, but also the app disappears

[tateana]

In my case upgrading of the plugin next-transpile-modules to the compatible version solved the problem
https://www.npmjs.com/package/next-transpile-modules#compatibility-table

[gurtajkhatra]

I'm seeing the same issue on Next 12.0.4.

next dev works fine, but running a production build using next start give me the TypeError: Cannot destructure property 'inAmpMode' of '(0 , _react).useContext(...)' as it is null. error.

I've noticed this only happens for pages where I have a getServerSideProps function defined.

[zargold]

was there ever a solution?

[nandorojo]

This happened to me when I used next-transpile-modules v9 with next@11.x. Downgrading next-transpile-modules to v8 fixed it.

[nicolascarratala]

This happened to me when I used Html tag --------> { Html } from 'next/document';

[thomasgauvin]

I also encountered this. The problem was that I was importing Html in _app.js. Creating a new _document.js, and making any changes to Html there worked. https://nextjs.org/docs/pages/building-your-application/routing/custom-document

[dmitrizzle]

I had this issue when I added next to list of modules up for transformation with next-transpile-modules. Removing next from the list fixed the issue.

const withTM = require("next-transpile-modules")([
  "pdfobject",
  "next-pwa",
-  "next",
]);

[yuzhouu]

This issue is probably related to your project has multiple next.js installed.

In my case, I separate next server to an independent package, and use pnpm as package manager. So there is two next.js in my project (they are soft linked to root node_modules)

1. The sever import it's next.js from it's own node_modules,
2. The generated .next use next.js from client package.

so multiple instance of HtmlContext exits, then the useContext(HtmlContext) in _document is always null.

solution

In server's code, import next from 'path-to-you-client/node_modules/next '

[hnkolasu]

hey, you wrote moudles instead of modules!

[n1ght-k1ng]

Using an express server, where should we exactly add the line

[adaOctopus]

Can someone where are we meant to add this import in the server code? What server code? Im having a NextJS project, which part is it meant to be the server code?

[zargold]

From my experience (yarn v3.2.2 with workspaces (5 packages using Next.js)) it was enough to upgrade all the Next.js packages at the same time to the same version. In other words could not have conflicting versions of Next.js

[erango]

It can happen if you work with two package managers and forget which one installed your node_modules so you do it with both 😅

[muhamad-rizki]

maybe this documentation can help if you need to use Html component, in my case I need to put some props to Html tag, I tried to put Html component on my index page and ended up with this error, after following the docs everything seems fine 🎉

[easy-why-not]

This answer helped me. Thank you!!

[Ali-hd]

Issue happened to me when I imported Head from 'next/document' instead of 'next/head'
check you imports

I'd love if the code actually tells you whats wrong

[pie6k]

Finally solved it, tho I don't fully understand it. (none of above worked for me, tho they helped)

(next: 12.3.1, next-transpile-modules 9.1.0)

TLDR: in monorepo (yarn) -> make sure 'next' is a dependency of the root package.json and 'only' peerDependency of package that uses it

---

I am using monorepo (yarn workspaces)

I use transpile modules as my sub-modules are written in typescript

I had next dependency defined in my web package (as it was the only one using it).

I modified it to make next dependency in <ROOT>/package.json and then add it as peerDependency in <ROOT>/web/package.json.

It started to work, but I wanted to understand why. (spoiler: only partially understood it)

I found out that web/.next/server/pages/_document.js is compiled differently for 2 configurations I described above.

If next was direct dependency of web it was way bigger, having a lot of 'bundled' JS strings.

If it was peer dep and dep of ROOT - it was shorter.

Both versions included something like:

/***/ }),

/***/ "./node_modules/next/dist/pages/_document.js":
/*!***************************************************!*\
  !*** ./node_modules/next/dist/pages/_document.js ***!
  \***************************************************/
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

eval("\nObject.defineProperty

So as I don't fully understand it - here is my take:

For some transpiling reason, import dependency tree was different - resulting in duplicates of modules in <root>/web/.next and <root>/web/node_modules/next. As a result - in some cases, depending on where something was imported from - different 'tree' was triggered, resulting in the same module having 2 instances. -> thus react context could have different value or no value at all depending on 'which module is asking' and 'which module did trigger setting it up'

What I also did during debugging was adding console.log at root level of node_modules/next/dist/server/pages/_document.js to see how many times module was initialized (and clearing .next cache after each change). And it was indeed happening more than once while I had the error.

Tricky part about this error is that error message is extremely confusing.

Hope it helps someone.

[eezing]

Received this error when upgrading from 12.3.2 to 13.0.2. Issue was resolved by rebuilding the package-lock.json in our monorepo.

[josphat-mwangi]

The Main tag is an example of a multi-instance in which one should be careful with the letter casing. The solution here is removing the Main importation and changing the tag Main to lowercase main

[patrick-kw-chiu]

For me, I received the inAmpMode error in version 13.0.4 too, and the error is gone after upgrading to version 13.1.6

[sherghan7]

I switched from yarn to npm . it solved it for me

[sirtawast]

Monorepo with docker / yarn v1 / lerna v4 here. I had to remove all node_modules/ locally from each app, then rebuild the docker containers, wait until finished and then install local dev tools with yarn.

[martindrq]

For npm users, I ran:
npm dedupe
and the problem was resolved.