browser compatibility issue

sancelot commented 1 year ago

Current Behavior

I made a react application using nx monorepo. this application implements dynamic webworker creation and webworker in libs.

This works fine, but I need my application to work with chrome >= 69 (electron 4.2.12 https://github.com/electron/releases)

I tried using browserslist feature, but the browser is unable to load the built scripts.

Expected Behavior

My application should work if I specify chrome >= 69 in .browserslistrc file in the APP folder as described here https://nx.dev/recipes/other/browser-support

GitHub Repo

No response

Steps to Reproduce

clone the application in this repository

Add a .browserslistrc file at root, containing:

and_chr 109
and_ff 107
and_qq 13.1
and_uc 13.4
android 109
chrome >= 69
edge 109
edge 108
edge 107
firefox 109
firefox 108
firefox 107
firefox 102
ios_saf 16.3
ios_saf 16.2
ios_saf 16.1
ios_saf 16.0
ios_saf 15.6
ios_saf 15.5
ios_saf 14.5-14.8
kaios 2.5
op_mini all
op_mob 72
opera 92
opera 91
safari 16.3
safari 16.2
safari 16.1
safari 15.6
samsung 19.0
samsung 18.0

4.Build the application

Deploy the application and access it with chrome 69 .
it fails to load

Nx Report

Node : 16.18.0
   OS   : win32 x64
   npm  : 9.2.0

   nx : 15.6.3
   @nrwl/angular : Not Found
   @nrwl/cypress : 15.6.3
   @nrwl/detox : Not Found
   @nrwl/devkit : 15.6.3
   @nrwl/esbuild : Not Found
   @nrwl/eslint-plugin-nx : 15.6.3
   @nrwl/expo : Not Found
   @nrwl/express : Not Found
   @nrwl/jest : 15.6.3
   @nrwl/js : 15.6.3
   @nrwl/linter : 15.6.3
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : Not Found
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 15.6.3
   @nrwl/react-native : Not Found
   @nrwl/rollup : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : Not Found
   @nrwl/web : Not Found
   @nrwl/webpack : 15.6.3
   @nrwl/workspace : 15.6.3
   @nrwl/vite : 15.6.3
   typescript : 4.8.4
   ---------------------------------------
   Local workspace plugins:
   ---------------------------------------
   Community plugins:

Failure Logs

No response

Additional Information

But I managed to be able to run it with chrome 69 using another way . I don't think it is the right way to do it with nx.dev:

I added @vitejs/plugin-legacy in the project .

I customised the app vite.config.ts file as follow , to use legacy plugin :


/// <reference types="vitest" />
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import viteTsConfigPaths from 'vite-tsconfig-paths';

import legacy from '@vitejs/plugin-legacy';

export default defineConfig({ build: { target: 'es2015', }, cacheDir: '../../node_modules/.vite/my-app',

server: { port: 4200, host: '0.0.0.0', },

preview: { port: 4300, host: '0.0.0.0', },

plugins: [ react(), viteTsConfigPaths({ root: '../../', }), // For production build environments only legacy({ targets: [ 'chrome >= 69', 'edge >= 79', 'safari >= 11.1', 'firefox >= 67', ], }), ],

test: { globals: true, cache: { dir: '../../node_modules/.vitest', }, environment: 'jsdom', include: ['src/*/.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], }, });

AgentEnder commented 1 year ago

Vite doesn't support browserlists out of the box it seems. I believe your workaround is indeed the correct solution. See: https://github.com/vitejs/vite/discussions/6849

github-actions[bot] commented 1 year ago

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.

nrwl / nx