Can't import from near-api-js in vite/vue applicaiton

[LeeGrobler]

Prerequisites

• I'm using the latest version of near-api-js.
• I have tried to start with a fresh project and reproduce the defect with minimal code changes.
• I have read the console error messages carefully (if applicable).

Description

Importing anything from near-api-js results in Uncaught TypeError: Cannot read properties of undefined (reading 'from')

Reproducible demo

No response

Steps to reproduce

1. Create a new Vite + Vue.js application: In a terminal, run npm create vite@latest
2. Select the following prompts: vite-and-vue-app, Vue, JavaScript
3. Cd into newly created project: cd vite-and-vue-app
4. Install dependencies: npm i
5. Run app to make sure everything works: npm run dev then navigate to the localhost url produced in the terminal
6. Stop the server and install near-api-js: npm i near-api-js
7. In App.js (or any other vue file) import keyStores (or anything else) from near-api-js: import { keyStores } from 'near-api-js'
8. Restart server and navigate to localhost url again and it should produce the error.

Expected behavior

It shouldn't throw an error and should allow me to import the modules that I need.

Actual behavior

It produces the error mentioned in the Description.

Your environment

near-api-js: ^1.1.0
vue: ^3.2.45
vite: ^4.1.0

Self-service

• I'd be willing to fix this bug myself.

[andy-haynes]

Thank you for taking the time to open an issue @SeriousLeeTV! This has been a longstanding issue and point of frustration for many developers, see the nearly two-year-old #607 😕

However recently I had the chance to refactor near-api-js functionality into dedicated packages, and as part of this work I was able to introduce real ESM support. The ESM support is in #1067 and is based off of the upcoming refactor in #1056. My hope is that these can go out together but these PRs are still in the review cycle and so subject to change.

Please don't hesitate to leave any feedback on these PRs, community input on these would certainly help in making this issue more visible 🙂. In particular #1067 adds an example-vite package as an example of how usage will look in this context going forward.

[LeeGrobler]

Hi @andy-haynes ! Thanks for getting back to me and apologies for my delayed response.

Okay cool, I'm just trying to wrap my head around it. So are you saying there's no way to get the near-api-js package to work in a frontend app, because frontend apps rely on the import statement to consume packages? (aside from cloning and importing your pull request)?

Or what changes can I make to my project to get it working? I'm open to anything at this point as we're in a time crunch and I have to deliver a feature that uses this package ASAP 😅

[andy-haynes]

@SeriousLeeTV I just meant to convey that with Vite in particular there are compatibility issues exacerbating things, but the situation is on track to improve 🙂

Looking at comments on that issue I linked above, I see that another dev was able to sort it out nearly a year ago: #607 (comment)

I see some other workarounds in that thread that seem relevant as well, it's probably worth giving those a shot.

no way to get the near-api-js package to work in a frontend app, because frontend apps rely on the import statement to consume packages?

From searching the error message you posted it seems likely the issue is with Buffer.from. You can import from near-api-js.

[kujtimprenkuSQA]

@SeriousLeeTV , @andy-haynes this is a pretty common issue with Vite and other modern bundlers also with webpack 5, buffer does not get added/imported by default (or gets ignored) so you will need to provide it as a polyfill.

Here's working demo of near-api-js v1.1.0 + Vue + Vite:
https://github.com/kujtimprenkuSQA/near-api-js-vue

Live demo: https://kujtimprenkusqa.github.io/near-api-js-vue/
// in console you can see a keyPair created by near-api-js KeyPair.fromRandom

Check the commit history to understand it better, there's a fix for a production error too reported here: #1035 .

UPDATE: If you don't prefer the way I added polyfills for buffer and process you might consider this approach too:
https://github.com/kujtimprenkuSQA/near-api-js-vue/tree/add-polyfills-in-another-way

[LeeGrobler]

Thanks for the massive assist @andy-haynes and @kujtimprenkuSQA! I tried @kujtimprenkuSQA's first link and it's working for me, so I'm going to carry on with that for now. Cheers!

[ghimire007]

@LeeGrobler 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'