Error when using rollup with highlight.js?

[fireflysemantics]

Pasting in the below description from this issue on SO: https://stackoverflow.com/questions/78971938/using-rollup-with-highlight-js

I'm trying to use rollup to build a bundle containing highlight.js.

This is the starter project I'm using to build the bundle. If we clone it and run:

git clone git@github.com:fireflysemantics/fs-lit-element-starter-ts.git b
cd b
npm i 
npm run rollup

We can see that the bundle is built without any errors.

And if we add highlight.js and import the default into src/my-dispatcher.component.ts, the following error is created.

npm i highlight.js

Import the default.

import hljs from "highlight.js";

Reference hljs on a property so that we don't get any linting errors.

h:any = hljs;

If we now run npm run rollup again the following error is produced.

Thoughts?

./build/index.js → ./build/index.bundle.js...
(!) [plugin replace] @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
[!] RollupError: node_modules/highlight.js/es/index.js (2:7): "default" is not exported by "node_modules/highlight.js/lib/index.js", imported by "node_modules/highlight.js/es/index.js".
https://rollupjs.org/troubleshooting/#error-name-is-not-exported-by-module
node_modules/highlight.js/es/index.js (2:7)
1: // https://nodejs.org/api/packages.html#packages_writing_dual_packages_while_avoiding_or_minimizing_hazards
2: import HighlightJS from '../lib/index.js';
          ^
3: export { HighlightJS };
4: export default HighlightJS;
    at getRollupError (/Users/oleersoy/Temp/b/node_modules/rollup/dist/shared/parseAst.js:282:41)
    at Object.error (/Users/oleersoy/Temp/b/node_modules/rollup/dist/shared/parseAst.js:278:42)
    at Module.error (/Users/oleersoy/Temp/b/node_modules/rollup/dist/shared/rollup.js:15321:28)
    at Module.traceVariable (/Users/oleersoy/Temp/b/node_modules/rollup/dist/shared/rollup.js:15769:29)
    at ModuleScope.findVariable (/Users/oleersoy/Temp/b/node_modules/rollup/dist/shared/rollup.js:13480:39)
    at Identifier.bind (/Users/oleersoy/Temp/b/node_modules/rollup/dist/shared/rollup.js:8386:40)
    at ExportDefaultDeclaration.bind (/Users/oleersoy/Temp/b/node_modules/rollup/dist/shared/rollup.js:6255:23)
    at Program.bind (/Users/oleersoy/Temp/b/node_modules/rollup/dist/shared/rollup.js:6251:28)
    at Module.bindReferences (/Users/oleersoy/Temp/b/node_modules/rollup/dist/shared/rollup.js:15302:18)
    at Graph.sortModules (/Users/oleersoy/Temp/b/node_modules/rollup/dist/shared/rollup.js:20535:20)

Just for reference this is the rollup configuration.

/**
 * @license
 * Copyright 2018 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */

import summary from 'rollup-plugin-summary';
import terser from '@rollup/plugin-terser';
import resolve from '@rollup/plugin-node-resolve';
import replace from '@rollup/plugin-replace';

export default {
  input: './build/index.js',
  output: {
    file: './build/index.bundle.js',
    format: 'esm',
  },
  onwarn(warning) {
    if (warning.code !== 'THIS_IS_UNDEFINED') {
      console.error(`(!) ${warning.message}`);
    }
  },
  plugins: [
    replace({'Reflect.decorate': 'undefined'}),
    resolve(),
    /**
     * This minification setup serves the static site generation.
     * For bundling and minification, check the README.md file.
     */
    terser({
      ecma: 2021,
      module: true,
      warnings: true,
      mangle: {
        properties: {
          regex: /^__/,
        },
      },
    }),
    summary(),
  ],
};

[joshgoebel]

For now I'd try using the cdn-release instead which should have "real" ES6 modules...

[fireflysemantics]

@joshgoebel the build is for an open source web component that uses highlight.js to do what it does ... but with a custom element ... and rollup is being used to bundle highlight.js into the component ... So crossing my fingers for a fix

