fix: resolve process/browser to process/browser.js to resolve correct…

…ly in ESM packages where .mjs or .js files exist where process is being used and globally imported. [run ci]

.circleci/workflows.yml

@@ -30,7 +30,7 @@ mainBuildFilters: &mainBuildFilters
         - /^release\/\d+\.\d+\.\d+$/
         # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
         - 'update-v8-snapshot-cache-on-develop'
-        - 'chore/update_webpack_deps_to_latest_webpack4_compat'
+        - 'fix/resolve_browser_process_correctly_for_mjs'
         - 'chore/bump_loaders_and_optimize_webpack'
         - 'bump-circle-cache'
 
@@ -43,7 +43,7 @@ macWorkflowFilters: &darwin-workflow-filters
     - equal: [ develop, << pipeline.git.branch >> ]
     # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
     - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-    - equal: [ 'chore/update_webpack_deps_to_latest_webpack4_compat', << pipeline.git.branch >> ]
+    - equal: [ 'fix/resolve_browser_process_correctly_for_mjs', << pipeline.git.branch >> ]
     - equal: [ 'bump-circle-cache', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
@@ -55,7 +55,7 @@ linuxArm64WorkflowFilters: &linux-arm64-workflow-filters
     - equal: [ develop, << pipeline.git.branch >> ]
     # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
     - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-    - equal: [ 'chore/update_webpack_deps_to_latest_webpack4_compat', << pipeline.git.branch >> ]
+    - equal: [ 'fix/resolve_browser_process_correctly_for_mjs', << pipeline.git.branch >> ]
     - equal: [ 'chore/bump_loaders_and_optimize_webpack', << pipeline.git.branch >> ]
     - equal: [ 'astone123/fix-get-published-artifacts', << pipeline.git.branch >> ]
     - matches:
@@ -77,7 +77,7 @@ windowsWorkflowFilters: &windows-workflow-filters
     - equal: [ develop, << pipeline.git.branch >> ]
     # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
     - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-    - equal: [ 'chore/update_webpack_deps_to_latest_webpack4_compat', << pipeline.git.branch >> ]
+    - equal: [ 'fix/resolve_browser_process_correctly_for_mjs', << pipeline.git.branch >> ]
     - equal: [ 'bump-circle-cache', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
@@ -148,7 +148,7 @@ commands:
           name: Set environment variable to determine whether or not to persist artifacts
           command: |
             echo "Setting SHOULD_PERSIST_ARTIFACTS variable"
-            echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "publish-binary" && "$CIRCLE_BRANCH" != "astone123/revert-caching" ]]; then
+            echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "publish-binary" && "$CIRCLE_BRANCH" != "fix/resolve_browser_process_correctly_for_mjs" ]]; then
                 export SHOULD_PERSIST_ARTIFACTS=true
             fi' >> "$BASH_ENV"
   # You must run `setup_should_persist_artifacts` command and be using bash before running this command

cli/CHANGELOG.md

@@ -6,6 +6,7 @@ _Released 08/29/2023 (PENDING)_
 **Bugfixes:**
 
 - Only force CommonJS when running `ts-node` with a `TS_NODE_COMPILER` environment variable, such as when Cypress uses `ts-node` internally. This solves an issue where Cypress' internal `tsconfig` conflicts with properties set in the user's `tsconfig.json` such as `module` and `moduleResolution`. Fixes [#26308](https://github.com/cypress-io/cypress/issues/26308) and [#27448](https://github.com/cypress-io/cypress/issues/27448).
+- Resolve the `process/browser` global inside `@cypress/webpack-batteries-included-preprocessor` to resolve to `process/browser.js` in order to explicitly provide the file extension. File resolution must include the extension for `.mjs` and `.js` files inside ESM packages in order to resolve correctly. Fixes[#27599](https://github.com/cypress-io/cypress/issues/27599).
 
 ## 12.17.4
 

npm/webpack-batteries-included-preprocessor/index.js

@@ -135,7 +135,15 @@ const getDefaultWebpackOptions = () => {
     plugins: [
       new webpack.ProvidePlugin({
         Buffer: ['buffer', 'Buffer'],
-        process: 'process/browser',
+        // As of Webpack 5, a new option called resolve.fullySpecified, was added.
+        // This option means that a full path, in particular to .mjs / .js files
+        // in ESM packages must have the full path of an import specified.
+        // Otherwise, compilation fails as this option defaults to true.
+        // This means we need to adjust our global injections to always
+        // resolve to include the full file extension if a file resolution is provided.
+        // @see https://github.com/cypress-io/cypress/issues/27599
+        // @see https://webpack.js.org/configuration/module/#resolvefullyspecified
+        process: 'process/browser.js',
       }),
     ],
     resolve: {
@@ -163,7 +171,7 @@ const getDefaultWebpackOptions = () => {
         path: require.resolve('path-browserify'),
         perf_hooks: false,
         punycode: require.resolve('punycode/'),
-        process: require.resolve('process/browser'),
+        process: require.resolve('process/browser.js'),
         querystring: require.resolve('querystring-es3'),
         readline: false,
         repl: false,

npm/webpack-batteries-included-preprocessor/test/fixtures/mjs_spec.mjs

@@ -1,3 +1,8 @@
 import { expect } from 'chai'
 
+// make sure built in resolves correctly in mjs through the provide plugin, including process & buffer
+process.env.foo = 'bar'
+
+const buffer = new Buffer('foo');
+
 expect(true).to.be.true

packages/web-config/webpack.config.base.ts

@@ -126,7 +126,7 @@ export const getCommonConfig = () => {
         net: false,
         os: require.resolve('os-browserify/browser'),
         path: require.resolve('path-browserify'),
-        process: require.resolve('process/browser'),
+        process: require.resolve('process/browser.js'),
         stream: require.resolve('stream-browserify'),
         tls: false,
         url: require.resolve('url/'),
@@ -240,7 +240,15 @@ export const getCommonConfig = () => {
       // @see https://gist.github.com/ef4/d2cf5672a93cf241fd47c020b9b3066a#polyfilling-globals
       new webpack.ProvidePlugin({
         Buffer: ['buffer', 'Buffer'],
-        process: 'process/browser',
+        // As of Webpack 5, a new option called resolve.fullySpecified, was added.
+        // This option means that a full path, in particular to .mjs / .js files
+        // in ESM packages must have the full path of an import specified.
+        // Otherwise, compilation fails as this option defaults to true.
+        // This means we need to adjust our global injections to always
+        // resolve to include the full file extension if a file resolution is provided.
+        // @see https://github.com/cypress-io/cypress/issues/27599
+        // @see https://webpack.js.org/configuration/module/#resolvefullyspecified
+        process: 'process/browser.js',
       }),
       ...(liveReloadEnabled ? [new LiveReloadPlugin({ appendScriptTag: true, port: 0, hostname: 'localhost', protocol: 'http' })] : []),
     ],
@@ -265,7 +273,7 @@ export const getSimpleConfig = () => ({
       net: false,
       os: require.resolve('os-browserify/browser'),
       path: require.resolve('path-browserify'),
-      process: require.resolve('process/browser'),
+      process: require.resolve('process/browser.js'),
       stream: require.resolve('stream-browserify'),
       tls: false,
       url: require.resolve('url/'),