我在Next.js项目中使用React服务器组件时遇到了问题。我得到的错误如下：
Failed to compile
./src\app\components\projects\slider.js
ReactServerComponentsError:
You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
,-[C:\Users\elias\Documents\Trabalhos\Repositorios\portifolio\src\app\components\projects\slider.js:1:1]
1 | /* @jsxImportSource @react */
2 | import Image from "next/image";
3 | import "./slider.scss";
4 | import React, { useState, useEffect } from "react";
: ^^^^^^^^^
5 | import dynamic from "next/dynamic";
6 | import "owl.carousel/dist/assets/owl.carousel.css";
7 | import "owl.carousel/dist/assets/owl.theme.default.css";
`----
Maybe one of these should be marked as a client entry with "use client":
./src\app\components\projects\slider.js
./src\app\page.tsx下面是我的代码摘要：
在'slider.js'文件中：
/* @jsxImportSource @react */
import Image from "next/image";
import "./slider.scss";
import React, { useState, useEffect } from "react";
import dynamic from "next/dynamic";
import "owl.carousel/dist/assets/owl.carousel.css";
import "owl.carousel/dist/assets/owl.theme.default.css";
let productsp = [
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
];
var $ = require("jquery");
if (typeof window !== "undefined") {
window.$ = window.jQuery = require("jquery");
}
const OwlCarousel = dynamic(() => import("react-owl-carousel"), {
ssr: false,
});
const Slider = () => {
const options = {
margin: 30,
responsiveClass: true,
nav: true,
dots: true,
autoplay: false,
smartSpeed: 1000,
navClass: ["owl-prev", "owl-next"],
navText: [
'',
'',
],
responsive: {
0: {
items: 1,
},
400: {
items: 1,
},
600: {
items: 2,
},
700: {
items: 3,
},
1000: {
items: 4,
},
},
};
return (
<div className="row no-gutters">
<div
className="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 mt-3 pb-2 bg-white"
id="owl-carousel-products"
>
<h3 className="text-center">
<span className="heading float-left w-100">Featured Products</span>
</h3>
<ul id="owl-carousel-ul" className="owl-carousel owl-loaded owl-drag">
<OwlCarousel
className="owl-theme"
loop
margin={4}
nav={true}
navText={[
'<img src="/images/Arrow_left.png" />',
'<img src="/images/Arrow_right.png" />',
]}
dots={false}
animateIn={true}
{...options}
>
{productsp && productsp.length > 0
? productsp.map((product) => {
return (
<div
id="featuredProducts"
className="item float-left w-100"
key={product.name}
>
<div className="productListing col-lg-5th col-md-4 col-sm-6 col-xs-12">
<a href={product.url}>
<a className="product float-left">
<span className="image text-center">
<Image
id={"img" + product.id}
src="images/product.jpg"
alt={product.name}
title={product.name}
/>
</span>
<span className="w-100 text-center mt-1 ">
<h5 className="brand text-capitalize float-left">
{product.brand}
</h5>
<span className="name">{product.name}</span>
<strong className="itemPrice p-0">
Price: {product.price}
</strong>
</span>
</a>
</a>
</div>
</div>
);
})
: ""}
</OwlCarousel>
</ul>
</div>
</div>
);
};
export default Slider;在“page.tsx”文件中：
import { Experience } from './components/experience/experience'
import { Header } from './components/header/header'
import { Info } from './components/information/information'
import Slider from './components/projects/slider'
import "./styles/home.scss"
import { EmailIcon } from './components/icons/email-icon'
import { SocialBtns } from './components/social-btns/social-btns'
export default function Home() {
return (
<main className="container">
<Header />
<Experience />
<Info />
<div className="buttons">
<SocialBtns />
<a className="btn-primary" href="mailto:[email protected]">
contact me
<EmailIcon />
</a>
</div>
<Slider />
</main>
)
}`我已经用/* @jsxImportSource @react */标记了父组件page.tsx，但我仍然得到这个与使用useEffect相关的错误。
我怀疑这可能是因为我的项目没有使用Babel。我是否需要安装和配置Babel以使React服务器组件在Next.js中工作？```
1条答案
按热度按时间hc8w905p1#
您需要将
use client作为文件的第一行（或者作为它的直接父文件之一的第一行）。查看有关此here的文档以获得更多解释。将其添加到
slider.js文件中。