Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

27 Nov 2021

Reading time ~1 minute

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

내가 만든 React 모듈을 rollup으로 빌드 후 사용할때 위와 같은 오류를 만났습니다.

원인으로 peerDependencies 설정을 하지 않아서 발생했습니다.

package.json에 다음과 같이 peerDependencies 를 설정하고 모듈을 배포 하면 해당 오류가 사라졌습니다.

  "peerDependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },

제가 사용한 rollup.conf 파일은 아래와 같습니다.

import peerDepsExternal from "rollup-plugin-peer-deps-external";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "rollup-plugin-typescript2";
import postcss from "rollup-plugin-postcss";
import copy from "rollup-plugin-copy";
import sass from 'node-sass';
import autoprefixer from 'autoprefixer';
import url from 'rollup-plugin-url';
import { terser } from 'rollup-plugin-terser';

const packageJson = require("./package.json");

export default {
  // preserveModules: true,
  input: "src/index.ts",
  output: [
    {
      file: packageJson.main,
      // dir: 'build',
      format: "cjs",
      // preserveModules: true,
      sourcemap: false
    },
  ],
  plugins: [
    url({
      // by default, rollup-plugin-url will not handle font files
      include: ['**/*.woff', '**/*.woff2', '**/*.ttf'],
      // setting infinite limit will ensure that the files
      // are always bundled with the code, not copied to /dist
      limit: Infinity,
    }),
    peerDepsExternal(),
    resolve(),
    commonjs(),
    typescript({ useTsconfigDeclarationDir: true }),
    copy({
      targets: [
        { src: ['src/assets/theme/fonts/*'], dest: 'build/fonts' },
      ]
    }),
    postcss({
      preprocessor: (content, id) => new Promise((resolve, reject) => {
        const result = sass.renderSync({ file: id });
        resolve({ code: result.css.toString() })
      }),
      plugins: [
        autoprefixer(),
      ],
      sourceMap: false,
      minimize: true,
      extract: true,
      extensions: ['.sass', '.css']
    }),
    terser()
  ]
};