fix: Error importing '@microsoft/fast-foundation' with react-scripts 4 and webpack 4

[DevarshiPandyaTR]

🐛 Bug Report

When using react-scripts 4 and webpack 4, microsoft fast throws the following error:

./node_modules/@microsoft/fast-foundation/dist/esm/data-grid/data-grid.js
Module not found: Can't resolve '@microsoft/fast-element/utilities' in '/Volumes/Macintosh HD - Data/Microsoft FAST Issue
Debug/non-working-app/node_modules/@microsoft/fast-foundation/dist/esm/data-grid'

Versions of fast-foundation and fast-element used:

"@microsoft/fast-element": "2.0.0-beta.23",
"@microsoft/fast-foundation": "3.0.0-alpha.27",

💻 Repro or Code Sample

The code example of the working and non-working application has been uploaded here: https://github.com/DevarshiPandyaTR/ms-fast-issue-repro

The working application is using react-scripts 5, whereas the non-working application is using react-scripts 4.

Step 1: Clone the sample repository

git clone https://github.com/DevarshiPandyaTR/ms-fast-issue-repro.git

Step 2: Run the non-working application to see the error.

cd ms-fast-issue-repro/non-working-app
npm start

🤔 Expected Behavior

The application should run without throwing an error when using Microsoft FAST with react-scripts 4 and webpack 4.

😯 Current Behavior

The application throws the following error when importing @microsoft/fast-foundation in index.js.

./node_modules/@microsoft/fast-foundation/dist/esm/data-grid/data-grid.js
Module not found: Can't resolve '@microsoft/fast-element/utilities' in '/Volumes/Macintosh HD - Data/Microsoft FAST Issue
Debug/non-working-app/node_modules/@microsoft/fast-foundation/dist/esm/data-grid'

This error is not present when using react-scripts 5.

💁 Possible Solution

The root cause of the bug is currently unknown. Collaboration with others would be helpful in finding a solution.

🔦 Context

We are trying to use Microsoft FAST in our application which uses react-scripts 4 and webpack 4. Upgrading to react-scripts 5 brings many breaking changes to our application, so we are trying to find a solution to make Microsoft FAST work with react-scripts 4.

🌍 Your Environment

• OS & Device: MacOS, Windows
• Node version: 16.13.0
• React version: 17, 18

[chrisdholt]

This looks like an issue with export path syntax from Node. If I had to guess it could be related to webpack 4 which would explain why the same code is working with webpack 5. Given the FAST code works within other areas and in react-scripts 5 from my understanding, I'm going to close this issue. Feel free to open a discussion though if you need more insight or help on a given implementation, etc.