import 사용 불가 문제

Question

웹팩 설정을 똑같이 한 것 같은데 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,
  },
};

Answer

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

NOAH

import 사용 불가 문제

이 글과 비슷한 Q&A

리액트 장바구니 총 합계 금액 계산 함수 어떻게 해야할까요?

javascript 공부없이 바로 react native 배워도 되나요?

타입스크립트 테스트코드 작성

리액트 셀렉트 박스 질문드려요