Adding configuration to allow loading css loaders for react-html5-camera-photo #772
Conversation
arodidev
changed the title
| const cfgCreator = require('openmrs/default-webpack-config'); | ||
|
|
||
| module.exports = (env, argv) => { | ||
| const config = cfgCreator(env, argv); | ||
| const cssLoaderMode = resourcePath => { | ||
| if (/.*react-html5-camera-photo\/build\/css\/index.css/i.test(resourcePath) || /styles.css$/i.test(resourcePath)) { | ||
| return 'global'; | ||
| } | ||
| return 'local'; | ||
| }; | ||
| config.module.rules[1].use[1].options.modules['mode'] = cssLoaderMode; | ||
| config.module.rules[2].use[1].options.modules['mode'] = cssLoaderMode; | ||
| return config; |
There was a problem hiding this comment.
@arodidev have you actually tested this out locally? There is no way this works.
There was a problem hiding this comment.
@samuelmale Could you work with Jamie to come up with something that works
|
We are using the html5 camera photo package in the attachments too. Please do confirm the attachements widget before merging. |
|
Yeah, one consideration for this is what happens if we mark the CSS as global (so non-module scoped), but end up with multiple copies of it. Rather than just hacking around with how the CSS is loaded via webpack, we probably want to make it into a shared module ( |
|
@arodidev What I was suggesting is that each app that uses the react-html5-camera-photo should have that library listed in their |
|
@ibacher I attemped adding 'react-html5-camera-photo' as a |
|
@arodidev I wasn't meaning to suggest that marking the module as a peer dependency would solve the CSS loading issue, simply that it's something we should do in addition to solving the CSS loading issue. However, as @samuelmale pointed out, the code in this PR wouldn't have fixed the issue in this context (specifically, the code in the PR seems to be aimed at modifying the object exported by the file you're editing to add a rule; you need to just add the rule directly). |
|
@ibacher I appreciate the feedback, thank you. |
…era-photo
Requirements
For changes to apps
If applicable
Summary
This PR adds configurations to the base webpack config file to allow adding of css loaders that enable styles for react-html5-camera-photo component, which is currently being bottlenecked due to lack of configuration. This is in relation work being done to add file-attachment rendering to the react form engine, where files can be uploaded and also captured via camera. The camera component being imported has issues with loading the shutter button out of the gate, hence the need to import a css file to add styles to the camera component.
The camera component though is unresponsive to css being loaded directly from the imported file and a webpack configuration has to be added to the consuming application to allow for the styles to apply to the camera component, so that the shutter button is visible out of the box.
Housing the configuration in the base webpack config file will allow for the configurations to be applied to any esm utilizing react form engine without the need of further adding configuration to each esm.
Screenshots
Related Issue
Other