It give me error while importing axios from node module

Question

I have installed axios via npm and try to import axios to my front end script file.

The error which i am facing is

Uncaught SyntaxError: Cannot use import statement outside a module

This is my app.js file

import axios from 'axios';

function updateRecipt(items) {
    axios.post('/update-reciept',items).then(res=>{
        console.log(res);
    })
}

Note:I also change "type":"tag" to "type":"module" in axios package.json and import statement to const axios = require("../../node_module/axios"). but it doesnot work for me

score 3 · Answer 1 · answered Jul 18 '21 at 17:00

3

You are using CommonJS. To import axios you could do

const axios = require("axios");

Instead if you want to use ES Modules, you need to go to package.jsonand add "type": "module", (you could also add "type": "commonjs", to use explicitly CommonJS)

answered Jul 18 '21 at 17:00

BelMat

93
8

I have change type to "type":"commonjs" but it give me another error that require is not defined – Mohammad Yaseen Afridi Jul 18 '21 at 17:15
Are you testing this in a browser? In this case, require won't work as it doesn't exisist on that enviorment – BelMat Jul 18 '21 at 17:19
Yes sir i want to console data in chrome – Mohammad Yaseen Afridi Jul 18 '21 at 17:22
In this case, you should use ES Modules, check [this](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/import). Also [this](https://electerious.medium.com/from-commonjs-to-es-modules-how-to-modernize-your-node-js-app-ad8cdd4fb662) could help – BelMat Jul 18 '21 at 17:25
Not working sir. It says cannot use import statement outside a module – Mohammad Yaseen Afridi Jul 18 '21 at 17:29
try adding ```"type":"module"``` to the importing script. This meaning: `````` – BelMat Jul 18 '21 at 17:32
Sir how i can write this script tag in js file ? – Mohammad Yaseen Afridi Jul 18 '21 at 17:40
I ment in the HTML file where you are importing the script – BelMat Jul 18 '21 at 17:42
Same error sir. I tried this in html file and i write my axios call statement bellow your script statement but it give me same error – Mohammad Yaseen Afridi Jul 18 '21 at 17:45
This should help [LINK](https://stackoverflow.com/questions/58211880/uncaught-syntaxerror-cannot-use-import-statement-outside-a-module-when-import) – BelMat Jul 18 '21 at 17:47

score 1 · Answer 2 · answered Jul 18 '21 at 17:00

1

You're using the es6 syntax instead of the commonJS. Try using this

const axios = require('axios');

If you want to use es6, you'll need something like Babel

answered Jul 18 '21 at 17:00

DogEatDog

2,899
2
36
65

1

I also tried this but it says require is not defined – Mohammad Yaseen Afridi Jul 18 '21 at 17:16
add or change the line `"type": "commonjs"` in your `package.json` – DogEatDog Jul 19 '21 at 16:46

score 0 · Answer 3 · answered Jul 18 '21 at 17:05

0

Try putting that in another file, then do this:

const axios = require('your_file.js');

then go back to your file, and add:

import axios from 'axios';
module.exports = axios

answered Jul 18 '21 at 17:05

Jake

97
1
9

Couldn't understand sir. what are you saying ? – Mohammad Yaseen Afridi Jul 18 '21 at 17:17
create a second file, and paste your code in there, with `module.exports = axios;` at the end. then go to your main file, and add `const axios = require('your_file.js')` – Jake Jul 18 '21 at 19:00

score 0 · Answer 4 · answered Aug 09 '23 at 14:39

Ive solved this problem by using babel.

create a .babelrc file with

{
  "presets": ["@babel/preset-env"]
}

add this to devDependancies in package.json

 "@babel/core": "^7.22.10",
 "@babel/preset-env": "^7.22.10",

add this to jest.config.cjs

module.exports = {
    transform: {
        "^.+\\.jsx?$": "babel-jest"
    }
};

It give me error while importing axios from node module

4 Answers4

Linked

Related