TypeError: Cannot read properties of undefined (reading 'Client')

[John_Vu]

Hi @Rick_Wallace,

Thank you for your detailed answer. This has helped greatly.

Short Explanation: the reason why you are running into the ReferenceError: process is not defined is because this is a bug with our library for client side usage. The library should work on the server side with node.js.

You can technically get around this by editing your webpack.config.js file and letting it know about the usage of node or process

We’ve fixed this issue in our node-asana v3.0.1 release along with fixes to issues you would run into with webpack.

Long Explanation: there is code within the node-asana client library that accesses node.js’ process object (here). Since you are using the node-asana library with React on the client side you run into this issue because the browser doesn’t know what this process object is.

We’ve fixed this in v3.0.1 by adding a check for typeof(navigator) === 'undefined' || typeof(window) === 'undefined' if one of these values are not undefined we could access process object (fix)

Additionally, it seems like the latest version of webpack does not include support for node.js core modules. This means that you probably or will run into this issue if you use the latest version of webpack:

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

The node-asana client library v3.0.0 used node.js’ querystring module (here) which is apart of node.js core modules. To fix this we removed the usage of node.js’ querystring to use JavaScript’s URLSearchParams this has two benefits:

1. Webpack issue about BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.... goes away
2. querystring was deprecated since node v14 so we are migrating to the new use case with URLSearchParams

---

Testing:

1: Create a React project

npx create-react-app my-react-app

2. Navigate into the folder

cd my-react-app

3. Install latest version of node-asana (v3.0.1)

npm i asana

4. Update App.js to make an API call with Asana’s node-asana library

Example:

import React, { useState, useEffect } from 'react';
import { ApiClient, UsersApi } from 'asana';
import logo from './logo.svg';
import './App.css';

function App() {

  const [user, setUser] = useState(null);

  useEffect(() => {
    async function getUser() {
      let client = ApiClient.instance;
      let token = client.authentications['token'];
      token.accessToken = "<YOUR_ASANA_ACCESS_TOKEN>";
    
      let usersApiInstance = new UsersApi();
      let user_gid = "me";
      let opts = {
        "opt_fields": "name"
      };
    
      await usersApiInstance.getUser(user_gid, opts).then((result) => {
        setUser(JSON.stringify(result.data, null, 2));
      }, (error) => {
        console.error(error.response.body);
      });
    }
    getUser();
  });

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <div>{user}</div>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

NOTE: Take note of the import statement in this example for future use cases import { ApiClient, UsersApi } from 'asana';. Also, I am not a React expert so forgive me for any React taboos that I might be breaking with my code.

5. Start React app

npm start

6. Observe successful API call