inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

웹 게임을 만들며 배우는 React

7-2. reducer, action. dispatch의 관계

import 사용 불가 문제

256

NOAH

작성한 질문수 48

0

웹팩 설정을 똑같이 한 것 같은데 require문은 사용이 가능한데 import 사용시 이와 같은 에러가 나옵니다.

webpack의 babel 옵션을 검색해보았으나 import to require 옵션을 찾기 힘들어 여기에 여쭤봅니다.

const path = require("path");
const RefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");

module.exports = {
  name: "tictactoe-dev",
  mode: "development", // publish option -> production
  devtool: "eval",
  resolve: {
    extensions: [".js", ".jsx"],
  },
  entry: {
    app: ["./client"], // already webpack knows about wordchain.jsx file
  }, // Input

  module: {
    rules: [
      {
        test: /\.jsx?/,
        loader: "babel-loader",
        options: {
          // Adding all browsers can affect performance, so adding only the browsers you want is important.
          // It also allows you to apply different options in detail
          // plugins are setting for preset
          presets: [
            [
              "@babel/preset-env",
              {
                targets: {
                  browsers: ["> 5% in KR", "last 2 chrome versions"], // browserslists
                },
                debug: true,
              },
            ],
            "@babel/preset-react",
          ],
          plugins: [
            "@babel/plugin-proposal-class-properties",
            "react-refresh/babel",
          ],
        },
      },
    ],
  },
  // extension, if you need to add more options
  // add debug in all module components
  // plugins: [new webpack.LoaderOptionsPlugin({ debug: true })],
  plugins: [new RefreshWebpackPlugin()],
  output: {
    path: path.join(__dirname, "dist"),
    filename: "app.js",
    publicPath: "/dist/",
  }, // Output
  devServer: {
    publicPath: "/dist/",
    hot: true,
  },
};

react

답변 1

0

제로초(조현영)

import를 어떻게 쓰셨는지 코드 보여주세요. module.exports도 export default로 바꾸셨나요?

0

NOAH

네 둘다 그렇게 사용하였습니다. 확인 여러번 하였구요.

제로초님의 깃허브에 있는 "webpack.config.js" 파일 갖다 쓰니 그냥 잘 되네요..

바뀐 내용만 첨부하자면

위쪽이 제 원래 파일 아래쪽 내용이 제로초님 파일입니다.

지금보니 플러그인쪽 React를 빼먹어서 그런거 같은 느낌이 있네요.. 다시 보니 알겠습니다.

  plugins: [new RefreshWebpackPlugin()],
 plugins: [new ReactRefreshWebpackPlugin()],

  devtool: "inline-source-map",
 devtool: "eval",

plugins: [
            "@babel/plugin-proposal-class-properties",
            "react-refresh/babel",
          ],
plugins: ["react-refresh/babel"],

npm run dev 실행 시 포트가 안뜨는 문제

0

235

2

timeouts.current를 useEffect 의 input값으로 넣었을때

0

95

2

렌더링 테스트 코드 (Hooks)

0

93

1

Cannot find package 'react-refesh' 이런 에러 뜨시는 분들 보세요.

0

164

1

해당 에러 뜨는 분들 보세요. "Uncaught TypeError: ReactDom.createRoot is not a function"

1

205

1

강사님 레포지토리에서 코드 복사 시 master 브랜치 말고 react18 브랜치꺼 복붙하세요ㅠㅠ

0

105

1

useMemo와 useCallback 사용 시기

0

218

2

onRightClickTd가 작동을 하지 않습니다.

0

233

1

action.type 불러오는 방식

0

225

2

onClickRedo 질문

0

176

1

const Try = require(./Try) 빨간줄

0

258

1

npx webpack 실행시

0

323

1

지뢰찾기 강좌에서 빈칸들 한번에 열기 파트에서 여쭤보고싶은부분이 있어서 글 올립니다.

0

241

1

강좌에서 다루지 않은 기능들은 어떻게 학습하면 좋을까요?

0

318

1

react devtool이 enable 않됩니다.

0

544

2

React 랜더링이 되지 않습니다.

0

421

2

비동기로 동작하는 setState에 대해서

0

337

1

npm run dev 할 때 에러발생

0

494

2

memo, PureComponenet, shouldComponentUpdate 관련 질문

0

210

1

devMiddleware의 필요성

0

357

1

리액트에서 화살표 함수를 사용해야하는 이유

0

946

2

path.join관련질문

0

287

2

2-9. 웹팩 데브 서버와 핫 리로딩 설치과정 시 에러

0

384

1

next.js 에서 이와 비슷한 예제를 돌리고있는데 react랑 달라서 질문 드립니

1

502

4