import in webpack not working

[d4l3k]

When I try to use it via webpack + Polymer 3 + typescript it throws the error:

index.ts:53 ReferenceError: hljs is not defined
    at Object../node_modules/@kuscamara/code-sample/vendor/highlight/highlight.pack.js (highlight.pack.js:formatted:1)
    at __webpack_require__ (bootstrap:767)
    at fn (bootstrap:130)
    at Module../node_modules/@kuscamara/code-sample/code-sample.js (highlight.pack.js:formatted:1)
    at __webpack_require__ (bootstrap:767)
    at fn (bootstrap:130)
    at Module../src/components/index-page/index.ts (indexPage.684e59f8986e2130e02b.chunk.js:76)
    at __webpack_require__ (bootstrap:767)
    at fn (bootstrap:130)

Code:

import '@kuscamara/code-sample/code-sample.js'

Full code https://github.com/d4l3k/feedlight/blob/cc770115d7b85cb3674d74c2610a9773d68b4be3/www/src/components/index-page/index.ts#L3

[d4l3k]

This looks related to highlightjs/highlight.js#712

[d4l3k]

This was fixed by removing import './vendor/highlight/highlight.pack.js'; and then manually importing hljs and adding it to the window.

import hljs from 'highlight.js/lib/highlight'
import javascript from 'highlight.js/lib/languages/javascript'
import xml from 'highlight.js/lib/languages/xml'
hljs.registerLanguage('javascript', javascript)
hljs.registerLanguage('xml', xml)
window['hljs'] = hljs

[kcmr]

@d4l3k Thank you for submitting the issue and the fix and sorry for my late response.

highlight won't be imported by code-sample in version 4 that is already available for installation as @kuscamara/code-sample@next.

[dfsq]

@kcmr When trying to use version @next I get warning (which is an error actually, since component also stopes working)

style-gather.js:79 Could not find style data in module named code-sample-theme