Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

웹팩 설정하다 만난 오류이다.

arrow function 이랑 class 의 차이 때문에 발생한 것 같은데, 문제를 찾는데 오래걸렸다.

아래는 웹팩의 전체코드이다.

const path = require("path"); // path는 node 에서 기본적으로 제공하는 모듈
const webpack = require("webpack");
const RefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
module.exports = {
  name: "wordRelay-setting",
  mode: "development", // 실서비스: production
  devtool: "eval",
  resolve: {
    extensions: [".js", ".jsx"], // resolve 를 적어줌으로써 entry에서 확장자명 생략 가능
  },
  entry: {
    app: ["./client"],
  }, // 입력

  module: {
    rules: [
      {
        test: /\.jsx?/, //js와 jsx 에 babel-loader가 적용된다.
        loader: "babel-loader",
        options: {
          presets: [
            [
              "@babel/preset-env",
              {
                targets: {
                  browsers: ["> 1% in KR"],
                },
                debug: true,
              },
            ],
            "@babel/preset-react",
          ],
          plugins: ["react-refresh/babel"],
        },
      },
    ],
  },
  plugins: [
    new webpack.LoaderOptionsPlugin({ debug: true }),
    new RefreshWebpackPlugin(),
  ], // 바로 위 rules의 loader의 option에 debug를 true 로 넣어준다. 28번줄 코드처럼 말이다.
  output: {
    path: path.join(__dirname, "dist"),
    filename: "app.js",
    publicPath: "/dist",
  },
  devServer: {
    devMiddleware: { publicPath: "/dist" },
    static: { directory: path.resolve(__dirname) },
    // 만약 index.html 이 다른 src 폴더 안에 있다면
    // static: { directory: path.resolve(__dirname), 'src' },
    hot: true,
  },
};

 

위 부분중에서 문제가 되는 부분은 해당 부분이다.

// 웹팩 파일중 일부
entry: {
    app: ["./index"],
  }, // 입력

 

우선 index.jsx 파일을 보자.

별거 없지만 NumberBaseball.jsx 파일은 arrow function 으로 된 파일이다.

const React = require("react");
const ReactDom = require("react-dom");
const NumberBaseball = require("./NumberBaseball");

ReactDom.render(<NumberBaseball />, document.querySelector("#root"));

 

따라서 이 부분을 import 로 바꾸어 주어야한다.

다음 처럼 말이다.

const React = require("react");
const ReactDom = require("react-dom");

import NumberBaseball from "./NumberBaseball";

ReactDom.render(<NumberBaseball />, document.querySelector("#root"));

 

이 에러를 경험하면서 짐작되는 부분은 class 컴포넌트는 require 가 가능하지만, 함수형 컴포넌트는 import 를 해야한다는 것을 알았다.