NextJs - Ошибка при экспорте приложения, которое использует styled-компоненты - PullRequest
Новая
       20

NextJs - Ошибка при экспорте приложения, которое использует styled-компоненты

0 голосов
/ 02 февраля 2019

У меня есть работающее приложение, работающее в DEV env, но когда я пытаюсь его экспортировать (npm run build && next export), Nextjs выдает мне эту ошибку `Ошибка: экспорт по умолчанию не является компонентом React на странице:" / Home / styles", где styles - это файл, содержащий некоторые компоненты styleled-компонентов.

Вот мой файл 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}).

Итак, как мне сделать экспорт моего приложениякак и ожидалось, используя styled-компоненты?Любая помощь будет потрясающей.

1 Ответ

0 голосов
/ 07 февраля 2019

Я понял, что в моем приложении не было метода exportPathMap в файле n ext.config.js.Я добавил один, и все стало работать как положено.

...