• 카테고리

    질문 & 답변

  • 세부 분야

    풀스택

  • 해결 여부

    해결됨

next.config.js 에러 질문입니다

21.02.19 08:05 작성 조회수 558

0

이번에 next + antd 로 진행하다가 antd customize theme를 써보고싶어져서

https://ant.design/docs/react/customize-theme#Customize-in-webpack

여기에 나와있는대로 웹팩 설정을

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer({
  compress: true,
  webpack(config, { webpack }) {
    const prod = process.env.NODE_ENV === 'production';
    config.module.rules.push({
      test: /\.less$/,
      use: [
        {
          loader: 'style-loader',
        },
        {
          loader: 'css-loader', // translates CSS into CommonJS
        },
        {
          loader: 'less-loader', // compiles Less to CSS
          options: {
            lessOptions: {
              // If you are using less-loader@5 please spread the lessOptions to options directly
              modifyVars: {
                'primary-color': '#1DA57A',
                'link-color': '#1DA57A',
                'border-radius-base': '2px',
              },
              javascriptEnabled: true,
            },
          },
        },
      ],
    });

    return {
      ...config,
      mode: prod ? 'production' : 'development',
      devtool: prod ? 'hidden-source-map' : 'eval',
      plugins: [...config.plugins, new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /^\.\/ko$/)],
    };
  },
});

이렇게 기존에서 less 설정만 추가했습니다.

그런데 

> next -p 3080

Browserslist: caniuse-lite is outdated. Please run:

npx browserslist@latest --update-db

ready - started server on http://localhost:3080

Warning: Reverting webpack devtool to 'inline-source-map'.

Changing the webpack devtool in development mode will cause severe performance regressions.

Read more: https://err.sh/next.js/improper-devtool

Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.

See here for more info: https://err.sh/next.js/built-in-css-disabled

info  - Using external babel configuration from E:\programming\nodejs\utopia\client\.babelrc

error - ./node_modules/antd/dist/antd.css 13:6

Module parse failed: Unexpected token (13:6)

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

| /* stylelint-disable */

| /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */

> [class^=ant-]::-ms-clear,

| [class*= ant-]::-ms-clear,

| [class^=ant-] input::-ms-clear,

이런 오류가 뜹니다. custom css configuration 을  해서 built in css support가 중단되었다고하는거 같은데, 해당 링크에 들어가보면 외부 css 관련 플러그인을 사용했을때 뜰 수 있다라고 하는데 그 상황은 아닌거같고요.

혹시 어떻게 해야 웹팩 오류가 안나게 설정을 할 수 있을까요?

course-thumbnail

[리뉴얼] React로 NodeBird SNS 만들기

커스텀 웹팩과 bundle-analyzer

강의실 바로가기

답변 1

답변을 작성해보세요.

0

Incursio님의 프로필

Incursio

질문자

2021.02.20

해결했습니다. less-loader에 jsEnabled가 deprecated 되었다네요. 다른 방식으로 적용했습니다

이 글과 비슷한 Q&A