Node library requires lib unavailable for a web use

Hi,

@Matt_Bramlage @Joe_Trollo I am using the official Node library for my Angular apps. When upgrading to latest Angular, I can’t build anymore.

ERROR in ./node_modules/readline/readline.js
Module not found: Error: Can't resolve 'fs' in '[...]node_modules/readline'
ERROR in ./node_modules/asana/lib/dispatcher.js
Module not found: Error: Can't resolve 'os' in '[...]node_modules/asana/lib'
ERROR in ./node_modules/asana/lib/util/buffered_readable.js
Module not found: Error: Can't resolve 'stream' in '[...]node_modules/asana/lib/util'

The issue seems to be that the library requires things (fs, os, stream) that don’t make sense in a web context. The solution I find online don’t work :frowning: any recommandation?

Thanks

same issue…

Same issue on my end. I end up linking directly to the min.js version of the library.

Hello everyone,

For now, let’s go with Baadier_Sydow’s solution, and use the min.js version. You can change your import like this

// import {Client} from 'asana' 
import {Client} from 'asana/dist/asana-min.js'

or in tsconfig.json, add the change to paths

"compilerOptions": {
    "paths": {
        "asana": [ "node_modules/asana/dist/asana-min.js" ],
    }
}

I’m working towards a better solution for this, but keeping optional server functionality available within the library is getting more difficult due to recent webpack changes, and I’ve been unable to land on a great solution.

Best,
Ross

1 Like

My current solution is to manually change the content of node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js and replace node: false with node: { fs: "empty" }. But, oh my god, that is a dirty solution :pray: :angel:

With latest Angular, the file is now in node_modules/@angular-devkit/build-angular/src/webpack/configs/browser.js

1 Like

@AndrewWong this is still an issue (not to have a javascript library) and @Hiroshi_Nishio also ran into this issue.

Thanks Bastien,

I tried this below, but nothing changed and the error “Module not found: Can’t resolve ‘fs’” is still there. To be more precise, there was an error in the path, so I added “. /” at the beginning, as shown below.

It is surprising it complains about “fs” if you removed mentions of the fs module… No more occurence of fs in the code?

Error message is completely the same as the original one like this.

Failed to compile
./node_modules/readline/readline.js:1:0
Module not found: Can’t resolve ‘fs’

Import trace for requested module:
./node_modules\asana\lib\auth\native_flow.js
./node_modules\asana\lib\auth\index.js
./node_modules\asana\index.js
./services\asanaService.tsx
./components\RadarChart.tsx
./pages\index.tsx

Module Not Found | Next.js

According to my research, getServerSideProps and getStaticProps in Next.js, which I thought might be a solution, must also be used in pages/, and the path to use AsanaAPI in this case is service/. component, so it’s not under pages/ and can’t be used. In other words, I don’t know how to solve this problem at the moment.

1 Like

I don’t know. At least not in the code I’ve written, but it may be in the Asana library.

My original question is, in React/Next.js, is it not possible to use the Asana API in Service/ and pass the values to the component file in Component/?

Or should I give up using the Asana API in Node and use the normal fetch method?

My workaround was precisely to override the library code.

I’ve only tried the solution Ross gave in this topic, and I’m going to try Bastien’s solution as well, because I’m starting to feel that I can’t move forward if I hate Dirty methods. I’ll try it out and share the results with you.

By the way, to begin with, is Asana’s API supposed to work when requested from a browser? Or is it actually supposed to be run on the server side, as the official documentation says Node? At least Curl can be run in a browser, so I’m starting to wonder if I need to stick with Node. If you know, please let me know.

I believe it is supposed to be run on the server side, hence my issue when I tried to work with it using Javascript and not node. At this point, someone from Asana will have to step in to help us :sweat_smile:

I finally solved the problem.
I solved it by changing to fetch API and making API calls from the client side instead of using the node API library provided by asana this time.

I could have made it a regular batch that runs at midnight and run it on the server side, but I wanted to display it on a personal dashboard, so I wanted to do it on the client side because I thought some real time would be better.

Thanks, Basiten, and I hope this helps others who follow in their footsteps.

2 Likes

So basically the conclusion is that you can’t use the official library :confused: