Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CDN import: TypeError: Cannot set property 'axios' of undefined #1861

Closed
haynajjar opened this issue Oct 30, 2018 · 6 comments
Closed

CDN import: TypeError: Cannot set property 'axios' of undefined #1861

haynajjar opened this issue Oct 30, 2018 · 6 comments

Comments

@haynajjar
Copy link

I'm trying to use axios CDN with dynamic import ES6 ,

My code

(async ()=>{ await import('https://unpkg.com/axios/dist/axios.min.js') })()

Error

axios_type_error

It works fine with System.import , but not with native import,

Context

  • axios version: v0.18.0
  • Environment: chrome 70, windows 10
@Orlandster
Copy link

It works for me. What is the output of the following log statement?

(async () => {
    const axios = await import('https://unpkg.com/axios/dist/axios.min.js')
    console.log(typeof axios)
})();

Can you share all of the relevant code?

@haynajjar
Copy link
Author

haynajjar commented Oct 30, 2018 •
edited
Loading

I just test it independently, this is the execution result on the console
output_axios

@chinesedfan
Copy link
Collaborator

It is due to the global this is undefined in the imported context. Hope someone can investigate whether it is expected or not.

(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory();
	else if(typeof define === 'function' && define.amd)
		define([], factory);
	else if(typeof exports === 'object')
		exports["axios"] = factory();
	else
		root["axios"] = factory();
})(this, function() {

@Jezorko
Copy link
Contributor

Jezorko commented Aug 6, 2020 •
edited
Loading

I am getting the same error, it seems the problem is with webpack configuration: https://stackoverflow.com/a/58990831/5922757

Should possibly fix the issue with undefined this when importing the library in a browser: #1861

How to reproduce:

  1. create a new local directory and enter it
  2. create a file index.html
  3. put the following in this file:
<html lang="en">
<body>
<script type="module">
  import {} from "./axios.js";
</script>
</body>
</html>
  1. download file https://unpkg.com/axios/dist/axios.js and save it as axios.js in the same directory
  2. run a local server that exposes these files (with Python: python3 -m http.server 8080)
  3. go to http://localhost:8080 and open dev tools

You should see the following error:

axios.js:10 Uncaught TypeError: Cannot set property 'axios' of undefined
    at webpackUniversalModuleDefinition (axios.js:10)
    at axios.js:11

Jezorko added a commit to Jezorko/axios that referenced this issue Aug 6, 2020
@Jezorko
Add globalObject: 'this' to webpack config
a7aff2a 
This should solve the issue of undefined `this` when importing from an ES6 module.
I've put steps to reproduce in [this comment](axios#1861 (comment)).
@Jezorko Jezorko mentioned this issue Aug 6, 2020
Merged
@yuis-ice
Copy link

yuis-ice commented Dec 7, 2020

same here. I wanted to use axios for tampermonkey but the require statement not working, for the error message Cannot set property 'axios' of undefined

@dfenerski
Copy link

Why is the issue closed when the bug is clearly reproducible and there is no proper fix even in the comments?

jasonsaayman added a commit that referenced this issue Sep 16, 2021
@Jezorko @jasonsaayman
Add globalObject: 'this' to webpack config (#3176)
e52cd3a 
This should solve the issue of undefined `this` when importing from an ES6 module.
I've put steps to reproduce in [this comment](#1861 (comment)).

Co-authored-by: Jay <jasonsaayman@gmail.com>
mbargiel pushed a commit to mbargiel/axios that referenced this issue Jan 27, 2022
@Jezorko @jasonsaayman
Add globalObject: 'this' to webpack config (axios#3176)
d1bac49 
This should solve the issue of undefined `this` when importing from an ES6 module.
I've put steps to reproduce in [this comment](axios#1861 (comment)).

Co-authored-by: Jay <jasonsaayman@gmail.com>
mikoloism pushed a commit to mikoloism/electron-fruit-store-dashboard that referenced this issue Jun 28, 2022
fix (axios) : remove @axios for an webpacek error and replaced by nat…
c83eb24 
…ive fetch api

issue : axios/axios#1861
redsky030511 added a commit to redsky030511/axios-server that referenced this issue May 13, 2024
@redsky030511 @jasonsaayman
Add globalObject: 'this' to webpack config (#3176)
c493a08 
This should solve the issue of undefined `this` when importing from an ES6 module.
I've put steps to reproduce in [this comment](axios/axios#1861 (comment)).

Co-authored-by: Jay <jasonsaayman@gmail.com>
Jupev6 added a commit to Jupev6/axios that referenced this issue Aug 11, 2024
@Jupev6 @jasonsaayman
Add globalObject: 'this' to webpack config (#3176)
289bd0f 
This should solve the issue of undefined `this` when importing from an ES6 module.
I've put steps to reproduce in [this comment](axios/axios#1861 (comment)).

Co-authored-by: Jay <jasonsaayman@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@chinesedfan @jasonsaayman @haynajjar @Orlandster @Jezorko @yuis-ice @dfenerski