#reactjs #next.js #server-side-rendering
#reactjs #next.js #рендеринг на стороне сервера
Вопрос:
Я пытаюсь использовать эту библиотеку react-carousel-3d https://github.com/suhailsulu/react-carousel-3d но я получаю приведенную ниже ошибку, поскольку библиотека не разработана для поддержки SSR.
`ReferenceError: window is not defined`
at Object.<anonymous> (C:DebaWorkspace2021Nextjsmyportfolionode_modules3d-react-carousaldistindex.js:1:255)
Теперь я пытаюсь использовать динамический импорт без SSR https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr
const {Carousel} = dynamic(
() => import('../node_modules/3d-react-carousal/src/index.js'),
{ ssr: false }
)
Теперь я получаю ошибку ниже:
./node_modules/3d-react-carousal/src/index.js 189:12
Module parse failed: Unexpected token (189:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
render() {
return (
<div className="react-3d-carousel" style={{ height: this.state.height }}>
{this.state.slides amp;amp; this.state.slides.length > 0 amp;amp;
<div className="slider-container">
Может кто-нибудь указать, что я здесь делаю не так, или какие-либо идеи о том, как заставить это работать?
Ответ №1:
Не уверен, что вы можете динамически загружать из node_module, например, так:
const {Carousel} = dynamic(
() => import('3d-react-carousal'),
{ ssr: false }
)
Но вы должны быть в состоянии сделать это, сначала создав карусельный компонент, а затем динамически импортировав его следующим образом:
// create a component named MyCarousel.js in components folder
import {Carousel} from '3d-react-carousal';
let slides = [
<img src="https://picsum.photos/800/300/?random" alt="1" />,
<img src="https://picsum.photos/800/301/?random" alt="2" /> ,
<img src="https://picsum.photos/800/302/?random" alt="3" /> ,
<img src="https://picsum.photos/800/303/?random" alt="4" /> ,
<img src="https://picsum.photos/800/304/?random" alt="5" /> ];
const MyCarousel = (<Carousel slides={slides} autoplay={true} interval={1000}/>);
export default MyCarousel;
// then dynamic import it:
const MyCarousel = dynamic(
() => import('../components/MyCarousel'),
{ ssr: false }
)