vanilla-extract 못찾는 문제

Next + React Query로 SNS 서비스 만들기

작성

117

수정됨

스크린샷 2025-06-03 오후 6.37.14.png.webp

안녕하세요~ 강의 잘 보고 있습니다! vanilla-extract 적용해보려고 하는데 패키지 설치하고 config설정까지 했는데 해당 에러가 나서 질문드립니다. next.config.ts파일과 globalTheme.css.ts, layout.ts중에 문제가 있을까요?? 파일 이름도 문제가 없고 코드 그대로 사용했는데도 해당 에러가 나서 next15에서 vanilla-extract 적용을 할 수 없는건지 궁금해서 여쭤봅니다.. 감사합니다

// package.json

스크린샷 2025-06-03 오후 6.36.57.png.webp

// 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>
    )
}

react next.js react-query next-auth msw

답변 2

신재훈

질문자

앗 원인을 찾았습니다...ㅋㅋㅋㅋ

  "scripts": {
    "dev": "next dev --turbopack",   // 문제 
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

해당 부분 "next dev"로 바꾸니까 잘 되네요.. turbopack은 안되네요 ㅠㅠ

제로초(조현영)

지식공유자

아직 터보팩 지원은 안 되나봅니다 ㅠㅠ

인프런 AI 인턴

안녕하세요, 인프런 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의 공식 문서도 참조해 보시면 도움이 될 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

vanilla-extract 못찾는 문제