React Sasy DatePicker 抛出此错误：未捕获的 ReferenceError：未定义进程

Question

我正在尝试从 https://www.npmjs.com/package/sassy-datepicker?activeTab=readme 实现时髦的 DatePicker
像这样：

import DatePicker from "sassy-datepicker";
  function App() {
   const [date, setDate] = useState(new Date());

   const onChange = newDate => {
     console.log(`New date selected - ${newDate.toString()}`);
     setDate(newDate);
   };

   return(
    <DatePicker onChange={onChange} selected={date} />
   )
 }
export default App;

但我得到的只是这些带有白色空白屏幕的错误：

index.tsx:87 Uncaught ReferenceError: process is not defined
    at index.tsx:87
    at renderWithHooks (react-dom.development.js:14985)
    at updateForwardRef (react-dom.development.js:17044)
    at beginWork (react-dom.development.js:19098)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
(anonymous) @ index.tsx:87
renderWithHooks @ react-dom.development.js:14985
updateForwardRef @ react-dom.development.js:17044
beginWork @ react-dom.development.js:19098
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
./src/index.js @ index.js:7
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
react-dom.development.js:20085 The above error occurred in the <DatePicker> component:

    at http://localhost:3000/static/js/bundle.js:78010:23
    at div
    at AddLocation (http://localhost:3000/static/js/bundle.js:44:75)
    at div
    at NoopTransition (http://localhost:3000/static/js/bundle.js:6243:5)
    at http://localhost:3000/static/js/bundle.js:35215:5
    at div
    at http://localhost:3000/static/js/bundle.js:35591:7
    at Tabs (http://localhost:3000/static/js/bundle.js:6474:9)
    at Tabs (http://localhost:3000/static/js/bundle.js:35356:70)
    at div
    at http://localhost:3000/static/js/bundle.js:33907:8
    at div
    at http://localhost:3000/static/js/bundle.js:35005:5
    at App (http://localhost:3000/static/js/bundle.js:669:84)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:20085
update.callback @ react-dom.development.js:20118
callCallback @ react-dom.development.js:12318
commitUpdateQueue @ react-dom.development.js:12339
commitLifeCycles @ react-dom.development.js:20736
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
./src/index.js @ index.js:7
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
index.tsx:87 Uncaught ReferenceError: process is not defined
    at index.tsx:87
    at renderWithHooks (react-dom.development.js:14985)
    at updateForwardRef (react-dom.development.js:17044)
    at beginWork (react-dom.development.js:19098)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)

我正在使用 reactjs v17.0.2 和 sassy-datepicker v0.7.0 我之前已经在其他项目中使用过它并且效果很好，我真的不知道为什么会这样。 如果有人可以帮助我，我将不胜感激。

Answer 1

看来sassy-datepicker 中的这行代码给您带来了问题 (line 88)。它希望您定义一个 process.NODE_ENV 变量，因此快速修复可能只是将其添加到某处：

   window.process = {
      env: {
        NODE_ENV: 'development',
     },
   };

或者按照此处的建议查看更新您的环境：process is not defined on hot reload。