miniCssExtractPlugin이 동작하지 않습니다.

프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)

자주 사용하는 플러그인

해결된 질문

작성

1.7K

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):

Error: Automatic publicPath is not supported in this browser

계속 위와 같은 에러가 뜨는데 어떻게 해야할까요?
./node_modules/mini-css-extract-plugin/dist/loader.js 경로에 파일은 정상적으로 있고

package.json에도 mini-css-extract-plugin이 설치되어 버전명도 적혀있습니다.

nodejs 웹팩 eslint babel

답변 6

seed

질문자

여러모로 좀 웃기긴한데 웹팩 4버전을 uninstall하고 설치하려는데 안돼서 그냥 여러가지 방법 찾아보다가 아래와 같은 방식으로 해결했습니다.

동일한 에러 있는분이 있다면 참고가 되었으면 좋겠습니다.

흰색너구리

오래 된 질문이라 올리는게 맞는지는 모르겠습니다.

저 같은 경우는 npmjs 페이지를 참고하여 publicPath 옵션을 직접 지정하여 넣어 해결하였습니다.

use: [
                    {
                        loader: process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
                        options: process.env.NODE_ENV === 'production' ? { publicPath: '/dist/' } : {},
                    },
                    'css-loader',
                ],

seed

질문자

node를 LTS 버전으로 설치하면 아래 코드로도 정상 동작합니다.

use: [
   process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'stye-loader',
   'css-loader'
]

김정환

지식공유자

아 그러면 실습버전과 동일하게 웹팩 버전을 내리시는게 좋을 것 같습니다.

npm i webpack@4

명령어로 웹팩 재 설치후에 다시 시도해 보세요.

seed

질문자

말씀주신대로 output에 publicPath를 추가하였는데 위와 같은 에러가 나오기 시작했습니다.
최대한 혼자 해결해보려고 하는데 잘 안되네요..

웹팩 버전은 webpack은 ^5.4.0 cli는 ^4.2.0입니다.

김정환

지식공유자

아래 오류 문구로 검색해보니 웹팩 버전이 원인인것 같네요.

"Error: Automatic publicPath is not supported in this browser"

아마 사용하신 웹팩버전이 5인지 확인해 보시고요. publicPath를 지정하는 방법으로 해결하는 것 같네요.

https://stackoverflow.com/questions/64294706/webpack5-automatic-publicpath-is-not-supported-in-this-browser

webpack.config.js 파일의 output 설정에 publicPath를 이렇게 추가해 보세요.

output: {
  publicPath: '/',

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

miniCssExtractPlugin이 동작하지 않습니다.