Just finished creating a brand new Next app (version: 12.0.7) using Typescript and Storybook. Everything seems to be working fine - I can successfully build and start the server. However, when I try to run dev mode and make a request, I encounter the following error in the browser:
Error in Browser:
Uncaught ReferenceError: __webpack_require__ is not defined
No error messages in the backend.
The libraries I'm using include Chakra UI, next-i18next, and next-auth.
To Reproduce the Error:
- Start by creating a new Next app with typescript using this command:
npx create-next-app@latest --ts - Once you've created the app, you may encounter an error stating
exports is not defined. To work around this issue, you can follow the solution provided in this StackOverflow thread. Create a custom_document.tsxfile with the code snippet below:
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
- Run
yarn run dev - Visit http://localhost:3000/
- Check the console for any errors