codemirror related css files not getting loaded when using require


#1

I am using require js to load codemirror.

In main.js i have,
requirejs.config({
packages: [{
name: “codemirror”,
location: window.siteRootDir + ‘node_modules/codemirror’,
main: “lib/codemirror”
}],

And in my actual js file i have this

define([
‘codemirror’,
‘codemirror/mode/yaml/yaml’,
‘codemirror/addon/fold/comment-fold’,
‘codemirror/addon/fold/foldgutter’,
‘codemirror/addon/fold/foldcode’,
‘codemirror/addon/lint/lint’,
‘codemirror/addon/lint/yaml-lint’,

When the application loads, i see the js files are getting loaded but the css files (codemirror.css, lint.css, foldgutter.css) are not loaded.

Any help would be appreciated


#2

Script module loaders don’t load CSS files (at least, not in a standardized way), so those will still have to be included manually, unfortunately.


#3

Thank you. I loaded the css seperately and it worked. But now i have another issue.

The yaml lint depends on js-yaml.
I added this as a npm module and incuded it in main.js as
paths: {
‘js-yaml’: window.siteRootDir + ‘node_modules/js-yaml/lib/js-yaml’,

Then I included this in my js file as
define([
‘js-yaml’,

Still i see this error,

yaml-lint.js:22 Error: window.jsyaml not defined, CodeMirror YAML linting cannot run.

Kindly let me know how to resolve this.


#4

(My reply to your DM—please don’t ask the same question over multiple channels.)

The linter appears to expect the YAML parser under window.jsyaml, so you’ll have to somehow put it there if you’re loading it via a module loader.

CodeMirror is prettty terrible about external dependencies for now (because it grew up at a time where JS module management was a terrible mess). SorrThe linter appears to expect the YAML parser under window.jsyaml, so you’ll have to somehow put it there if you’re loading it via a module loader.

CodeMirror is prettty terrible about external dependencies for now (because it grew up at a time where JS module management was a terrible mess). Sorry about the inconvenience—this is going to be better in version 6. (Though for CSS files, there still doesn’t seem to be a good solution.)y about the inconvenience—this is going to be better in version 6. (Though for CSS files, there still doesn’t seem to be a good solution.)