search

SAP / ui5-webcomponents-react

A wrapper implementation for React of the UI5 Web Components that are compliant with the SAP Fiori User Experience
https://sap.github.io/ui5-webcomponents-react/
Apache License 2.0
443 stars 99 forks source link

DateRangePicker: Date Range Picker is not displaying in Prod Build #1047

Closed kurellys closed 3 years ago

kurellys commented 3 years ago

When using DateRangePicker React Component on the Debug build it works good and when we build prod version and run.. we are not seeing the date selection.

Date-range-in-debug-mode Date-range-in-prod-mode

version used:
"@ui5/webcomponents": "1.0.0-rc.10", "@ui5/webcomponents-fiori": "1.0.0-rc.10", "@ui5/webcomponents-react": "0.12.0", "@webcomponents/webcomponentsjs": "^2.4.4",

MarcusNotheis commented 3 years ago

Hey @kurellys, I just tried to setup a new application and it was working as expected, both in the development as well as in the production build. Can you share a reproducible example? SAP-Internal GitHub would be fine as well in case the code is pushed there.

Best regards, Marcus

kurellys commented 3 years ago

Hi Marcus, Thank you for Quick Response.

I am sharing our package.json so that in your application use the same to install and try. Not sure if any combination of packages causing this issue.

Just trying to see if with the same combination of the packages might reproduce on your example code.

