ES6 import fails

[vans163]

near-cli uses this package but with require.

On a platform with no require. (but ES6 import)

Using it with import leads to a slew of issues (for use in a regular JS app without browser).

[ghost]

Same with #593, can't work with https://vitejs.dev/, which uses esbuild.

We should prioritize es6 module in 2021!

[vans163]

Any timeline on this, this is a blocker for us to do some interesting stuff.

[volovyks]

Let's continue the discussion in this issue: #593
@vans163 @VuHG you can submit PR's, but please, check #598 first.
I will try to get back to it later if it's not solved.

[vans163]

It seems these 2 issues are unrelated to this next question but I was wondering if its possible to get the ES6 version of this library to work similar to near-cli, so transactions can be signed+submitted to mainnet if fed a seedphrase/accesskey in a non-browser app.

[volovyks]

@MaximusHaximus , we need some help from a JS person here :) Is it something that we can fix and how?

[MaximusHaximus]

@volovyk-s Yes, we can publish an both an esm module version and the currently commonjs version.

We'd keep publishing the standard JS version to /lib/, and leave main in package.json set to lib/index.js.
However, we'd then also publish the ESM version to /esm/ also -- it just takes running tsc with a different config json file that targets esnext for the module IIRC.

I think that should be all we need to do :). Anyone wanting to import ESM modules would just import from near-api-js/esm :)

Check out this handy-dandy example changset from the Sentry repo where they added an ESM build to their existing pipeline:
https://github.com/getsentry/sentry-javascript/pull/1779/files

Also related to 'new shiny import capabilities', It's also worth reading about package.json exports keyword usage: https://2ality.com/2021/06/typescript-esm-nodejs.html#package-exports%3A-hiding-package-internals-and-providing-nicer-module-specifiers

[Zombieliu]

@volovyk-s Yes, we can publish an both an esm module version and the currently commonjs version.

We'd keep publishing the standard JS version to /lib/, and leave main in package.json set to lib/index.js.
However, we'd then also publish the ESM version to /esm/ also -- it just takes running tsc with a different config json file that targets esnext for the module IIRC.

I think that should be all we need to do :). Anyone wanting to import ESM modules would just import from near-api-js/esm :)

Check out this handy-dandy example changset from the Sentry repo where they added an ESM build to their existing pipeline:
https://github.com/getsentry/sentry-javascript/pull/1779/files

Also related to 'new shiny import capabilities', It's also worth reading about package.json exports keyword usage: https://2ality.com/2021/06/typescript-esm-nodejs.html#package-exports%3A-hiding-package-internals-and-providing-nicer-module-specifiers

marvelous

[vans163]

Any status update on this, it would be nice to be able to use near-api-js from serverless environments (AWS/cloudflare) to do things like call contracts.

[volovyks]

@vans163 I will try to work on it this month. If it's urgent - please, create a PR.

[vans163]

@vans163 I will try to work on it this month. If it's urgent - please, create a PR.

Not urgent. Thanks.

[ansbr]

Hello guys, thats critical bug for me, I don't know how to add near-api-js to my application. I tried @originjs/vite-plugin-commonjs, but it doesn't work. Then I tried to add in packages.json @volovyk-s branch #esm-artifacts, and import nearAPI from 'near-api-js/esm', but it doesn't work too. Can you make it work?

[volovyks]

@tonborzenko please, use import without the /esm suffix.
I have deleted import limitations, please, try again.

[vans163]

I got this to work with CJS inside serverless with some fixes (ESM does not work). This only supports webpack and you need

webpack.config.js

    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
    }),
    new webpack.DefinePlugin({
      'process.env.NEAR_NO_LOGS': true,
    })

Buffer and process plugins.

I think this line needs revising because this also crashes inside browsers with process is not defined if we build without using webpack+that plugin.

near-api-js/src/account.ts

Line 161 in fd6d643

if (!process.env["NEAR_NO_LOGS"]){

Perhaps check here first is process !== undefined. This will break ESM. I suggest using globalThis instead of process. That way it is generic to all environments.

You might also need "buffer": "^6.0.3", as a dependency.

[Omhet]

Having the same problem with import in Vite project.
For now, I found a way to bypass this by using import of browser intended js script

import 'near-api-js/dist/near-api-js.min.js';
const { keyStores, connect, WalletConnection } = window.nearApi;

[VolanDeVovan]

Created a repository which you can use as an example until its fixed
https://github.com/VolanDeVovan/near-vite-example

[punithbm]

Created a repository which you can use as an example until its fixed https://github.com/VolanDeVovan/near-vite-example

@VolanDeVovan Example you've created is outdated now. If possible can you update it with latest changes ?

[KartikSoneji]

Adding a an alias to the unminified file seems to work

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      'near-api-js': 'near-api-js/dist/near-api-js.js'
    }
  }
})

[jessupjn]

Gentle ping on this - adding 'near-api-js': 'near-api-js/dist/near-api-js.js' doesn't work for me because libraries we depend on import from near-api-js/lib as well

[jessupjn]

I've done some work to resolve the outstanding issues on my end to allow for the near-api-js alias - but now it seems that I am getting an issue from within the @near-wallet-selector lib indicating an issue with import { providers } from "near-api-js"; returning undefined...

TypeError: Cannot read properties of undefined (reading 'JsonRpcProvider')
    at new Provider$1 (index-d11dc668.js:1125:12875)
    at index-d11dc668.js:1125:89530
    at Generator.next (<anonymous>)
    at Ze (index-d11dc668.js:1125:12617)

Edit: it crossed my mind to try this - but no luck

resolve: {
  alias: {
    'near-api-js': 'near-api-js/dist/near-api-js.js',
    'near-api-js/lib': 'near-api-js/lib/index.js'
  }
}

[andy-haynes]

Hi @jessupjn, I actually have a PR to address this. It's currently in the review phase and is part of the upcoming refactor which will break up near-api-js functionality into separate packages.

#1067

Please feel free to take a look and leave any feedback or questions you might have. There is an example-vite project in the PR with a working example of ESM imports. You might also have luck linking the packages locally to verify that it works with the new packages, but I have not tried this yet.

[jessupjn]

Great - I'll give it a whirl when I find some time! Is there an ETA on this PR going out?

[andy-haynes]

Great - I'll give it a whirl when I find some time! Is there an ETA on this PR going out?

@jessupjn I'm optimistic that we can have it published by the end of March, we should have much better availability coming up.

If you have more questions about this work I'd strongly encourage you to leave comments on that PR or on #1056, which is a prerequisite. The more discussion and questions going on there will help drive home the point of how important these improvements are and hopefully get it out to developers sooner 😄

[kujtimprenkuSQA]

I've done some work to resolve the outstanding issues on my end to allow for the near-api-js alias - but now it seems that I am getting an issue from within the @near-wallet-selector lib indicating an issue with import { providers } from "near-api-js"; returning undefined...

@jessupjn can you please check this comment #1072 (comment) you might be able to resolve the issues with Vite + near-api-js + wallet-selector.

Follow the links in that comment for better understanding.

This is a demo of wallet-selector with Vite + Vue + near-api-js : https://github.com/kujtimprenkuSQA/guest-book-vue

[ghimire007]

The issue is fixed now as large near-api-js was broken down into multiple number of smaller packages as (@near-js/*) . You can find the packages at https://www.npmjs.com/search?q=%40near-js and use es6 imports as:

import {BrowserLocalStorageKeyStore  } from '@near-js/accounts'
import {ConnectedWalletAccount  } from '@near-js/wallet-account'