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

Issue loading component via script tag in Firefox when using file URI #2582

Closed
kwchan22 opened this issue Jul 21, 2020 · 3 comments
Closed

Issue loading component via script tag in Firefox when using file URI #2582

kwchan22 opened this issue Jul 21, 2020 · 3 comments
Labels
triage

Comments

@kwchan22
Copy link

kwchan22 commented Jul 21, 2020 •
edited
Loading

Stencil version:

 @stencil/[email protected] (1.15.x and above)

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:
When I open the html file that loads the components in Firefox (Ex: file:///Users/test/development/test.html), I get
TypeError: null is not a valid URL.

Expected behavior:
Components loaded successfully.

Steps to reproduce:

  1. npm init stencil
  2. Pick component
  3. npm run build
  4. Create a html file
<html lang="en">
<head>
  <script src="test-stencil.js"></script>
</head>
<body>
  <test-component></test-component>
</body>
</html>
  1. Open file in Firefox.

Related code:

Other information:
In Firefox, I see the error occurs at window.location.origin in test-stencil.js and it is null.

var resourcesUrl = scriptElm ? scriptElm.getAttribute('data-resources-url') || scriptElm.src : '';
var start = function() {
    var url = new URL('./p-7af54b95.system.js', new URL(resourcesUrl, window.location.origin)); 
    System.import(url.href);
};

When using @stencil/[email protected] and below, there is no window.location.origin in test-stencil.js and it works in Firefox

var resourcesUrl = scriptElm ? scriptElm.getAttribute('data-resources-url') || scriptElm.src : '';
var start = function() {
    var url = new URL('./p-ce5723e7.system.js', resourcesUrl);
    System.import(url.href);
};
@ionitron-bot ionitron-bot bot added the triage label Jul 21, 2020
@kwchan22
Copy link
Author

The #2410 fix in src/compiler/output-targets/dist-lazy/generate-system.ts is causing this issue.
It changed this
var url = new URL('${corePath}', resourcesUrl);
to
var url = new URL('${corePath}', new URL(resourcesUrl, window.location.origin));

In Firefox, when using file URI, window.location.origin is null.

kwchan22 referenced this issue Jul 30, 2020
@hv-pul
fix(polyfill): add proper url base to import shim (#2410)
96dd746
brunor97 added a commit to brunor97/stencil that referenced this issue Feb 5, 2021
@brunor97
fix(compiler): handle null window.location.origin
2ce7fb8 
when using a data URI or file URI (stenciljs#2582), or when using iframe's `srcdoc`, the value for window.location.origin can be `null`. In these particular cases, passing `null` to `new URL(url, null)` will throw the following error: Failed to construct 'URL': Invalid base URL
@brunor97 brunor97 mentioned this issue Feb 5, 2021
Merged
@jasperbosch
Copy link

In case of a iframe without src-attribute window.location.origin will be "null" (yes a string with value "null").
In case of a iframe without src-attribute window.parent.location.origin should be used.

rwaskiewicz pushed a commit that referenced this issue Jun 23, 2022
@brunor97
fix(compiler): handle null window.location.origin (#2813)
255cd66 
when using a data URI or file URI (#2582),
or when using iframe's `srcdoc`, the value for window.location.origin can be `null`.
in these particular cases, passing `null` to `new URL(url, null)` will throw the 
following error: "Failed to construct 'URL': Invalid base URL"
@rwaskiewicz
Copy link
Contributor

I'm going to close this issue out. This has been fixed in #2813 and is a part of the 2.17.1 release. If the issue does not appear to be resolved, please feel free to open a new ticket. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
triage
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@rwaskiewicz @jasperbosch @kwchan22