-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
import를 쓰면 되고 require를 쓰면 안되는데 왜그럴까요..
19.09.21 17:32 작성 조회수 147
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