Issue with compress-json module import with Vite

[acul021]

Hi, I'm having an issue with this module, imported in my project using quasar.

Description

When attempting to import the compress-json module in a Quasar project using Vite, I encounter an error preventing successful module import. The error message indicates that the decompress function is not exported by node_modules/compress-json/bundle.js.

Error Message

'decompress' is not exported by node_modules/compress-json/bundle.js, imported by src/boot/sumup.js
file: ***

Additional Information

• Version 3.0.0 was the last version, where the import worked as expected.

[beenotung]

How are you importing this library?

The bundle file is only intended for direct usage from vanilla js, if you're using vite, you should be able to import this package from npm using commonjs convention

[beenotung]

If your bundler happens to prefer the bundle file over the index file, what if you explicitly import the index file like below code?

import { decompress } from "compress-json/dist/index.js"

[acul021]

How are you importing this library?

The bundle file is only intended for direct usage from vanilla js, if you're using vite, you should be able to import this package from npm using commonjs convention

I loaded the library using yarn, so it should be the same as npm.

import { compress, decompress, trimUndefined } from 'compress-json'

If your bundler happens to prefer the bundle file over the index file, what if you explicitly import the index file like below code?

import { decompress } from "compress-json/dist/index.js"

This solved my problem, but now the IDE is complaining.

Do you think it would be possible to add a hint for the bundler, e.g. in package.json, so that you don't have to specify the file explicitly in code?

[beenotung]

import { decompress } from "compress-json/dist/index.js"

This solved my problem, but now the IDE is complaining.

Do you think it would be possible to add a hint for the bundler, e.g. in package.json, so that you don't have to specify the file explicitly in code?

It seems your setup with vite is not bundling common js modules properly.

I tested below setup with quasar (using vite 2 stable version).

Typescript Version Setup IndexPage.vue:

<template>
  <q-page class="row justify-evenly">
    <div>
      <h1>title</h1>
      <p>content</p>
      <div>json: {{ a_json }}</div>
      <div>compressed json: {{ b_json }}</div>
      <div>decompressed json: {{ c_json }}</div>
    </div>
  </q-page>
</template>

<script setup lang="ts">
import 'compress-json/bundle.js'
import type * as CompressJSONType from 'compress-json'
declare var compressJSON: typeof CompressJSONType

console.log({ compressJSON }) // log an object with {compress,decompress} and other functions

defineOptions({
  name: 'IndexPage',
})

let a = { user: 'apple' }
let b = compressJSON.compress(a)
let c = compressJSON.decompress(b)

let a_json = JSON.stringify(a, null, 2)
let b_json = JSON.stringify(b, null, 2)
let c_json = JSON.stringify(c, null, 2)
</script>

Javascript version should be without below two lines:

import type * as CompressJSONType from 'compress-json'
declare var compressJSON: typeof CompressJSONType

Addition:

It seems the import line can be either

import 'compress-json/bundle.js'

or

import 'compress-json'

Both ways are fine when using quasar with vite.

[DynamiteAndy]

I'm also having this issue, but I'm using webpack. previously I was using version 3.0.0 and having no issues with this line

import { Compressed, decompress } from 'compress-json';

I tested on version 3.0.1 and that also works fine, this issue was introduced with version 3.0.2 doing

import { Compressed, decompress} from "compress-json/dist/index.js" resolves it

[siefkenj]

I can confirm that is issue was introduced with commit bdd051f8f6e093cb5289d8dbc33341407a93753e which added the "browser": ... target in package.json. That commit seems to have been added to resolve #14

[beenotung]

I'll remove the browser field if it helps. The min version and bundle version will still be accessible via CDN when the path is explicit.

[beenotung]

I've renamed the browser field into jsdelivr, it should be working for webpack and vite now.

The patch is released as [email protected]

Please let me know if it works in your case.

[beenotung]

Also added exports field in package.json for better compatibility as suggested by @siefkenj

The patch is released as [email protected]

Thanks for everyone's help 🌱

[beenotung]

I'm going to close this issue as the problem is resolved. Please feel free to re-open it if the problem persist in your case.