NextJs - 导出使用样式组件的应用程序时出错

Question

我在 DEV env 上有一个工作应用程序运行，但是当我尝试导出它时 (npm run build && next export)，Nextjs 向我抛出这个错误`错误：默认导出不是 React 组件在页面中：“/Home/styles”，其中 styles 是一个包含一些 styled-components 组件的文件。

这是我的 babelrc 文件：

{
  "presets": [["next/babel", {
    "preset-env": {
      "targets": {
        "ie": "11"
      }
    }
  }]],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    [
      "babel-plugin-styled-components",
      {
        "ssr": true,
        "displayName": true,
        "preprocess": false
      }
    ],
    ["minify-dead-code-elimination", { "optimizeRawSize": true }],
    ["@babel/plugin-transform-runtime", {
      "corejs": 2,
      "helpers": true,
      "regenerator": true,
      "useESModules": false
    }],
    [
      "module-resolver",
      {
        "cwd": "babelrc",
        "root": ["./"],
        "extensions": [".jsx", ".js"],
        "alias": {
          "images": "./public/assets/images"
        }
      }
    ]
  ],
  "env": {
    "production": {
      "plugins": ["transform-remove-console"],
    },
    "development": {
      "plugins": ["@babel/transform-react-jsx-source"]
    }
  }
}

我的 _document.js 文件：

import React from 'react';
import Document, { Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';

export default class MyDocument extends Document {
  static getInitialProps({ renderPage }) {
    const sheet = new ServerStyleSheet();

    // Returns an object like: { html, head, errorHtml, chunks, styles }
    const page = renderPage(App => props => sheet.collectStyles(<App {...props} />));

    const styleTags = sheet.getStyleElement();

    return { ...page, styleTags };
  }

  render() {
    return (
      <html lang="pt-BR">
        <Head>
          ...
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

NextJs 抱怨的文件。

import styled from 'styled-components';
import { primary, secondary } from 'Styles/colors';
import * as breakpoints from 'Styles/breakpoints';

function hexToRGB(hex, alpha) {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);

  if (alpha) {
    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
  }

  return `rgb(${r}, ${g}, ${b}`;
}

// background-color: ${primary};
export const Background = styled.div`
  background: transparent url("static/assets/images/animated-bg.gif") no-repeat 0 0;
  background-size: 100%;
  background-attachment: fixed;

  @media (max-width: ${breakpoints.desktop}) {
    min-height: 140vh;
    background-size: auto 100%;
  }

  @media (max-width: ${breakpoints.tablet}) {
    min-height: 75vh;
  }
`;

我尝试导出 returns 组件的函数，但出现另一个错误：Objects are not valid as a React child (found: object with keys {Background}).

那么，如何使用样式化组件使我的应用按预期导出？任何帮助都会很棒。

Answer 1

我认为我的应用程序在 next.config.js 文件中没有 exportPathMap 方法。我添加了一个，一切都开始按预期工作。

NextJs - 导出使用样式组件的应用程序时出错

NextJs - Error exporting app that uses styled-components

export

reactjs

styled-components

next.js