I have the following
import logo from './logo.svg';
import './App.css';
import AppBar from '@mui/material/AppBar';
...
import axios from "axios";
import { useState, useEffect } from 'react';
...
function App() {
}
Everything runs fine but when I try to run the tests I get…
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import axios from './lib/axios.js';
^^^^^^
SyntaxError: Cannot use import statement outside a module
5 | import Typography from '@mui/material/Typography';
6 | import Box from '@mui/material/Box';
> 7 | import axios from "axios";
| ^
If I remove the Axios code everything works fine, so why does it fail with the import?
2
Answers
To fix this update your test command in your package.json to this :
"test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!axios)/'",
. This error is because axios changed their module type from CommonJS TO ECMAScript in their v1.x.x and higher.I don’t know exactly but I think, it’s for the new update of Axios, you can see it in:
https://github.com/axios/axios/issues/5101