Node library requires lib unavailable for a web use

[Bastien_Siebman]

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 any recommandation?

Thanks

[Bilal_Rafiq]

same issue…

[Baadier_Sydow]

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

[Ross_Grambo]

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

[Bastien_Siebman]

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

[Bastien_Siebman]

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

[Bastien_Siebman]

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

[Hiroshi_Nishio]

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.

@Ross_Grambo

tsconfig.json, add the change to paths

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

[Bastien_Siebman]

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

[Hiroshi_Nishio]

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

Property 'getTasks' does not exist on type 'Tasks'. Did you mean 'getTask'?ts(2551) index.d.ts(2060, 13): 'getTask' is declared here.

And one thing I found is that if I replace below, the original error has disappeared but new error happened. I tried to replace like below because your official document says that it use “require” instead of “import”. // before import asana from "asana"; ↓ // after const asana = require("asana"); Then this new error happened as below. 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…

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

[Hiroshi_Nishio]

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.

[Hiroshi_Nishio]

@Bastien_Siebman

No more occurence of fs in the code?

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?

[Bastien_Siebman]

@Hiroshi_Nishio

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

My workaround was precisely to override the library code.

[Hiroshi_Nishio]

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.

[Bastien_Siebman]

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

[Hiroshi_Nishio]

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.

[Bastien_Siebman]

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