React Sasy DatePicker throwing this error : Uncaught ReferenceError: process is not defined

Question

I'm trying to implement sassy DatePicker from https://www.npmjs.com/package/sassy-datepicker?activeTab=readme
Like so :

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;

But all I'm getting is these errors with white blank screen :

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)

I'm using reactjs v17.0.2 and sassy-datepicker v0.7.0 I already used it before in other project and it worked perfectly, I seriously don't why this is happening. Please if someone can help me with this I'll be thankful.

score 0 · Answer 1 · answered Jan 11 '22 at 14:18

0

It looks like this line from sassy-datepicker is causing you issues (line 88). It expects you to have a process.NODE_ENV variable defined, so a quick fix might just be to add this somewhere:

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

Or look at updating your environment as suggested here: process is not defined on hot reload .

answered Jan 11 '22 at 14:18

T0m

153
2
12

I'll try it thank you, but do you know why this might have happened, since in my other projects it works fine. – Firas SCMP Jan 11 '22 at 14:52

React Sasy DatePicker throwing this error : Uncaught ReferenceError: process is not defined

1 Answers1