instructure / instructure-ui

A UI Component Library made by Instructure, Inc.
https://instructure.design/
Other
435 stars 98 forks source link

process is not defined #1404

Closed aaronshaf closed 7 months ago

aaronshaf commented 8 months ago

When using InstUI in a new Vite+React app and then importing TopNavBarDesktopLayout, I get:

chunk-DLFVKOAX.js?v=b6aa73dd:16657 Uncaught ReferenceError: process is not defined
    at logDeprecated (@instructure_ui.js?v=b6aa73dd:11323:3)
    at warnDeprecated (@instructure_ui.js?v=b6aa73dd:11332:55)
    at @instructure_ui.js?v=b6aa73dd:12561:9
    at Array.forEach (<anonymous>)
    at warnDeprecatedProps (@instructure_ui.js?v=b6aa73dd:12557:27)
    at DeprecatedComponent.componentDidMount (@instructure_ui.js?v=b6aa73dd:12524:9)
    at TestableComponent.componentDidMount (@instructure_ui.js?v=b6aa73dd:13936:15)
    at invokeLayoutEffectMountInDEV (chunk-DLFVKOAX.js?v=b6aa73dd:18302:28)
    at invokeEffectsInDev (chunk-DLFVKOAX.js?v=b6aa73dd:19695:19)
    at commitDoubleInvokeEffectsInDEV (chunk-DLFVKOAX.js?v=b6aa73dd:19678:13)

Culprit seems to be:

function logDeprecated(condition, message, ...args) {
  if (!process.env.OMIT_INSTUI_DEPRECATION_WARNINGS) {
    logMessage("warn", true, condition, message, ...args);
  } else if (!condition && !loggedInitialDeprecationWarning) {
    loggedInitialDeprecationWarning = true;
    logMessage("warn", false, condition, ["There are Instructure UI deprecation warnings that are being hidden because the `OMIT_INSTUI_DEPRECATION_WARNINGS` environment variable is set. Remove or unset this variable to see the full list of warnings in your console.", "These warnings will give you advance notice of breaking changes and upgrade guidance to keep your code up to date with the latest Instructure UI versions."].join("\n\n"));
  }
}

Expected behavior:

Don't assume that process exists.

joyenjoyer commented 8 months ago

We are looking into this Mr. Shafovaloff!

aaronshaf commented 7 months ago

Ran into this today again.

!process.env.ALWAYS_APPEND_UI_TESTABLE_LOCATORS ? () => Component => Component : decorator(ComposedComponent => { in node_modules/.pnpm/@instructure+ui-testable@8.51.0_react-dom@16.14.0_react@16.14.0/node_modules/@instructure/ui-testable/es/testable.js

image