Created a Next (version: 12.0.7) with Typescript and Storybook. I can build and start the server, however, dev fails once I make a request and spits out this message:
Browser:
Uncaught ReferenceError: __webpack_require__ is not defined
Backend: No error message
I'm using Chakra UI, next-i18next and next-auth.
Reproduce error
npx create-next-app@latest --tsexports is not defined. Using this hack you can create a custom _document.tsx with this content:import Document, {
Html,
Head,
Main,
NextScript,
DocumentContext,
} from "next/document"
class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const initialProps = await Document.getInitialProps(ctx)
return {...initialProps}
}
render() {
return (
<Html>
<Head />
<body>
<Main />
<script>var exports = {"{}"};</script>
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
yarn run devI was having a similar issue where next dev would log:
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info - Loaded env from /.../.env
event - compiled client and server successfully in 6.4s (2106 modules)
But when trying to access the site from Chrome or any other browser, nothing would happen, it would just get stuck loading forever.
It turns out the issue was cause by the VPN I was using (CyberGhost). After disabling it, everything worked again.
FOUND THE TROUBLEMAKER!
When I opened the site in Chrome (which I personally don't use and so it doesn't have any extensions installed), the site worked flawlessly. After some digging, I found out that my Anti-Ad-Blocker was the troublemaker. Disabling it finally solved this error!