kintone/js-sdk

[Bug] Cannot import when using esbuild

future-ota3727 opened this issue · 3 comments

future-ota3727 commented

Summary

When building with esbuild, @kintone/rest-api-client could not be imported.

I have prepared a sample project where you can tried two patterns of esbuild output format: commonJS and ESModule.
sample project (This is the same as Reproduction below.)

I think the reason for not being able to import is as follows.

  • In ESModule, esbuild combines scripts into one file, so require(".") defined by import.meta.url will not working properly, which causes an error.
  • In CommonJS, import.meta.url will be blank, so you will get an error.

Therefore, I think it is necessary to change to a method that does not use import.meta.url.

Target Package

@kintone/rest-api-client

Target Version

5.0.8

Reproduction

This is sample project for minimum reproduction.
https://github.com/future-ota3727/esbuild-import-meta

You can try 2 patterns for the esbuild output format.

  • ESModule
  • CommonJS

Expected Behavior

Import succeeded without any errors.

Actual Behavior

In ESModules, I got error:

node:internal/modules/cjs/loader:933
  const err = new Error(message);
              ^

Error: Cannot find module '.'

In CommonJS, I got error:

node:internal/modules/cjs/loader:1224
    throw new ERR_INVALID_ARG_VALUE('filename', filename, createRequireError);
    ^

TypeError [ERR_INVALID_ARG_VALUE]: The argument 'filename' must be a file URL object, file URL string, or absolute path

Environment

System:
OS: Linux 5.10 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
Memory: 24.27 GB / 24.84 GB
Container: Yes
Shell: 5.1.16 - /bin/bash
Binaries:
Node: 18.18.0 - ~/.nvm/versions/node/v18.18.0/bin/node
npm: 9.8.1 - ~/.nvm/versions/node/v18.18.0/bin/npm
npmPackages:
@kintone/rest-api-client: 5.0.8 => 5.0.8
esbuild: 0.20.0 => 0.20.0

tasshi-me commented

@future-ota3727
Thank you for your feedback!

That is the unexpected behavior of esbuild and dual package, and we are still looking for a fundamental solution.
You can see the details of that behavior and workaround at https://zenn.dev/sosukesuzuki/articles/d8220ba2d869f0.

There are three workarounds.

  1. Create esbuild plugin to load rest-api-client as CJS (described in the above article)
  2. Bundle with another bundler, Rollup, webpack, etc.
  3. Use require.

In CJS file

Loading rest-api-client from CJS by require

const {KintoneRestAPIClient} = require("@kintone/rest-api-client")

console.info('start')
const client = new KintoneRestAPIClient({
  baseUrl: 'https://hoge.hoge.hoge',
  auth: { apiToken: 'hoge' },
})
console.log('end')

=> Bundled and run successfully

In ESM

Loading rest-api-client from ESM by require

import { createRequire } from "module";
const require = createRequire(import.meta.url);
const {KintoneRestAPIClient} = require("@kintone/rest-api-client")

console.info('start')
const client = new KintoneRestAPIClient({
  baseUrl: 'https://hoge.hoge.hoge',
  auth: { apiToken: 'hoge' },
})
console.log('end')

=> Not bundled but run successfully
(rest-api-client is loaded by require in bundled file)

future-ota3727 commented

@mshrtsr
Thank you for your reply.
I hope you find a good solution.

P.S.
I missed the Japanese issue.
Thank you for relating it.

  • ❤️1