Search code examples
typescriptnext.jsbabeljstailwind-cssstyled-components

Nextjs error only on production build, using styled components, tailwind, and twin

When I build my application in development mode, everything is fine. However if I do a production build I get the following error on the image.

enter image description here

I assume its the _document.tsx component somehow, but I have no idea about the reason. On github I have seen a recommendation to turn off swcMinify, but it doesn't help. Babel is being used with .babelrc instead of the next compiler.

Stack is: Next.js(typescript), tailwind, emotion, styled-components, twin.macro.

Anybody has any idea on what the issue might be?

_document.tsx

import { extractCritical } from "@emotion/server"
import Document, { Head, Html, Main, NextScript } from "next/document"
import React from "react"

export default class MyDocument extends Document {
  static async getInitialProps(ctx: any) {
    const initialProps = await Document.getInitialProps(ctx)
    const critical = extractCritical(initialProps.html)
    initialProps.html = critical.html
    initialProps.styles = (
      <React.Fragment>
        {initialProps.styles}
        <style
          data-emotion-css={critical.ids.join(" ")}
          dangerouslySetInnerHTML={{ __html: critical.css }}
        />
      </React.Fragment>
    )

    return initialProps
  }

  render() {
    return (
      <Html lang="en">
        <Head>
          <meta name="viewport" content="width=device-width,initial-scale=1" />
          <link rel="preconnect" href="https://fonts.googleapis.com" />
          <link
            rel="preconnect"
            href="https://fonts.gstatic.com"
            crossOrigin="true"
          />
          <link
            href="https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;600;700&display=swap"
            rel="stylesheet"
          />
          <link rel="shortcut icon" href="/images/icons/nsorcell.svg" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

next-config.js

/** @type {import('next').NextConfig} */

const { i18n } = require("./next-i18next.config")

const nextConfig = {
  reactStrictMode: true,
  swcMinify: false,
  i18n,
  env: {
    ALCHEMY_RPC_MAINNET: process.env.ALCHEMY_RPC_MAINNET,
    ALCHEMY_RPC_GOERLI: process.env.ALCHEMY_RPC_GOERLI,
    ALCHEMY_RPC_POLYGON_MAINNET: process.env.ALCHEMY_RPC_POLYGON_MAINNET,
    ALCHEMY_RPC_MUMBAI: process.env.ALCHEMY_RPC_MUMBAI,
  },
}

module.exports = nextConfig

.babelrc

{
  "presets": [
    [
      "next/babel",
      {
        "preset-react": {
          "runtime": "automatic",
          "importSource": "@emotion/react"
        }
      }
    ]
  ],
  "plugins": [
    ["styled-components", { "ssr": true }],
    "@emotion/babel-plugin",
    "babel-plugin-macros"
  ]
}
Solution

  • Alright. It turns out, that I had my own package on npm, and I basically forgot to add typechain dependencies. Which is not a huge problem, since my project install ethers and @ethersproject/providers but not @ethersproject/abi which was the missing package and seemingly the problem.