Question

我在DEV env上运行了一个可运行的应用程序，但是当我尝试导出它（npm run build && next export）时，Nextjs向我抛出此错误`错误：默认导出不是页面中的React组件：“ / Home / styles”，其中styles是包含某些样式组件的组件的文件。

这是我的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;
  }
`;

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

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

Answer 1

我发现我的应用程序在n except JWTForbiddenError as error: bottle.response.content_type = b('application/json') bottle.response._status_line = b('403 Forbidden') return {"AuthError": error.args}文件中没有exportPathMap方法。我添加了一个，一切开始按预期工作。

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

1 个答案: