I have a working app running on DEV env, but when I try to export it (npm run build && next export
), Nextjs throw me this error `Error: The default export is not a React Component in page: "/Home/styles", where styles is a file containing some styled-components components.
Here's my babelrc file:
{
"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 file:
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>
);
}
}
And the file NextJs is complaining about.
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;
}
`;
I tried to export a function that returns the components, but another error appears: Objects are not valid as a React child (found: object with keys {Background}).
So, how can I make my app export as expected, using styled-components? Any help would be awesome.