NextJs - 导出使用样式组件的应用程序时出错
Posted
技术标签:
【中文标题】NextJs - 导出使用样式组件的应用程序时出错【英文标题】：NextJs - Error exporting app that uses styled-components 【发布时间】：2019-06-26 11:39:08 【问题描述】：我有一个在 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",
"s-s-r": 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-components 使我的应用按预期导出？ 任何帮助都会很棒。
【问题讨论】：
【参考方案1】：我发现我的应用在 next.config.js 文件中没有 exportPathMap 方法。我添加了一个，一切都开始按预期工作。
【讨论】：
以上是关于NextJs - 导出使用样式组件的应用程序时出错的主要内容，如果未能解决你的问题，请参考以下文章
使用 Nextjs Tailwind Emotion 导出项目丢失了 tailwind css 样式
如何使用来自@mui/material 的样式使情感组件选择器在 nextjs 应用程序中工作？