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()
]
};'HTML + JAVASCRIPT + CSS > ReactJS+AngularJS +VueJS' 카테고리의 다른 글
| 클립보드의 이미지를 업로드 후 화면 표기 처리 (0) | 2021.12.17 |
|---|---|
| reactjs 합성 사용하기 (0) | 2021.07.09 |
| tailwindcss with ReactJS (0) | 2021.02.21 |
| JSON 데이터를 xlxs 형식으로 다운로드 하기 by ReactJS (0) | 2021.02.19 |
| Reactjs의 setState는 비동기(asynchronous)로 동작 합니다. (0) | 2021.01.10 |