NX build creates bundle for react app that is invalid

[Theofilos-Chamalis]

Current Behavior

After upgrading from NX 15.8.7 to 18.0.7, a react app in our monorepo now creates a different bundle when built, which produces the following error when used as a library by another project:

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
TypeError: Cannot read properties of null (reading 'useState')
    at Object.useState (file:///home/theo/Projects/EF/product-sites/node_modules/@ilc-technology/optimizely/index.esm.js:4338:21)
    at useOptimizelyFlag (file:///home/theo/Projects/EF/product-sites/node_modules/@ilc-technology/optimizely/index.esm.js:5641:49)
    at StickyCtaAdapter (webpack-internal:///./src/components/destinations/sticky-cta/sticky-cta-adapter.tsx:32:82)
    at renderWithHooks (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at finishClassComponent (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5688:3)
    at renderClassComponent (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5696:3)
    at renderElement (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5943:7)
    at renderNodeDestructiveImpl (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
    at renderElement (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
 ⨯ TypeError: Cannot read properties of null (reading 'useState')
    at Object.useState (file:///home/theo/Projects/EF/product-sites/node_modules/@ilc-technology/optimizely/index.esm.js:4338:21)
    at useOptimizelyFlag (file:///home/theo/Projects/EF/product-sites/node_modules/@ilc-technology/optimizely/index.esm.js:5641:49)
    at StickyCtaAdapter (webpack-internal:///./src/components/destinations/sticky-cta/sticky-cta-adapter.tsx:32:82)
    at renderWithHooks (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at finishClassComponent (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5688:3)
    at renderClassComponent (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5696:3)
    at renderElement (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5943:7)
    at renderNodeDestructiveImpl (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)

Expected Behavior

There should not be that error produced and the consuming nextjs project should run without issues

GitHub Repo

No response

Steps to Reproduce

Not sure if this is reproducible without exposing our codebase/private repo.

Nx Report

NX   Report complete - copy this into the issue template

Node   : 18.19.1
OS     : linux-x64
npm    : 10.2.4

nx                 : 18.0.7
@nx/js             : 18.0.7
@nx/jest           : 18.0.7
@nx/linter         : 18.0.7
@nx/eslint         : 18.0.7
@nx/workspace      : 18.0.7
@nx/cypress        : 18.0.7
@nx/devkit         : 18.0.7
@nx/eslint-plugin  : 18.0.7
@nx/next           : 18.0.7
@nx/node           : 18.0.7
@nx/plugin         : 18.0.7
@nx/react          : 18.0.7
@nx/rollup         : 18.0.7
@nx/storybook      : 18.0.7
@nrwl/tao          : 18.0.7
@nx/web            : 18.0.7
@nx/webpack        : 18.0.7
typescript         : 5.3.3
---------------------------------------
Community plugins:
@abgov/nx-release : 8.1.4
---------------------------------------
Local workspace plugins:
workspace-plugin

Failure Logs

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
TypeError: Cannot read properties of null (reading 'useState')
    at Object.useState (file:///home/theo/Projects/EF/product-sites/node_modules/@ilc-technology/optimizely/index.esm.js:4338:21)
    at useOptimizelyFlag (file:///home/theo/Projects/EF/product-sites/node_modules/@ilc-technology/optimizely/index.esm.js:5641:49)
    at StickyCtaAdapter (webpack-internal:///./src/components/destinations/sticky-cta/sticky-cta-adapter.tsx:32:82)
    at renderWithHooks (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at finishClassComponent (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5688:3)
    at renderClassComponent (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5696:3)
    at renderElement (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5943:7)
    at renderNodeDestructiveImpl (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
    at renderElement (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
 ⨯ TypeError: Cannot read properties of null (reading 'useState')
    at Object.useState (file:///home/theo/Projects/EF/product-sites/node_modules/@ilc-technology/optimizely/index.esm.js:4338:21)
    at useOptimizelyFlag (file:///home/theo/Projects/EF/product-sites/node_modules/@ilc-technology/optimizely/index.esm.js:5641:49)
    at StickyCtaAdapter (webpack-internal:///./src/components/destinations/sticky-cta/sticky-cta-adapter.tsx:32:82)
    at renderWithHooks (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at finishClassComponent (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5688:3)
    at renderClassComponent (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5696:3)
    at renderElement (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5943:7)
    at renderNodeDestructiveImpl (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (/home/theo/Projects/EF/product-sites/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)

Package Manager Version

npm 10.2.4

Operating System

• [ ] macOS
• [X] Linux
• [ ] Windows
• [ ] Other (Please specify)

Additional Information

The built index.esm.js file on the new version of NX (18.0.7) has 5656 lines of code and defines the useOptimizelyFlag variable as:

const useOptimizelyFlag = (flagName, callback, userContextAttributes = {}, sdkKey) => {
  const [decision, setDecision] = react.exports.useState(null);
  const [userContext] = useOptimizelyContext(userContextAttributes, sdkKey);
  react.exports.useEffect(() => {
    if (!(userContext && flagName)) {
      return;
    }
    if (userContext && !decision) {
      const decision = userContext.decide(flagName);
      setDecision(decision);
      callback === null || callback === void 0 ? void 0 : callback(decision);
    }
  }, [flagName, callback, userContextAttributes, decision, userContext]);
  return decision;
};

The old NX version (15.8.7) produced a index.js file that had 2769 lines of code and defined the useOptimizelyFlag variable as:

const useOptimizelyFlag = (flagName, callback, userContextAttributes = {}, sdkKey) => {
  const [decision, setDecision] = useState(null);
  const [userContext] = useOptimizelyContext(userContextAttributes, sdkKey);
  useEffect(() => {
    if (!(userContext && flagName)) {
      return;
    }
    if (userContext && !decision) {
      const decision = userContext.decide(flagName);
      setDecision(decision);
      callback === null || callback === void 0 ? void 0 : callback(decision);
    }
  }, [flagName, callback, userContextAttributes, decision, userContext]);
  return decision;
};

The following approaches have been tried so far to mitigate the issue:

• Hardcoding the optimizely sdk key
• Upgrading nx to the latest patch version
• Aligning the types of react and react dom
• Removing duplicate exports
• Trying ts and swc as compiler
• Downgrading babel and Node versions

however none seems to resolve the issue.

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any activity for 6 months. Many things may have changed within this time. The issue may have already been fixed or it may not be relevant anymore. If at this point, this is still an issue, please respond with updated information. It will be closed in 21 days if no further activity occurs. Thanks for being a part of the Nx community! 🙏