Troubles with new import method in the browser

[jaunt]

I've been using/loving roarr for quite a while using versions up to and including 4.x.

After upgrading to 7.0.1, I can't get the example code to work:

For example, this is how I'm importing into my vue-cli webpack 4 project:

import { Roarr as log } from "roarr";

const Logger = log.child({
  application: "webapp",
  version: process.env.VERSION,
});

At run time I get:

Uncaught TypeError: roarr__WEBPACK_IMPORTED_MODULE_2__.Roarr is undefined

And of course log ends up undefined. Ideas? Thanks!

[gajus]

What does the following produce?

import * as Roarr from 'roarr';
console.log(Roarr);

[Camotubi]

Hi. I'm having the same issue as @jaunt .

I did what you asked:

It seems that the logger function is the default export but that is not what the types of the module say.

I'm not sure if there is a mismatch with the types and the actual module implementation.

I installed the package with npm i roarr. Suppusedly the version 7.0.2 was installed but Im seeing an array with version 5.0.0 in the console.log of the module. I don't know if this is related.

  "dependencies": {
    "@jamescoyle/vue-icon": "^0.1.0",
    "@tiptap/extension-highlight": "^2.0.0-beta.13",
    "@tiptap/starter-kit": "^2.0.0-beta.76",
    "@tiptap/vue-3": "^2.0.0-beta.40",
    "@types/pdfjs-dist": "^2.7.3",
    "axios": "^0.21.1",
    "bulma": "^0.9.2",
    "core-js": "^3.6.5",
    "papaparse": "^5.3.1",
    "pdfjs-dist": "^2.8.335",
    "roarr": "^7.0.2",
    "vue": "^3.0.5",
    "vue-class-component": "^8.0.0-0",
    "vue-debounce": "^2.6.0",
    "vue-month-picker": "^1.4.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },

[peitschie]

This ended up working for me:

import { default as log } from "roarr";

I'm using this with webpack and ts-loader. I guess something about the type definition and the ES6 module don't align, but I can't really tell what...

[peitschie]

Digging deeper, I think this is caused by a mismatch in behaviour between tsc and webpack when resolving this dependency, possible related to webpack using the browser field.

When I ctrl+click on the import definition, I'm taken to Roarr.d.ts, but when webpack produces the output, it actually includes browser.js instead (https://github.com/gajus/roarr/blob/master/src/browser.ts) which has a different export interface.

Related issues:

• Node browser resolution strategy microsoft/TypeScript#7753
• browser vs module fields in package.json webpack/webpack#4674

I can align typescript's expectations here by specifically including the browser instance instead of the package-level include. E.g., this compiles and works perfectly for me in the browser with webpack:

import { default as log } from "roarr/dist/src/browser";

const Logger = log.child({
  application: "webapp",
  version: process.env.VERSION,
});

[gajus]

Addressed in https://github.com/gajus/roarr/releases/tag/v7.0.5