I'm trying to make a chrome extension and I wanted to use the axios package. When I try to test my code in Chrome I get this error in the console:
SyntaxError: Cannot use import statement outside a module. See the error screenshot for more context.
I've installed the package by executing npm install axios in the console. Sorry if this is a rudimentary question, I don't really know what I am doing. Thanks for the help!
I'm trying to make a chrome extension and I wanted to use the axios package. When I try to test my code in Chrome I get this error in the console:
SyntaxError: Cannot use import statement outside a module. See the error screenshot for more context.
I've installed the package by executing npm install axios in the console. Sorry if this is a rudimentary question, I don't really know what I am doing. Thanks for the help!
Share Improve this question edited Apr 6, 2024 at 3:53 MickeyDickey on codidact. 3673 silver badges13 bronze badges asked Dec 15, 2020 at 22:52 acohen89acohen89 1011 gold badge2 silver badges5 bronze badges 3- 1 type the error message in the question. – react_or_angluar Commented Dec 16, 2020 at 0:04
- did you fix this problem, I want to using axios in google chrome extension too.@acohen89 – Dolphin Commented Jan 31, 2022 at 7:39
- For those who actually know how to import packages in JS, but are searching for a way to use axios in a Chrome service worker: stackoverflow./a/69384484/13459588 – MickeyDickey on codidact. Commented Apr 5, 2024 at 15:22
1 Answer
Reset to default 3External modules like axios would need to be bundled into your chrome extension in order for it to work as you intend. You can use a bundler like webpack in order to do this, but there is a decent amount of configuration needed to get up and running.
I would remend using the fetch API as an alternative. It's already freely available in chrome extensions and works in very similar way to axios.
A fuller code example paring fetch to axios:
https://blog.logrocket./axios-or-fetch-api/