代码之家 › 专栏 › 技术社区 › darksoulsong

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

next.js styled-components export reactjs

darksoulsong · 技术社区 · 7 年前

npm run build && next export ),Nextjs抛出此错误`error:默认导出不是页面“/Home/styles”中的React组件,其中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"]
    }
  }
}

My_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}).

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

1 回复 | 直到 7 年前

darksoulsong 7 年前

我想我的应用程序没有 exportPathMap n中的方法 ext.config.js 文件我添加了一个,一切都开始按预期工作。