@edx/browserslist-config dependency - do we want/need it?

[brian-smith-tcril]

Originally ran into this when looking into #2482. Since that issue is documentation focused, it seems reasonable to split off the question raised by one of the errors into its own thing.

To quote a DM with @adamstankiewicz

Cannot find module '@edx/browserslist-config' error

this one is interesting. Paragon shouldn't need be coupled with this? if it is, thats worth understanding why.

When running through this again this is the full error I encountered.

ERROR in ./node_modules/@edx/paragon/scss/core/_exports.module.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[8].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[8].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[8].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[8].use[4]!./node_modules/@edx/paragon/scss/core/_exports.module.scss)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: Cannot find module '@edx/browserslist-config'
Require stack:
- /home/bsmith/code/my-app/node_modules/browserslist/node.js
- /home/bsmith/code/my-app/node_modules/browserslist/index.js
- /home/bsmith/code/my-app/node_modules/@babel/helper-compilation-targets/lib/index.js
- /home/bsmith/code/my-app/node_modules/@babel/preset-env/lib/debug.js
- /home/bsmith/code/my-app/node_modules/@babel/preset-env/lib/index.js
- /home/bsmith/code/my-app/node_modules/workbox-build/build/lib/bundle.js
- /home/bsmith/code/my-app/node_modules/workbox-webpack-plugin/build/generate-sw.js
- /home/bsmith/code/my-app/node_modules/workbox-webpack-plugin/build/index.js
- /home/bsmith/code/my-app/node_modules/react-scripts/config/webpack.config.js
- /home/bsmith/code/my-app/node_modules/react-scripts/scripts/start.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)
    at Function.resolve (node:internal/modules/cjs/helpers:116:19)
    at Object.loadQueries (/home/bsmith/code/my-app/node_modules/browserslist/node.js:176:35)
    at Function.select (/home/bsmith/code/my-app/node_modules/browserslist/index.js:1124:26)
    at /home/bsmith/code/my-app/node_modules/browserslist/index.js:319:29
    at Array.reduce (<anonymous>)
    at resolve (/home/bsmith/code/my-app/node_modules/browserslist/index.js:309:34)
    at browserslist (/home/bsmith/code/my-app/node_modules/browserslist/index.js:411:21)
    at Browsers.parse (/home/bsmith/code/my-app/node_modules/autoprefixer/lib/browsers.js:54:12)
    at new Browsers (/home/bsmith/code/my-app/node_modules/autoprefixer/lib/browsers.js:42:26)
    at loadPrefixes (/home/bsmith/code/my-app/node_modules/autoprefixer/lib/autoprefixer.js:106:20)
    at Object.prepare (/home/bsmith/code/my-app/node_modules/autoprefixer/lib/autoprefixer.js:120:22)
    at /home/bsmith/code/my-app/node_modules/postcss/lib/lazy-result.js:149:39
    at Array.map (<anonymous>)
    at new LazyResult (/home/bsmith/code/my-app/node_modules/postcss/lib/lazy-result.js:147:43)
    at Processor.process (/home/bsmith/code/my-app/node_modules/postcss/lib/processor.js:53:14)
    at Object.loader (/home/bsmith/code/my-app/node_modules/postcss-loader/dist/index.js:97:30)

[brian-smith-tcril]

To add my $.02: Want? No. Need? I don't know.

[PKulkoRaccoonGang]

@brian-smith-tcril @adamstankiewicz After researching this problem, I was able to get the following results:

1. The problem with the absence of @edx/browserslist-config is unique to Create React App (CRA). I have tested several React starters that build applications, both using Webpack and Rollup. Paragon performance tests were conducted in Vite, Nx, and CRA. In Vite and Nx Paragon is fully functional, there is no problem with the @edx/browserslist-config package.

2. The problem with the absence of @edx/browserslist-config appeared after moving the configuration to a separate repository. Considering the results of my checks, after moving the browserslist configuration to a separate repository and inheriting the configuration ("extends @edx/browserslist-config"), we got the problem of missing @edx/browserslist-config when initializing CRA and installing Paragon. Unfortunately, this issue has always been a problem with CRA since the creation of the @edx/browserslist-config package.

3. Possible causes of the problem. Active development and support of the CRA has been curtailed. React developers do not recommend using CRA in projects. Presumably, it is internal CRA issues that are affecting the operation and installation of @edx/browserslist-config. I was unable to find a related documented issue in the CRA repository that describes problems with inheriting browserslist configurations (most likely due to the narrow focus of this case).

4. Additional Information:

• When installing Paragon in Vite starter, there is a problem with SCSS imports from node_modules ("~bootstrap/..."). This problem can be fixed by expanding the Vite config:

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      {
        find: /^~/,
        replacement: '',
      },
    ],
  },
})

• All tested starters have a problem with react-responsive (which should be solved by updating the version of the react-responsive package from 8.2.0 to 9.0.0):

5. Conclusions. Answering the question “Do we want/need it?”, it seems no. This config is necessary in MFEs that use Paragon, but not in Paragon itself. Deleting a @edx/browserslist-config from Paragon will work directly in MFEs that use Paragon. During the build, Babel will provide polyfills to Paragon components that are imported and used in the MFE.

[viktorrusakov]

@PKulkoRaccoonGang let's delete this from our package.json, browserslist should only be defined in MFEs or any regular applications that render pages on the website, not in component libraries like Paragon.