Gatsby：tiny-slider-react 在 renderToString 处给出错误

Question

我有一个组件使用 tiny-slider-react

import React from 'react';
import TinySlider from 'tiny-slider-react';

export default function SliderScreen() {
    return (
        <TinySlider settings={{
                                nav: false,
                                mouseDrag: true,
                                items: 2,
                                controls: false,
                                gutter: 30,
                            }}
        >
        ...
        </TinySlider>
    );
}

为了防止 browser is not defined 错误，我有我的 gatsby-node.js

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
    if (stage === 'build-html') {
        actions.setWebpackConfig({
            module: {
                rules: [
                    {
                        test: /tiny-slider-react/,
                        use: loaders.null(),
                    },
                ],
            },
        });
    }
};

但它又给我一个错误：

failed Building static HTML for pages - 0.653s

 ERROR #95313 

Building static HTML failed for path "/"

See our docs page for more info on this error: https://gatsby.dev/debug-html


  261 |     if (!bodyHtml) {
  262 |       try {
> 263 |         bodyHtml = renderToString(bodyComponent)
      |                    ^
  264 |       } catch (e) {
  265 |         // ignore @reach/router redirect errors
  266 |         if (!isRedirect(e)) throw e


  WebpackError: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the no  n-minified dev environment for full errors and additional helpful warnings.

  - static-entry.js:263
    project/.cache/static-entry.js:263:20


not finished Caching JavaScript and CSS webpack compilation - 6.885s
not finished Caching HTML renderer compilation - 0.763s

我也尝试清理 gatsby 并重新安装节点模块，但是 none 解决了问题...

谁能帮我解决这个问题？

Answer 1

尝试在您的 return 语句之前添加此行

if(typeof window === 'undefined') return <div>test</div>

Gatsby：tiny-slider-react 在 renderToString 处给出错误

Gatsby: tiny-slider-react is giving error at renderToString

javascript

reactjs

gatsby