[joshgoebel]

Repeating: For now I'd suggest using the cdn-release instead which should have "real" [independent] ES6 modules...

...which is exactly what you are asking for. We purposely bundled the npm library the way we did (per the docs) and at this late point in the game that's probably not changing. Version 12 will be ESM only, until then the cdn-assets build should suffice for anyone wanting to re-bundle ES6.

https://www.npmjs.com/package/@highlightjs/cdn-assets/v/11.10.0

[fireflysemantics]

@joshgoebel I tried this, and it looks like Typescript does not have a way of importing from CDN assets ...

https://stackoverflow.com/questions/78983373/importing-highlight-js-as-a-cdn-resource-in-a-typescript-project?noredirect=1#comment139262477_78983373

[joshgoebel]

I linked you to the NPM package where we publish all the assets as an npm package. You don't need to actually import them from a CDN - you just need the files. Importing should be the same as with any other npm package.

[fireflysemantics]

@joshgoebel ooooh - OK - It's looking more realistic now :). I tried this import:

import hljs from '@highlightjs/cdn-assets/highlight.js';

But Typescript creates this error ( Looks like @types/highlightjs ) doesn't understand the CDN assets) .

Could not find a declaration file for module '@highlightjs/cdn-assets/highlight.js'. '/Users/oleersoy/Temp/b/node_modules/@highlightjs/cdn-assets/highlight.js' implicitly has an 'any' type. Try npm i --save-dev @types/highlightjs__cdn-assets if it exists or add a new declaration (.d.ts) file containing declare module '@highlightjs/cdn-assets/highlight.js';ts(7016)

Do you by chance have a workaround for this to? Thanks for all your help this.

[joshgoebel]

implicitly has an 'any' type.

That is a warning, not an error... but I really don't know further, sorry.

[taufik-nurrohman]

May be related to the assert part:

https://v8.dev/features/import-assertions

[fireflysemantics]

@joshgoebel for me it shows up as an error.

src/my-dispatcher.component.ts:4:18 - error TS7016: Could not find a declaration file for module '@highlightjs/cdn-assets/highlight.js'. '/Users/oleersoy/Temp/b/node_modules/@highlightjs/cdn-assets/highlight.js' implicitly has an 'any' type. Try npm i --save-dev @types/highlightjs__cdn-assets if it exists or add a new declaration (.d.ts) file containing declare module '@highlightjs/cdn-assets/highlight.js';

4 import hljs from '@highlightjs/cdn-assets/highlight.js';

Found 1 error in src/my-dispatcher.component.ts:4

I"ll keep plugging away at it though.  I think I may just have to forgo using Typescript for this project, and do pure Javascript instead.

Thanks again for all the input.  

[HoikanChan]

Got same error with rollup

[!] Error: 'default' is not exported by ../../node_modules/highlight.js/lib/index.js, imported by ../../node_modules/highlight.js/es/index.js https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module ../../node_modules/highlight.js/es/index.js (2:7) 1: // https://nodejs.org/api/packages.html#packages_writing_dual_packages_while_avoiding_or_minimizing_hazards 2: import HighlightJS from '../lib/index.js'; ^ 3: export { HighlightJS }; 4: export default HighlightJS; Error: 'default' is not exported by ../../node_modules/highlight.js/lib/index.js, imported by ../../node_modules/highlight.js/es/index.js at error (D:\workspace\ai-dsl-engine\node_modules\rollup\dist\shared\rollup.js:198:30) at Module.error (D:\workspace\ai-dsl-engine\node_modules\rollup\dist\shared\rollup.js:12560:16) at Module.traceVariable (D:\workspace\ai-dsl-engine\node_modules\rollup\dist\shared\rollup.js:12919:29) at ModuleScope.findVariable (D:\workspace\ai-dsl-engine\node_modules\rollup\dist\shared\rollup.js:11571:39) at Identifier.bind (D:\workspace\ai-dsl-engine\node_modules\rollup\dist\shared\rollup.js:7570:40) at ExportDefaultDeclaration.bind (D:\workspace\ai-dsl-engine\node_modules\rollup\dist\shared\rollup.js:5400:23)
at Program.bind (D:\workspace\ai-dsl-engine\node_modules\rollup\dist\shared\rollup.js:5396:73) at Module.bindReferences (D:\workspace\ai-dsl-engine\node_modules\rollup\dist\shared\rollup.js:12556:18) at Graph.sortModules (D:\workspace\ai-dsl-engine\node_modules\rollup\dist\shared\rollup.js:23193:20) at Graph.build (D:\workspace\ai-dsl-engine\node_modules\rollup\dist\shared\rollup.js:23071:14)

