728x90
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' 카테고리의 다른 글
meterial ui datetimepicker 설정시 유의점 (0) | 2022.11.04 |
---|---|
클립보드의 이미지를 업로드 후 화면 표기 처리 (0) | 2021.12.17 |
reactjs 합성 사용하기 (0) | 2021.07.09 |
tailwindcss with ReactJS (0) | 2021.02.21 |
JSON 데이터를 xlxs 형식으로 다운로드 하기 by ReactJS (0) | 2021.02.19 |