[英]Next Js dynamic imports with no SSR not working
I'm trying to use this react-carousel-3d library https://github.com/suhailsulu/react-carousel-3d but I'm getting the below error as the library is not developed to support SSR.我正在尝试使用这个 react-carousel-3d 库https://github.com/suhailsulu/react-carousel-3d但我收到以下错误,因为该库不是为支持 SSR 而开发的。
`ReferenceError: window is not defined`
at Object.<anonymous> (C:\Deba\Workspace2021\Nextjs\myportfolio\node_modules\3d-react-carousal\dist\index.js:1:255)
Now I'm trying to use dynamic imports with no SSR https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr现在我正在尝试使用没有 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 }
)
I'm getting below error now:我现在遇到以下错误:
./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 && this.state.slides.length > 0 &&
<div className="slider-container">
Can somebody point out what i'm doing wrong here or any ideas on how to get this working?有人可以指出我在这里做错了什么或任何关于如何使它工作的想法吗?
Not sure if you can dynamically load from the node_module, like this:不确定是否可以从 node_module 动态加载,如下所示:
const {Carousel} = dynamic(
() => import('3d-react-carousal'),
{ ssr: false }
)
But you should be able to do this by creating a carousal component first, then dynamic import it like this:但是您应该能够通过首先创建一个轮播组件来做到这一点,然后像这样动态导入它:
// 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 }
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.