import를 쓰면 되고 require를 쓰면 안되는데 왜그럴까요..
245
허태정
작성한 질문수 10
0
import React from 'react';
import { render } from 'react-dom';
import { hot } from 'react-hot-loader/root';
import WordRelay from './WordRelay';
const Hot = hot(WordRelay);
render(<Hot />, document.querySelector('#root'));
const React = require('react');
const ReactDom = require('react-dom');
const { hot } = require('react-hot-loader/root');
const WordRelay = require('./WordRelay');
const Hot = hot(WordRelay);
ReactDom.render(<Hot />, document.querySelector('#root'));
요 두 모양으로 썼는데 위에꺼는 되고 아래꺼는 안되네요..
[HMR] Waiting for update signal from WDS... react.development.js:172 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `HotExportedComponent`. in HotExportedComponent warningWithoutStack @ react.development.js:172 warning @ react.development.js:612 createElementWithValidation @ react.development.js:1944 React$$1.createElement @ react-hot-loader.development.js:2846 render @ react-hot-loader.development.js:3127 finishClassComponent @ react-dom.development.js:17039 updateClassComponent @ react-dom.development.js:16994 beginWork$1 @ react-dom.development.js:18505 beginWork$$1 @ react-dom.development.js:23193 performUnitOfWork @ react-dom.development.js:22208 workLoopSync @ react-dom.development.js:22185 renderRoot @ react-dom.development.js:21878 scheduleUpdateOnFiber @ react-dom.development.js:21419 scheduleRootUpdate @ react-dom.development.js:24319 updateContainerAtExpirationTime @ react-dom.development.js:24347 updateContainer @ react-dom.development.js:24436 (anonymous) @ react-dom.development.js:24963 unbatchedUpdates @ react-dom.development.js:21687 legacyRenderSubtreeIntoContainer @ react-dom.development.js:24962 render @ react-dom.development.js:25042 (anonymous) @ client.jsx:21 (anonymous) @ client.jsx:40 ./client.jsx @ app.js:818 __webpack_require__ @ app.js:727 fn @ app.js:101 (anonymous) @ client:3 1 @ app.js:1516 __webpack_require__ @ app.js:727 (anonymous) @ app.js:794 (anonymous) @ app.js:797 react-hot-loader.development.js:2345 React-Hot-Loader: react-🔥-dom patch is not detected. React 16.6+ features may not work. AppContainer @ react-hot-loader.development.js:2345 AppContainer @ VM1223:14 constructClassInstance @ react-dom.development.js:13308 updateClassComponent @ react-dom.development.js:16985 beginWork$1 @ react-dom.development.js:18505 beginWork$$1 @ react-dom.development.js:23193 performUnitOfWork @ react-dom.development.js:22208 workLoopSync @ react-dom.development.js:22185 renderRoot @ react-dom.development.js:21878 scheduleUpdateOnFiber @ react-dom.development.js:21419 scheduleRootUpdate @ react-dom.development.js:24319 updateContainerAtExpirationTime @ react-dom.development.js:24347 updateContainer @ react-dom.development.js:24436 (anonymous) @ react-dom.development.js:24963 unbatchedUpdates @ react-dom.development.js:21687 legacyRenderSubtreeIntoContainer @ react-dom.development.js:24962 render @ react-dom.development.js:25042 (anonymous) @ client.jsx:21 (anonymous) @ client.jsx:40 ./client.jsx @ app.js:818 __webpack_require__ @ app.js:727 fn @ app.js:101 (anonymous) @ client:3 1 @ app.js:1516 __webpack_require__ @ app.js:727 (anonymous) @ app.js:794 (anonymous) @ app.js:797 react-dom.development.js:24036 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `HotExportedComponent`. at eval (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:24036:34) at createFiberFromTypeAndProps (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:24039:13) at createFiberFromElement (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:24060:15) at reconcileSingleElement (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:14530:23) at reconcileChildFibers (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:14587:35) at reconcileChildren (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:16691:28) at finishClassComponent (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:17056:5) at updateClassComponent (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:16994:24) at beginWork$1 (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:18505:16) at HTMLUnknownElement.callCallback (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:347:14) (anonymous) @ react-dom.development.js:24036 createFiberFromTypeAndProps @ react-dom.development.js:24039 createFiberFromElement @ react-dom.development.js:24060 reconcileSingleElement @ react-dom.development.js:14530 reconcileChildFibers @ react-dom.development.js:14587 reconcileChildren @ react-dom.development.js:16691 finishClassComponent @ react-dom.development.js:17056 updateClassComponent @ react-dom.development.js:16994 beginWork$1 @ react-dom.development.js:18505 callCallback @ react-dom.development.js:347 invokeGuardedCallbackDev @ react-dom.development.js:397 invokeGuardedCallback @ react-dom.development.js:454 beginWork$$1 @ react-dom.development.js:23217 performUnitOfWork @ react-dom.development.js:22208 workLoopSync @ react-dom.development.js:22185 renderRoot @ react-dom.development.js:21878 scheduleUpdateOnFiber @ react-dom.development.js:21419 scheduleRootUpdate @ react-dom.development.js:24319 updateContainerAtExpirationTime @ react-dom.development.js:24347 updateContainer @ react-dom.development.js:24436 (anonymous) @ react-dom.development.js:24963 unbatchedUpdates @ react-dom.development.js:21687 legacyRenderSubtreeIntoContainer @ react-dom.development.js:24962 render @ react-dom.development.js:25042 (anonymous) @ client.jsx:21 (anonymous) @ client.jsx:40 ./client.jsx @ app.js:818 __webpack_require__ @ app.js:727 fn @ app.js:101 (anonymous) @ client:3 1 @ app.js:1516 __webpack_require__ @ app.js:727 (anonymous) @ app.js:794 (anonymous) @ app.js:797 Show 4 more frames react-dom.development.js:19814 The above error occurred in the <AppContainer> component: in AppContainer (created by HotExportedComponent) in HotExportedComponent Consider adding an error boundary to your tree to customize error handling behavior. Visit https://fb.me/react-error-boundaries to learn more about error boundaries. logCapturedError @ react-dom.development.js:19814 logError @ react-dom.development.js:19850 update.callback @ react-dom.development.js:20929 callCallback @ react-dom.development.js:12929 commitUpdateEffects @ react-dom.development.js:12968 commitUpdateQueue @ react-dom.development.js:12959 commitLifeCycles @ react-dom.development.js:20098 commitLayoutEffects @ react-dom.development.js:22813 callCallback @ react-dom.development.js:347 invokeGuardedCallbackDev @ react-dom.development.js:397 invokeGuardedCallback @ react-dom.development.js:454 commitRootImpl @ react-dom.development.js:22585 unstable_runWithPriority @ scheduler.development.js:643 runWithPriority$2 @ react-dom.development.js:11305 commitRoot @ react-dom.development.js:22414 scheduleUpdateOnFiber @ react-dom.development.js:21421 scheduleRootUpdate @ react-dom.development.js:24319 updateContainerAtExpirationTime @ react-dom.development.js:24347 updateContainer @ react-dom.development.js:24436 (anonymous) @ react-dom.development.js:24963 unbatchedUpdates @ react-dom.development.js:21687 legacyRenderSubtreeIntoContainer @ react-dom.development.js:24962 render @ react-dom.development.js:25042 (anonymous) @ client.jsx:21 (anonymous) @ client.jsx:40 ./client.jsx @ app.js:818 __webpack_require__ @ app.js:727 fn @ app.js:101 (anonymous) @ client:3 1 @ app.js:1516 __webpack_require__ @ app.js:727 (anonymous) @ app.js:794 (anonymous) @ app.js:797 Show 3 more frames react-dom.development.js:24036 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `HotExportedComponent`. at eval (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:24036:34) at createFiberFromTypeAndProps (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:24039:13) at createFiberFromElement (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:24060:15) at reconcileSingleElement (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:14530:23) at reconcileChildFibers (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:14587:35) at reconcileChildren (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:16691:28) at finishClassComponent (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:17056:5) at updateClassComponent (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:16994:24) at beginWork$1 (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:18505:16) at HTMLUnknownElement.callCallback (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:347:14)
답변 2
npm run dev 실행 시 포트가 안뜨는 문제
0
204
2
timeouts.current를 useEffect 의 input값으로 넣었을때
0
88
2
렌더링 테스트 코드 (Hooks)
0
80
1
Cannot find package 'react-refesh' 이런 에러 뜨시는 분들 보세요.
0
149
1
해당 에러 뜨는 분들 보세요. "Uncaught TypeError: ReactDom.createRoot is not a function"
1
191
1
강사님 레포지토리에서 코드 복사 시 master 브랜치 말고 react18 브랜치꺼 복붙하세요ㅠㅠ
0
95
1
useMemo와 useCallback 사용 시기
0
207
2
onRightClickTd가 작동을 하지 않습니다.
0
226
1
action.type 불러오는 방식
0
222
2
onClickRedo 질문
0
172
1
const Try = require(./Try) 빨간줄
0
248
1
npx webpack 실행시
0
313
1
지뢰찾기 강좌에서 빈칸들 한번에 열기 파트에서 여쭤보고싶은부분이 있어서 글 올립니다.
0
235
1
강좌에서 다루지 않은 기능들은 어떻게 학습하면 좋을까요?
0
311
1
react devtool이 enable 않됩니다.
0
531
2
React 랜더링이 되지 않습니다.
0
412
2
비동기로 동작하는 setState에 대해서
0
331
1
npm run dev 할 때 에러발생
0
480
2
memo, PureComponenet, shouldComponentUpdate 관련 질문
0
206
1
devMiddleware의 필요성
0
352
1
리액트에서 화살표 함수를 사용해야하는 이유
0
935
2
path.join관련질문
0
282
2
2-9. 웹팩 데브 서버와 핫 리로딩 설치과정 시 에러
0
374
1
next.js 에서 이와 비슷한 예제를 돌리고있는데 react랑 달라서 질문 드립니
1
491
4