Creé un Next (versión: 12.0.7 ) con Typescript y Storybook. Puedo build e start el servidor, sin embargo, el dev falla una vez que hago una solicitud y escupe este mensaje:
Navegador:
Uncaught ReferenceError: __webpack_require__ is not definedBackend: ningún mensaje de error
Estoy usando Chakra UI, next-i18next y next-auth.
Reproducir error
npx create-next-app@latest --tsexports is not defined . Usando este truco puedes crear un _document.tsx personalizado con este contenido: 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 MyDocumentyarn run devEstaba teniendo un problema similar donde el next dev registraría:
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)Pero al intentar acceder al sitio desde Chrome o cualquier otro navegador, no pasaba nada, simplemente se atascaba cargando para siempre.
Resulta que el problema fue causado por la VPN que estaba usando (CyberGhost). Después de desactivarlo, todo volvió a funcionar.
¡ENCONTRADO AL ALborotador!
Cuando abrí el sitio en Chrome (que personalmente no uso, por lo que no tiene ninguna extensión instalada), el sitio funcionó a la perfección. Después de investigar un poco, descubrí que mi Anti-Ad-Blocker era el alborotador. ¡Deshabilitarlo finalmente resolvió este error!