[BUG] "Can't resolve..." error when import RuleTable component from rule-components #1206
Comments
|
The bug is fairly easy to solve by using |
|
@bastilian any thoughts on this one? |
|
@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 |
|
Well the thing is, the build component should not even resolve the |
|
@gkarat well I have found the issue. The 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? |
|
@Hyperkid123 Check the PR I mentioned before: https://github.com/RedHatInsights/frontend-components/pull/390/files |
|
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. |
|
@Hyperkid123, @rvsia, thanks a lot for the clarification. I cannot comment anyhow on the necessity of re-export in this case. |
|
I believe it is not necessary. I will fix the import so we should not need the workaround. |
Describe the bug
When you follow the example of RuleTable component usage here https://clouddot.pages.redhat.com/frontend-components/dev/rule-components/index.html and import RuleTable to your app, you will run into the build error. The issue is found for the rule-components version = 3.2.1 (latest).
To Reproduce
Steps to reproduce the behavior:
import RuleTable from '@redhat-cloud-services/rule-components/RuleTable';npm run build/yarn build)Module not found: Error: Can't resolve './index.scss' in '/home/gkaratae/ccx/ocp-advisor/node_modules/@redhat-cloud-services/rule-components/esm/RuleTable'. See below for the full error stack.Expected behavior
There is no build error related to the rule-components library.
Full error stack
The text was updated successfully, but these errors were encountered: