Bug: does not work with vite

[YousefED]

Describe the bug Using a vite+ts+react starter project, tslog does not work. Seems to be related to how the entry points are defined in package.json (it loads the node version in the browser).

To Reproduce https://stackblitz.com/edit/vitejs-vite-kky7d1?file=package.json,src%2FApp.tsx&terminal=dev

[terehov]

Thanks, I'll see what I can do :-)

[terehov]

I was able to reproduce that error, but don't know Vite well enough. Do you maybe have an idea why it would pick the Node version?

I use the browserfield in package and building works with esbuild.

https://github.com/fullstack-build/tslog/blob/master/package.json#L17

https://docs.npmjs.com/cli/v9/configuring-npm/package-json#browser

[luo3house]

Vite treat all modules as ES modules. When import from 'tslog', Vite resolved these modules from exports.import:

• -> ./dist/nodejs/esm/index.js
• -> ./dist/nodejs/esm/BaseLogger.js
• -> ./dist/nodejs/esm/runtime/node.js
• -> node:os The browser throws due to not support

Mapping node.js runtime to browser runtime can solve this problem.

{
  "browser": {
    "./dist/nodejs/esm/runtime/nodejs/index.js": "./dist/nodejs/esm/runtime/browser/index.js"
  }
}

And the built IIFE does not export anything, I prefer distributing it as CDN link for HTML script reference, not in package browser field.

[darklow]

I tried previous version and had same os.hostname error in the browser, but it was working fine from server side.

Now I just installed newly released version 4.4.0-0 and now if I import Logger I can't run anymore the app and it is crashing with following error:

 ERROR  [worker reload] [worker init] Cannot find module '/Users/userx/www/project/project/frontend3/node_modules/tslog/dist/nodejs/esm/BaseLogger' imported from /Users/userx/www/project/project/frontend3/node_modules/tslog/dist/nodejs/esm/index.js

  at new NodeError (node:internal/errors:371:5)
  at finalizeResolution (node:internal/modules/esm/resolve:392:11)
  at moduleResolve (node:internal/modules/esm/resolve:899:10)
  at defaultResolve (node:internal/modules/esm/resolve:1011:11)
  at ESMLoader.resolve (node:internal/modules/esm/loader:422:30)
  at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)
  at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
  at link (node:internal/modules/esm/module_job:75:36)

 3: 0x1023208fc node::fs::FSReqPromise<node::AliasedBufferBase<double, v8::Float64Array, void> >::ResolveStat(uv_stat_t const*) [/Users/userx/.nvm/versions/node/v17.0.1/bin/node]
 4: 0x10232890c node::fs::FSReqAfterScope::~FSReqAfterScope() [/Users/userx/.nvm/versions/node/v17.0.1/bin/node]
 5: 0x102328dc4 node::fs::AfterOpenFileHandle(uv_fs_s*) [/Users/userx/.nvm/versions/node/v17.0.1/bin/node]
 6: 0x102b8e2bc uv__work_done [/Users/userx/.nvm/versions/node/v17.0.1/bin/node]
 7: 0x102b91a1c uv__async_io [/Users/userx/.nvm/versions/node/v17.0.1/bin/node]
 8: 0x102ba3730 uv__io_poll [/Users/userx/.nvm/versions/node/v17.0.1/bin/node]
 9: 0x102b91eac uv_run [/Users/userx/.nvm/versions/node/v17.0.1/bin/node]
10: 0x102274e00 node::SpinEventLoop(node::Environment*) [/Users/userx/.nvm/versions/node/v17.0.1/bin/node]
11: 0x1023b4fdc node::worker::Worker::Run() [/Users/userx/.nvm/versions/node/v17.0.1/bin/node]
12: 0x1023b8164 node::worker::Worker::StartThread(v8::FunctionCallbackInfo<v8::Value> const&)::$_3::__invoke(void*) [/Users/userx/.nvm/versions/node/v17.0.1/bin/node]
13: 0x1810da06c _pthread_start [/usr/lib/system/libsystem_pthread.dylib]
14: 0x1810d4e2c thread_start [/usr/lib/system/libsystem_pthread.dylib]

Process finished with exit code 134 (interrupted by signal 6: SIGABRT)

It crashes just by adding these lines:

import {Logger} from "tslog";

I do checked and file is there, so something must be at setup or import level:

ls node_modules/tslog/dist/nodejs/esm/BaseLogger.js
node_modules/tslog/dist/nodejs/esm/BaseLogger.js

[terehov]

@darklow Can you show me your package.json? Thx

[darklow]

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare && npx prisma generate --schema prisma/schema_front.prisma && npx prisma generate --schema prisma/schema_news.prisma"
  },
  "devDependencies": {
    "@nuxtjs/color-mode": "^3.1.8",
    "@nuxtjs/tailwindcss": "^6.1.3",
    "@tailwindcss/forms": "^0.5.3",
    "@tailwindcss/typography": "^0.5.7",
    "@vueuse/components": "^9.6.0",
    "@vueuse/core": "^9.6.0",
    "autoprefixer": "^10.4.12",
    "concurrently": "^7.4.0",
    "nuxt": "3.0.0",
    "postcss": "^8.4.18",
    "prisma": "^4.5.0",
    "tailwindcss": "^3.1.8",
    "vee-validate": "4.6.10",
    "yup": "0.32.11"
  },
  "dependencies": {
    "@elastic/elasticsearch": "^7.17.0",
    "@prisma/client": "^4.6.1",
    "axios": "^1.1.3",
    "pino": "^8.7.0",
    "pino-pretty": "^9.1.1",
    "react-native-logs": "^5.0.1",
    "tslog": "^4.4.0-0"
  }
}

[terehov]

@luo3house Thank you for your hint! :-)

@YousefED Can you please check V4.4.0?

I tried your example and it worked!

[darklow]

@terehov Now I also tried with 4.4.0 and it worked now, before I installed version 4.4.0-0 and it was failing, not sure how these versions are different, that version with -0 suffix I found on npm. Thank you for the fixes!