error Command failed with exit code 1.

[joshgoebel]

A simple build against our ESM CDN builds (and cdn_release) with rollup should work just fine: (just built from main)

❯ ./tools/build.js -t cdn
Starting build.
Finished build.
Writing style files.
Building language files.
...................................................................................................................................................................................................
Building extra/highlightjs-1c-enterprise/dist/1c-enterprise.min.js.
Building extra/highlightjs-robots-txt/dist/robots-txt.min.js.

Building highlight.js.
Building es/core.js.
Building es/highlight.js.
-----
Embedded Lang           : 0 bytes
All Lang                : 1226701 bytes
highlight.js            : 80686 bytes
highlight.min.js        : 20546 bytes
highlight.min.js.gz     : 8183 bytes
es/core.js              : 76000 bytes
es/highlight.js         : 76000 bytes
es/core.min.js          : 20444 bytes
es/core.min.js.gz       : 8145 bytes
es/highlight.min.js     : 20444 bytes
es/highlight.min.js.gz  : 8145 bytes
-----
❯ rollup -c test/builds/rollup_import_cdn_build_esm.mjs

test/builds/cdn_build_as_esm.mjs → build/bundle.js...
created build/bundle.js in 120ms

[joshgoebel]

4 import hljs from '@highlightjs/cdn-assets/highlight.js';

Probably not what you want, the es modules are in the es folder. Top-level is CJS.

[joshgoebel]

And using the Node ESM build:

❯ ./tools/build.js -t node
Starting build.
Finished build.
Writing styles.
Writing package.json.
Writing languages.
...................................................................................................................................................................................................
Writing highlight.js
❯ rollup -c test/builds/rollup_import_node_build_esm.mjs

test/builds/node_build_as_esm.mjs → build/bundle.js...
created build/bundle.js in 1s
❯ node build/bundle.js
Pass: browser build works with Node.js just fine.

[joshgoebel]

Closing this until someone can create a PR with an actual broken build (like the several i just committed that all work).

[fireflysemantics]

@joshgoebel does that mean it should support a Typescript rollup bundle now?

I tried doing an import like this from the es folder of the @highlightjs/cdn-assets assets folder in the typescript project referenced in the begging of this issue like this:

import hljs from "@highlightjs/cdn-assets/es/highlight.js";

, and it produces this error:

Could not find a declaration file for module '@highlightjs/cdn-assets/es/highlight.js'. '/Users/oleersoy/Temp/Remove/hljs-test-rollup/b/node_modules/@highlightjs/cdn-assets/es/highlight.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/highlightjs__cdn-assets` if it exists or add a new declaration (.d.ts) file containing `declare module '@highlightjs/cdn-assets/es/highlight.js';`ts(7016)

I don't think there is a @types/highlightjs__cdn-assets package ... Thoughts?

[joshgoebel]

See test/builds/cdn_build_as_esm.mjs... it works, as shown above.

I'm using relative paths from the source to the library, I don't know how to make npm or your named aliases stuff work, but that's a question for Rollup I think, not us. Probably need some plugin?

[joshgoebel]

typescript project

Oh sorry - I have no idea how to use this a part of a typescript project... some typescript wizard might need to help us with that. We do ship type files in the builds.