webpack config cleanup

[CraigMacomber]

Description

A few webpack config changes for examples:

• remove unneeded require.resolve from webpack loaders. Webpack can resolve these by itself just fine, and in many other places we already rely on it doing so.
• remove unnneded quoting and escaping for env in a few package,json files
• fix detection of production vs development in config files:
  • Simplify logic using ?.
  • Correct several configs which always returned development because detection of production checked environment object against string. The old incorrect behavior was determined by debugging the smde example and checking that it worked incorrectly before and is fixed afterward.

Reviewer Guidance

Currently running npm run webpack in the root fails due to preexisting breakage in example webpack configs: these issues are unchanged by my changes, but leaves me without a great way to test this. I don't see any new errors in top level npm run webpack, but it has a lot of console spam and warning already, so I might have missed something. At least CI has confirmed the test webpack configs work.

[ChumpChief]

Currently running npm run webpack in the root fails due to issues with css in prosemirror: these issues are unchanged by my changes, but leaves me without a great way to test this. I don't see any new errors in top level npm run webpack, but it has a lot of console spam and warning already, so I might have missed something. At least CI will confirm the test webpack configs work.

It looks like the prosemirror-menu dependency got updated recently, from 1.1.4 to 1.2.0 (probably unintentionally). In 1.2.0 it looks like prosemirror-menu added an exports field in its package.json but forgot the css. It looks like this has been fixed in 1.2.1 if you want to bump to that version. https://github.com/ProseMirror/prosemirror-menu/commit/11d85967a637b774b925a85c059a24dfab27b08b

[ChumpChief]

Looks like the demo still errors at runtime using 1.2.1 but at least packing succeeds. Probably needs a little more attention.

[CraigMacomber]

Looks like the demo still errors at runtime using 1.2.1 but at least packing succeeds. Probably needs a little more attention.

I made a separate PR for that https://github.com/microsoft/FluidFramework/pull/10893 and filed an task in our internal tracker to follow-up on the broken examples (its beyond the scope of what I have time for currently): https://dev.azure.com/fluidframework/internal/_workitems/edit/1024

[tylerbutler]

Regarding the require.resolve, that was originally done per the guidance in the "no unqualified webpack config" section here: https://yarnpkg.com/api/modules/yarnpkg_doctor.html

The issue linked there is closed, but it's unclear if it was fixed. Maybe we don't care because we don't plan to use yarn PnP, but that's the reason the require.resolve calls are there.

[tylerbutler]

Also if all our configs are in private projects or in packages that are otherwise not extended, then this is even less relevant.

[CraigMacomber]

Also if all our configs are in private projects or in packages that are otherwise not extended, then this is even less relevant.

Regarding the require.resolve, that was originally done per the guidance in the "no unqualified webpack config" section here: https://yarnpkg.com/api/modules/yarnpkg_doctor.html

The issue linked there is closed, but it's unclear if it was fixed. Maybe we don't care because we don't plan to use yarn PnP, but that's the reason the require.resolve calls are there.

We don't ship any of these configs as part of the packages. They are all for testing, or in the one case of property-inspector-table where it's used as a build step: but we still don't include the config as part of the package.

Thus I don't think the concern expressed in that article applies.

I mostly removed the resolve since we only do it sometimes, and inconsistently copying that pattern when we don't think we need it seems like a bad idea. If we actually did if everywhere it might make sense to leave it.

Also most of the resolvers are ts-loader. We don't ship the ts-source in our packages (we ship JS and d.ts files), so those webpack configs wouldn't even make sense for consuming our actual published packages.

[github-actions[bot]]

🔗 Found some broken links! 💔

Run a link check locally to find them. See https://github.com/microsoft/FluidFramework/wiki/Checking-for-broken-links-in-the-documentation for more information.

linkcheck output

> [email protected] linkcheck /home/runner/work/FluidFramework/FluidFramework/docs
> npm run linkcheck:fast -- --external


> [email protected] linkcheck:fast /home/runner/work/FluidFramework/FluidFramework/docs
> linkcheck http://localhost:1313 --skip-file skipped-urls.txt "--external"

Crawling...

http://localhost:1313/css/style.min.882abef0cf4d5438897263d06a89616ce369514241de0a09692f026c97a3b939.css
- (1:1272) url(...) => https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.eot? (HTTP 503)

http://localhost:1313/docs/apis/core-interfaces/ifluidcodedetailscomparer-interface
- (883:360) 'Array.sort' => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Description (HTTP 200 but missing anchor)
- (894:168) 'https://..' => https://github.com/npm/node-semver#usage (HTTP 200 but missing anchor)
- (902:25) 'Array.sort' => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Description (HTTP 200 but missing anchor)
- (948:25) 'https://..' => https://github.com/npm/node-semver#usage (HTTP 200 but missing anchor)

http://localhost:1313/docs/apis/core-interfaces/ifluidcodedetailscomparer-interface/
- (883:360) 'Array.sort' => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Description (HTTP 200 but missing anchor)
- (894:168) 'https://..' => https://github.com/npm/node-semver#usage (HTTP 200 but missing anchor)
- (902:25) 'Array.sort' => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Description (HTTP 200 but missing anchor)
- (948:25) 'https://..' => https://github.com/npm/node-semver#usage (HTTP 200 but missing anchor)

http://localhost:1313/docs/start/examples/
- (895:5) 'Using Fl..' => https://learn.microsoft.com/microsoftteams/platform/tabs/using-fluid-msteam (HTTP 301 => 404)
  - redirect path:
    - https://learn.microsoft.com/microsoftteams/platform/tabs/using-fluid-msteam (301)
    - /en-us/microsoftteams/platform/tabs/using-fluid-msteam (404)


Summary of most serious issues:

http://localhost:1313/css/style.min.882abef0cf4d5438897263d06a89616ce369514241de0a09692f026c97a3b939.css
- (1:1272) url(...) => https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.eot? (HTTP 503)

http://localhost:1313/docs/start/examples/
- (895:5) 'Using Fl..' => https://learn.microsoft.com/microsoftteams/platform/tabs/using-fluid-msteam (HTTP 301 => 404)
  - redirect path:
    - https://learn.microsoft.com/microsoftteams/platform/tabs/using-fluid-msteam (301)
    - /en-us/microsoftteams/platform/tabs/using-fluid-msteam (404)


Stats:
  115117 links
    1229 destination URLs
       2 URLs ignored
       8 warnings
       2 errors