=================================== "dependencies": { "@babel/plugin-proposal-object-rest-spread": "^7.10.1", "@reduxjs/toolkit": "^1.3.4", "@ui5/webcomponents": "1.0.0-rc.10", "@ui5/webcomponents-fiori": "1.0.0-rc.10", "@ui5/webcomponents-react": "0.12.0", "@webcomponents/webcomponentsjs": "^2.4.4", "@xweb/core-utils": "^1.0.14", "abortcontroller-polyfill": "^1.4.0", "axios": "^0.21.0", "bootstrap": "^4.5.3", "i18next": "^19.8.3", "i18next-browser-languagedetector": "^6.0.1", "i18next-xhr-backend": "^3.2.2", "jquery": "^3.5.1", "react": "^16.13.1", "react-app-polyfill": "^1.0.6", "react-bootstrap": "^1.4.0", "react-dom": "^16.13.1", "react-i18next": "^11.7.3", "react-router": "^5.2.0", "react-router-dom": "^5.2.0", "react-scripts": "3.4.0", "react-window-infinite-loader": "^1.0.5", "redux-devtools-extension": "^2.13.8", "resize-observer-polyfill": "^1.5.1", "source-map-explorer": "^2.4.2" }, "jest": { "collectCoverage": true, "transformIgnorePatterns": [ "node_modules/(?!(@ui5|lit-html|css-vars-ponyfill)).\.js$" ], "coverageThreshold": { "global": { "branches": 15, "functions": 25, "lines": 25, "statements": 25 } }, "coveragePathIgnorePatterns": [ ".css.js", ".a11ytest.js", ".stories.js", "index.js", "src/assets", "src/mockdata", "src/store/middleware", "src/i18n/messages", "src/ui5wc", "webcomponents" ] }, "scripts": { "analyze": "source-map-explorer 'build/static/js/.js'", "build": "npm run buildES5 && npm run buildES6 && node combine-builds", "build:local": "npm run buildES6 && node combine-builds", "buildES5": "rm -rf buildES5 && react-app-rewired build && mv build buildES5", "buildES6": "rm -rf buildES6 && env TARGET_VERSION=ES6 react-app-rewired build && mv build buildES6", "deploy": "build_type=\"build\" ; deploy_dir=\"../tomcat-sfs/webapps/ROOT/ui/recruiting/pages/applicationlist\" ; if [ -d $deploy_dir ] ; then npm run $build_type && echo \"Deleting $deploy_dir\" && rm -rf $deploy_dir && echo \"Copying directory $build_type to $deploy_dir\" && cp -r $build_type $deploy_dir ; else echo \"The directory $deploy_dir does not exist\" ; fi", "deploy:local": "build_type=\"build\" ; deploy_dir=\"../tomcat-sfs/webapps/ROOT/ui/recruiting/pages/applicationlist\" ; if [ -d $deploy_dir ] ; then npm run build:local && echo \"Deleting $deploy_dir\" && rm -rf $deploy_dir && echo \"Copying directory $build_type to $deploy_dir\" && cp -r $build_type $deploy_dir ; else echo \"The directory $deploy_dir does not exist\" ; fi", "eject": "react-scripts eject", "eslint": "npm run eslint:all", "eslint:all": "cross-var eslint $npm_package_config_jsFiles", "eslint:dev": "eslint", "start": "react-app-rewired start", "storybook": "start-storybook -p 9009 -s public", "storybook:build": "build-storybook -s public", "storybook:deploy": "npm run storybook:build && gh-pages -d storybook-static", "test": "CI=true react-app-rewired test --env jest-environment-jsdom-sixteen --updateSnapshot && (npm run test:wc)", "test:dev": "react-app-rewired test --watchAll", "test:debug": "react-app-rewired --inspect-brk test --env=est-environment-jsdom-sixteen --updateSnapshot --runInBand -i", "test:karma": "react-karma", "test:karma_dev": "react-karma dev", "test:local": "react-app-rewired test --watchAll=false --env jest-environment-jsdom-sixteen && (npm run test:wc)", "test:react": "react-app-rewired test --watchAll=false --env jest-environment-jsdom-sixteen --updateSnapshot", "test:wc": "karma start --update-snapshots --prune-snapshots --coverage" }, "eslintConfig": { "extends": "@xweb/eslint-config/react" }, "pre-commit": [ "test" ], "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "ie 11", "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@babel/core": "^7.8.7", "@babel/preset-env": "^7.8.7", "@babel/preset-react": "^7.8.3", "@open-wc/testing": "^2.5.8", "@open-wc/testing-karma": "^3.3.10", "@storybook/addon-a11y": "^5.3.14", "@storybook/addon-actions": "^5.3.14", "@storybook/addon-docs": "^5.3.17", "@storybook/addon-knobs": "^5.3.14", "@storybook/addon-links": "^5.3.14", "@storybook/addon-storysource": "^5.3.17", "@storybook/addon-viewport": "^5.3.14", "@storybook/addons": "^5.3.14", "@storybook/preset-create-react-app": "^2.0.0", "@storybook/react": "^5.3.14", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "@testing-library/react-hooks": "^3.2.1", "@xweb/eslint-config": "^1.0.1", "@xweb/react-karma-conf": "^1.0.0-rc3", "babel-loader": "^8.0.6", "babel-preset-react-app": "^9.1.1", "deepmerge": "^4.2.2", "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.15.2", "eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-react": "^7.20.0", "gh-pages": "^2.2.0", "jest-axe": "^3.4.0", "jest-environment-jsdom-sixteen": "^1.0.2", "karma": "^4.4.1", "karma-chrome-launcher": "^3.1.0", "pre-commit": "^1.2.2", "react-app-rewired": "^2.1.5", "react-test-renderer": "^16.13.1", "react-is": "^16.13.0", "sinon": "^9.0.1", "storybook-addon-i18n-tools": "^1.0.0", "storybook-addon-specifications": "^2.1.5" } }

Thank you Satish

