Import issues

[ferndot]

Import is failing in my VueJS application

Steps to reproduce:

import printJS from 'print-js'

printJS({
  printable: {'name': 'Test', 'description': '1g', 'quantity': 4},
  properties: ['name', 'description', 'quantity'],
  type: 'json'
})

Error:
TypeError: print_js__WEBPACK_IMPORTED_MODULE_1___default(...) is not a function[Learn More]

[crabbly]

Hi Joshua,

When you import the lib inside the same file you are writing your code (same scope, in your case, inside your Vue component), using import printJS from 'print-js' is a problem, since the variable printJS will be overwritten.

Use import print from 'print-js' instead.

[ferndot]

Thanks @crabbly. I was originally using that (and just changed it back). For some reason, the error still occurs.

I had separated this into a utility file. This is the entire content of the file:

import print from 'print-js'

export const printJSON = data => {
  print({
    printable: data,
    properties: ['name', 'description', 'quantity'],
    type: 'json'
  })
}

[crabbly]

The library exposes a global variable printJS. Here is the usage:

import print from 'print-js'

export const printJSON = data => {
  printJS({
    printable: data,
    properties: ['name', 'description', 'quantity'],
    type: 'json'
  })
}

[ferndot]

@crabbly that works, thank you.

[crabbly]

Btw, you can customize the properties name when printing JSON data. You may want to use that.

It isn't in the documentation yet, but here is an example showing its usage:
https://jsfiddle.net/crabbly/bLq52fyu/

[stefanorie]

I have the same issue with importing, after updating to version "1.0.50" from "1.0.47".

However I'm using TypeScript, so it will complain about "printJS is not defined" when I do the importing way you suggest. Also that way you have an unused import. And last, I still get the same error that way.
In "1.0.47" I can still use import printJS from 'print-js';, so something must have changed regarding the import stuff.

Any idea how to get it working with TypeScript?

[crabbly]

Hi @stefanorie ,
Are you importing the library inside the same file where you call the printJS function?

To prevent any "unused import" message, you can just import the library without a name:
import 'print-js'

The library automatically exposes a global variable printJS.

[stefanorie]

Great, that works perfectly! Thanks for the help.

I did need to add declare var printJS: any; so TypeScript knows it's a global variable.

[crabbly]

Hey Stefan, thanks for the feedback.

I'm wondering if we could add this declaration to the library TypeScript interface.
Could you help?

Here is the library interface file:
https://github.com/crabbly/Print.js/blob/master/index.d.ts

[crabbly]

Just published a new version to npm which has proper support for module import.
The library will still expose a global variable printJS, but the recommend usage now should be to import the package at the same file where it will be used:

For ex.:

import printJS from 'print-js'

printJS('path-to.pdf')

Run npm update print-js to get the latest version.

Thx to @gabrielmdeal and @samtsai