vanilla-extract 못찾는 문제
227
投稿した質問数 1
안녕하세요~ 강의 잘 보고 있습니다! vanilla-extract 적용해보려고 하는데 패키지 설치하고 config설정까지 했는데 해당 에러가 나서 질문드립니다. next.config.ts파일과 globalTheme.css.ts, layout.ts중에 문제가 있을까요?? 파일 이름도 문제가 없고 코드 그대로 사용했는데도 해당 에러가 나서 next15에서 vanilla-extract 적용을 할 수 없는건지 궁금해서 여쭤봅니다.. 감사합니다
// package.json
// next.config.ts
import type { NextConfig } from "next";
const {
createVanillaExtractPlugin
// eslint-disable-next-line @typescript-eslint/no-require-imports
} = require('@vanilla-extract/next-plugin');
const withVanillaExtract = createVanillaExtractPlugin();
const nextConfig: NextConfig = {
/* config options here */
experimental: {
serverActions: {
bodySizeLimit: '10mb', // Set the body size limit for server actions
}
},
async rewrites() {
return [
{
source: '/upload/:slug',
destination: `${process.env.NEXT_PUBLIC_BASE_URL}/upload/:slug`, // Matched parameters can be used in the destination
},
]
},
};
module.exports = withVanillaExtract(nextConfig);
// globalTheme.css.ts
import {assignVars, createGlobalTheme, createGlobalThemeContract, globalStyle} from "@vanilla-extract/css";
export const global = createGlobalThemeContract({
background: {
color: 'bg-color'
},
foreground: {
color: 'fg-color'
},
})
const whiteGlobalTheme = {
background: {
color: 'rgb(255, 255, 255)'
},
foreground: {
color: 'rgb(0, 0, 0)'
},
}
const darkGlobalTheme = {
background: {
color: 'rgb(0, 0, 0)'
},
foreground: {
color: 'rgb(255, 255, 255)'
},
}
createGlobalTheme(':root', global, whiteGlobalTheme); // 실제 적용
globalStyle(':root', {
'@media': {
'(prefers-color-scheme: dark)': {
vars: assignVars(global, darkGlobalTheme),
}
}
})
globalStyle('*', {
boxSizing: 'border-box',
padding: 0,
margin: 0,
})
globalStyle('html', {
'@media': {
'(prefers-color-scheme: dark)': {
colorScheme: 'dark',
}
}
});
globalStyle('html, body', {
maxWidth: '100dvw',
overflowX: 'hidden',
})
globalStyle('body', {
color: global.foreground.color
})
globalStyle('a', {
color: 'inherit',
textDecoration: 'none',
})
// layout.tsx
import type {Metadata} from 'next'
import {Inter} from 'next/font/google'
import './globalTheme.css';
import {MSWProvider} from "@/app/_component/MSWComponent";
import AuthSession from "@/app/_component/AuthSession";
if (process.env.NEXT_RUNTIME === 'nodejs' && process.env.NODE_ENV !== 'production' && process.env.MSW_ENABLED !== 'false') {
const {server} = require('@/mocks/http')
server.listen()
}
const inter = Inter({subsets: ['latin']})
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
type Props = {
children: React.ReactNode,
};
export default function RootLayout({children}: Props) {
return (
<html lang="en">
<body className={inter.className}>
<MSWProvider>
<AuthSession>
{children}
</AuthSession>
</MSWProvider>
</body>
</html>
)
}回答 2
0
앗 원인을 찾았습니다...ㅋㅋㅋㅋ
"scripts": {
"dev": "next dev --turbopack", // 문제
"build": "next build",
"start": "next start",
"lint": "next lint"
},해당 부분 "next dev"로 바꾸니까 잘 되네요.. turbopack은 안되네요 ㅠㅠ
0
안녕하세요, 인프런 AI 인턴입니다. 신재훈님.
vanilla-extract 관련 에러는 주로 환경 설정이나 파일 확장자 문제에서 발생할 수 있습니다. vanilla-extract는 CSS 작성 시 .css.ts 또는 .css.js 확장자를 사용하는데, 이 파일들이 잘못된 위치에 있거나 경로가 잘못 설정되면 에러가 발생할 수 있습니다. 다음은 해결 방법을 찾기 위한 몇 가지 체크리스트입니다:
- 파일 확장자 확인:
.css.ts파일이 올바른 위치에 있는지 확인하세요.
- vanilla-extract 설정:
vanilla-extract의 설정이 Next.js 프로젝트에 올바르게 포함되어 있는지 확인합니다.
- config 설정:
next.config.js또는tsconfig.json파일이 올바르게 설정되어 있는지 확인합니다.
- 버전 호환성 확인: vanilla-extract와 다음 프레임워크(Next.js)의 버전이 호환되는지 확인하세요. 패키지의 최신 버전을 사용해 보는 것도 좋은 방법입니다.
추가로, 유사한 오류를 해결하는 데 도움이 될 수 있는 관련 게시글을 참고해 보세요. 이는 webpack 설정 문제나 패키지 설치 문제를 포함한 다양한 오류 해결 방법을 제시하고 있습니다.
꼭 vanilla-extract의 공식 문서도 참조해 보시면 도움이 될 것입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
캡처링부분 질문있습니다.
0
73
2
깃에 소스코드를 찾을 수 없습니다.
0
112
2
useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩
0
97
1
import 파일 경로를 찾지 못 해서 에러가 발생합니다.
0
108
2
css 라이브러리 추천 부탁드립니다
0
140
2
팔로우 추천 목록이 빈 배열로 들어옵니다.
0
130
1
게시물 업로드 시 userId가 undefined로 들어가는 오류
0
118
1
useSuspenseQuery 사용 시 SSR 401 이슈 관련
0
169
1
리액트 쿼리 useinfinitequery 무한스크롤 구현 시 페이지가 이동할 경우 데이터가 보존되게 할 수 있나요??
0
184
3
폴링이 필요없는 이유
0
93
2
next Request Memoization과 react cache
0
108
2
seo 최적화 기준은 데이터 fetching인가요 아님 데이터 렌더링인가요?
0
83
2
next.js 서버fetch 에러 fallback ui 구현 방법
0
173
2
프레임워크 여론 파악법
0
124
2
필터옵션이 많은 페이지에서 서버 fetch를 하는게 맞는걸까요??
0
101
2
서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 화면이 노출된 후 fallback ui가 노출됩니다.
0
102
2
template.tsx 내 서버fetch 응답값과 클라이언트 컴포넌트 상태값 싱크가 맞지 않는 이슈
0
65
2
Auth.js 사용 시 authorize 함수가 호출되지 않습니다
0
131
2
next.js 에서 로그인에 관하여
0
138
1
Next의 route handler에 대한 질문이 있습니다.
0
101
2
게시판 리스트 만들때 use client를 어디서부터 집어넣어야할지 모르겠습니다
0
97
2
프라이빗 폴더를 해야 하는 이유가 모호한 것 같아요.
0
83
2
fetch 캐싱과 revalidate 관련
0
84
2
강의 듣는 방법
0
103
2