From: Marcus Notheis notifications@github.com Sent: Tuesday, December 1, 2020 3:10 AM To: SAP/ui5-webcomponents-react ui5-webcomponents-react@noreply.github.com Cc: Kurelly, Satish (external - Project) satish.kurelly@sap.com; Mention mention@noreply.github.com Subject: Re: [SAP/ui5-webcomponents-react] DateRangePicker: Date Range Picker is not displaying in Prod Build (#1047)

Hey @kurellyshttps://github.com/kurellys, I just tried to setup a new application and it was working as expected, both in the development as well as in the production build. Can you share a reproducible example? SAP-Internal GitHub would be fine as well in case the code is pushed there.

Best regards, Marcus

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/SAP/ui5-webcomponents-react/issues/1047#issuecomment-736298881, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AR6JZIZ4CJJ3TCKJIMAB6YLSSSQDZANCNFSM4UIAOVRQ.

MarcusNotheis commented 3 years ago

Hey @kurellys, thanks for sharing your dependencies, from a first look I see nothing suspicious. Unfortunately I can't build the project with the information you shared because there are lots of files, e.g. config files for react-app-rewired missing and some node helper scripts. As far as I can see, your build is somehow custom so this error might be related with too aggressive tree shaking?

kurellys commented 3 years ago

Hi, Is it possible to have call so we can discuss?

Please let me know.

Thank you -Satish

From: Marcus Notheis notifications@github.com Sent: Tuesday, December 1, 2020 12:46 PM To: SAP/ui5-webcomponents-react ui5-webcomponents-react@noreply.github.com Cc: Kurelly, Satish (external - Project) satish.kurelly@sap.com; Mention mention@noreply.github.com Subject: Re: [SAP/ui5-webcomponents-react] DateRangePicker: Date Range Picker is not displaying in Prod Build (#1047)

Hey @kurellyshttps://github.com/kurellys, thanks for sharing your dependencies, from a first look I see nothing suspicious. Unfortunately I can't build the project with the information you shared because there are lots of files, e.g. config files for react-app-rewired missing and some node helper scripts. As far as I can see, your build is somehow custom so this error might be related with too aggressive tree shaking?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/SAP/ui5-webcomponents-react/issues/1047#issuecomment-736712790, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AR6JZIY3WSHMNA3N6DDCYL3SSUTVLANCNFSM4UIAOVRQ.

kurellys commented 3 years ago

FYI..

+Vishwa, Kishore.

From: Kurelly, Satish (external - Project) Sent: Tuesday, December 1, 2020 2:59 PM To: SAP/ui5-webcomponents-react reply@reply.github.com; SAP/ui5-webcomponents-react ui5-webcomponents-react@noreply.github.com Cc: Mention mention@noreply.github.com; Chinnappan, Balasubramanian balasubramanian.chinnappan@sap.com; Au-Yeung, Austin austin.au-yeung@sap.com Subject: RE: [SAP/ui5-webcomponents-react] DateRangePicker: Date Range Picker is not displaying in Prod Build (#1047)

Hi, Is it possible to have call so we can discuss?

Please let me know.

Thank you -Satish

From: Marcus Notheis notifications@github.com<mailto:notifications@github.com> Sent: Tuesday, December 1, 2020 12:46 PM To: SAP/ui5-webcomponents-react ui5-webcomponents-react@noreply.github.com<mailto:ui5-webcomponents-react@noreply.github.com> Cc: Kurelly, Satish (external - Project) satish.kurelly@sap.com<mailto:satish.kurelly@sap.com>; Mention mention@noreply.github.com<mailto:mention@noreply.github.com> Subject: Re: [SAP/ui5-webcomponents-react] DateRangePicker: Date Range Picker is not displaying in Prod Build (#1047)

Hey @kurellyshttps://github.com/kurellys, thanks for sharing your dependencies, from a first look I see nothing suspicious. Unfortunately I can't build the project with the information you shared because there are lots of files, e.g. config files for react-app-rewired missing and some node helper scripts. As far as I can see, your build is somehow custom so this error might be related with too aggressive tree shaking?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/SAP/ui5-webcomponents-react/issues/1047#issuecomment-736712790, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AR6JZIY3WSHMNA3N6DDCYL3SSUTVLANCNFSM4UIAOVRQ.

MarcusNotheis commented 3 years ago

Hey @kurellys,

I'll close this issue as we have just figured out together that this is not an issue with UI5 Web Components React itself but rather seems to be caused by a bad webpack config.

Best regards Marcus