Unable to import CSS from tabulator-tables node module

grosscol commented 2 years ago

Problem

Importing the tabulator tables styles using a relative path to the node module does not behave as expected. Confoundingly, the import of the styles from the bootstrap node module behaves as expected. The relevant docs from Vue's static asset handling indicates the tabulator-tables import should work.

// src/pages/region/main.js
import 'bootstrap/dist/css/bootstrap.css'
import 'tabulator-tables/dist/css/tabulator_bootstrap4.css'

Some discussion about this issue on a VueJS forum post

Existing research

The webpack config that vue-cli ends up using can be profiled using webpack stats:

# emit webpack stats file.
npx webpack --config node_modules/@vue/cli-service/webpack.config.js --profile --json=raw-stats.json
# format emitted stats
jq . raw-stats.json > comp-stats.json

Looking at the output there, the tabulator-tables module ends up with a null resolved module. E.g.

"resolvedModule": "./node_modules/css-loader/dist/cjs.js??clonedRuleSet-14.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-14.use[2]!./node_modules/tabulator-tables/dist/css/tabulator_bootstrap4.css",
              "type": "harmony side effect evaluation",
              "active": true,
              "explanation": "",
              "userRequest": "../../../css-loader/dist/runtime/api.js",
              "loc": "3:0-82",
              "moduleId": null,
              "resolvedModuleId": null

Workaround

Copying the styles from the tabulator-tables module and then importing them as a project asset is the functioning workaround.

// src/pages/region/main.js
import 'bootstrap/dist/css/bootstrap.css'
import '@/assets/tabulator_workaround.css'

Desired State

Relative import style from tabulator-tables node module working.
Test case to verify the style is present

grosscol commented 2 years ago

Verify that it was not the change in path that is causing the issue with the loaders. Within the tabulator-tables 5 package, copy the the css to the path they were placed in the tabulator-tables 4 package. Observe it this changes how the CSS is being handled by the webpack loaders.

abought commented 2 years ago

Experiments in another webpack 5 environment showed that the file was being found and loaded, but not included in the final bundle.

statgen / bravo_vue