Can't import styles

[joshgoebel]

Not sure this is really fixed yet - it also happens on regular npm package. I assume it's a problem here because 10.x works but 11.x does not - I don't have this issue with any other npm package. I migrated to 11.0.0 when it came out and had to roll back to latest 10.x because of this problem. I upgraded to 11.1.0 this morning and still have this issue.

dependencies:

"dependencies": {
  ...
  "highlight.js": "11.1.0",
  "markdown-it": "12.1.0",
  "markdown-it-attrs": "4.0.0",
  ...
}

imports:

import MarkdownIt from 'markdown-it';
import MarkdownItAttrs from 'markdown-it-attrs';
import hljs from 'highlight.js/lib/core';
import 'highlight.js/styles/github.css';

hljs.registerLanguage('json', require('highlight.js/lib/languages/json'));
hljs.registerLanguage('markdown', require('highlight.js/lib/languages/markdown'));
hljs.registerLanguage('python', require('highlight.js/lib/languages/python'));
hljs.registerLanguage('xml', require('highlight.js/lib/languages/xml'));
hljs.registerLanguage('yaml', require('highlight.js/lib/languages/yaml'));

attempt to lint (build same problem, but not from eslint obviously):

Oops! Something went wrong! :(

ESLint: 7.29.0

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './styles/github.css' is not defined by "exports" in /Users/johnm/src/sdvi/swarm/node_modules/highlight.js/package.json
    at throwExportsNotFound (internal/modules/esm/resolve.js:285:9)
    at packageExportsResolve (internal/modules/esm/resolve.js:491:3)
    at resolveExports (internal/modules/cjs/loader.js:444:36)
    at Function.Module._findPath (internal/modules/cjs/loader.js:484:31)
    at findModulePath (/Users/johnm/src/sdvi/swarm/node_modules/eslint-import-resolver-alias/index.js:99:27)
    at Object.exports.resolve (/Users/johnm/src/sdvi/swarm/node_modules/eslint-import-resolver-alias/index.js:75:10)
    at v2 (/Users/johnm/src/sdvi/swarm/node_modules/eslint-module-utils/resolve.js:117:23)
    at withResolver (/Users/johnm/src/sdvi/swarm/node_modules/eslint-module-utils/resolve.js:122:14)
    at fullResolve (/Users/johnm/src/sdvi/swarm/node_modules/eslint-module-utils/resolve.js:139:22)
    at Function.relative (/Users/johnm/src/sdvi/swarm/node_modules/eslint-module-utils/resolve.js:84:10)
error Command failed with exit code 2.

However, this works, but is not right:

import MarkdownIt from 'markdown-it';
import MarkdownItAttrs from 'markdown-it-attrs';
import hljs from 'highlight.js/lib/core';
import '../../node_modules/highlight.js/styles/github.css';

hljs.registerLanguage('json', require('../../node_modules/highlight.js/lib/languages/json'));
hljs.registerLanguage('markdown', require('../../node_modules/highlight.js/lib/languages/markdown'));
hljs.registerLanguage('python', require('../../node_modules/highlight.js/lib/languages/python'));
hljs.registerLanguage('xml', require('../../node_modules/highlight.js/lib/languages/xml'));
hljs.registerLanguage('yaml', require('../../node_modules/highlight.js/lib/languages/yaml'));

Edit
Actually, the ../../node_modules/ bit makes eslint work, but both my current webpack and rollup builds fail with the path specified.

Originally posted by @bitencode in #3223 (comment)

[joshgoebel]

Splitting this out as this is not the same issue. The prior thread is related to being unable to import .min.js files from the CDN build (which has been resolved) and you're talking about importing styles from the npm build (afaict).

is not defined by "exports" in /Users/johnm/src/sdvi/swarm/node_modules/highlight.js/package.json

I would guess that the highlight.js version used by swarm is broken/older, not 11.1... If you look at the latest NPM builds for the main library (not CDN) you'll see we very much do export styles. That issue has also been resolved AFAIK.

[joshgoebel]

Oh I was reading that like swarm was a dependency of your project but perhaps it's the main project...? if so then I'm not sure what is happening... but if you open package.json in highlight.js you should be able to confirm that the exports are all listed there...

Maybe you aren't using the version you think you are? I'd check out the file it's saying doesn't have the exports and see if it does or doesn't.

Note: If your linter doesn't properly support wildcard exports then you may need to upgrade it or simply disable this warning.

[bitencode]

Thanks @joshgoebel, sorry for not realizing it was a separate issue - thanks for splitting it out.
When I look at the npm package locally I can see the exports, exactly like you show above, so that has me a bit confused 😕.

One thing I did forget to mention (though it shouldn't make a difference), is this is a mono-repo where swarm is the git repository and we have services, ui libraries, and several application all using the libraries in a packages folder. That results in the npm packages being located in swarm/node_modules/... and our libraries/apps being located in swarm/packages/<package name>/ everything else seems to be working. Yarn is linking everything up properly though.

I did try to disable eslint for those lines (the failure happens for the github.css file and all language files that are being required - require('highlight.js/lib/languages/markdown'). However, there is nothing I can find to disable - the error is happening in what appears to be an internal node require function, so evening using /* eslint disable */ at the top of the file doesn't prevent the error from occurring.

Just for confirmation - I have the following versions:
node: v12.19.1
yarn: v1.23.0-20200928.1349
highlight.js: 11.1.0
eslint: v7.29.0

Sounds like no one else is having problem with this, so I'm going to guess it's some configuration problem we've missed in our lint, build, tool chain. I'll look at it some more and when I figure out what's gone amiss I'll come back here, outline the problem and close (assuming I find and fix a configuration problem)

Thanks!

[joshgoebel]

Good luck.

v12.19.1

This isn't the latest release, perhaps there are subpath bugs that a more recent v12 release fixes. A lot of the ESM stuff was back-ported to v12 in minor releases and therefore it improved with time... just one idea.

[joshgoebel]

Actually, node doesn't import styles - it imports JS... so I'd suggest perhaps it's your build pipeline that's choking up and may need one of the pieces upgraded?

If you make the exports static vs the wildcard I wonder if that would fix it? Would be an interesting data point...

[bitencode]

@joshgoebel Thanks for your help and input on this. I dug in a bit more and found that one of our packages ended up with a slight misconfiguration of build tools when we move them all into the mono-repo. For some reason everything seems to be working "fine" until this upgrade that explicit defines the exported packages. Anyway, it was a problem with the configuration for eslint-import-resovler-alias and a similar config problem for babel-plugin-module-resolver. Once I fixed those, it all started working.
Thanks! and sorry for the issue logged here - you can close it.

[joshgoebel]

No problem. Glad you got it sorted.