Errors when using axios

Cocos Creator
#1

Hello.
I would like to use axios but am having trouble with errors.

First, look at the official README and run the following command.
In my PC, axios is now installed.

Next, in Cocos Creator, I write the following code at the beginning of the class file to run the Example code.

import { _decorator, Component, Node } from 'cc';.
const { ccclass, property } = _decorator;
import axios from 'axios';
@ccclass('axiosTest')
export class axiosTest extends Component {
  start() {
    axios
      .get('/user?ID=12345')
      .then(function (response) {
        // handle success
        console.log(response);
      })
      .catch(function (error) {
        // handle error
        console.log(error); })
      }); }
      
  }

  update(deltaTime: number) {}
}

This is perfectly fine in Visual Studio Code, but in reality it seems to cause an error and the script attached to the node is not recognized.

erro_mes
erro_mes1094×364 28.4 KB

It is no problem up to “import axios from ‘axios’;”.
However, there seems to be a problem with axios in start that is causing the error.

I searched for axios on this forum for some information and found a topic created by cadxplore.

I rewrote the import based on pandamicro’s post, but this did not solve the problem.

import axios from 'axios';
↓↓
import axios from "axios/dist/axios.min.js";

Next, check the URL written by pandamicro.

Here is the topic created by tdf0495, where linrm presents the solution in RUL

However, the method described in this shrinktofit.github.io is written in Chinese, and I tried several translation services, but could not figure out what to change where.
It also looks different from the linrm error to begin with.

Any solution to this error would be appreciated!

#2

bump bump

#3

cocos-can-i-use-npm is out of date.There is no perfect solution about using npm package(Perhaps engine developers are working on it). I think is better not use npm package right now.
If you really want to use axios in your package, there is a solution.

Find “node_modules/axios/dist/axios.js” and copy to assets folder.
Find “node_modules/axios/index.d.ts” and copy to the same place of axios.js and rename it to “axios.d.ts”
Then you can import axios like this import axios from "../lib/axios.js";
I think it better to write your own NetUtils to encapsulate functionality about the network. Then if you find a better solution in the feature, its easy to modify.

#4

I am using a method mentioned in this post 暂时想了一个解决 npm 包引入问题的临时方案 - Creator 3.x - Cocos中文社区
look like this

import { AxiosStatic } from 'axios';

import * as _axios from '../../node_modules/axios/dist/esm/axios.min.js';

const ensureImport = <T>(raw: T): T =>
  typeof (raw as any).default === 'object' ? (raw as any).default : raw;

export const axios = ensureImport(_axios).default as AxiosStatic;
#5

Thank you very much.
This method worked for me. This is very helpful.

#6

Thank you very much.

With this method I could not figure out how to specify the path.
As zzy wrote earlier, copying some files to the project and describing them in the path worked well with this method.

However, this is most likely not a proper understanding of the method you wrote.

1 Like
#7

The path is to node_module folder in the root of the project, this script is created inside asset/Script so I have to …/ two times :smiley: