[BUG] "Can't resolve..." error when import RuleTable component from rule-components

[redhatinsights]

[BUG] "Can't resolve..." error when import RuleTable component from rule-components

[Hyperkid123]

I believe it is not necessary. I will fix the import so we should not need the workaround.

[gkarat]

The bug is fairly easy to solve by using import RuleTable from '@redhat-cloud-services/rule-components/RuleTable/RuleTable'; instead. Do we need to update the docs instead?

[akofink]

@bastilian any thoughts on this one?

[rvsia]

@gkarat This import works because ESM should use shared style files with CJS, however, our babel plugin for translating scss imports work only with ... imports. And the RuleTable component includes a scss re-export for some reason. So it is a bug in the component, not a documentation change. 😏 By using the import, you actually use a wrong module version of the component (CJS modules are not intended for modern browsers) and it could introduce some unexpected errors (as you mix CJS/ESM components in your app) and bigger bundle size (some components will be bundled in both CJS&ESM versions.)

I made a fix that adds export translator: #1228 However, I am not sure if we want it and if we should not just import the scss file instead of re-exporting, but I am not absolutely sure why this change https://github.com/RedHatInsights/frontend-components/pull/390/files was ever made and if really need it now. @karelhala cc @Hyperkid123

[Hyperkid123]

Well the thing is, the build component should not even resolve the .scss files but it should import only the .css files. 🤔 maybe we forgot to add the custom loader for the rule-component package? Gimme a sec to debug it.

[Hyperkid123]

@gkarat well I have found the issue. The RuleTable component is re-exporting the scss file as style. I am not but I am 100% sure it won't work with CSS modules which is the only thing I can imagine this would be useful.

This fixes the problem

diff --git a/packages/rule-components/src/RuleTable/RuleTable.js b/packages/rule-components/src/RuleTable/RuleTable.js
index 760e6e7f..003e24c0 100644
--- a/packages/rule-components/src/RuleTable/RuleTable.js
+++ b/packages/rule-components/src/RuleTable/RuleTable.js
@@ -11,7 +11,7 @@ import flatten from 'lodash/flatten';
 import debounce from 'lodash/debounce';
 import isEqual from 'lodash/isEqual';
 import { calculateMeta, calculateActiveFilters, createRows } from './helpers';
-export { default as style } from './index.scss';
+import './index.scss';
 
 class RuleTable extends Component {
     state = {

Before I apply it @akofink @gkarat is there any reason why the styles are re-exported?

[rvsia]

@Hyperkid123 Check the PR I mentioned before: https://github.com/RedHatInsights/frontend-components/pull/390/files

[Hyperkid123]

Yeah, I saw it but it won't really help with the problem. The rule component is using CSS modules syntax but the component nor the library is set up to use/build CSS modules. If you want to consume the scss, you can import it into the project and go from there. SCSS files are available.

[gkarat]

@Hyperkid123, @rvsia, thanks a lot for the clarification. I cannot comment anyhow on the necessity of re-export in this case.