How to use a StencilJs component in ElectronJs
Using the Stencil component starter project I created a simple my-component object and published it to npm here: https://www.npmjs.com/package/@marekknows/my-component
I then used the electron-webpack-quick-start project to create a simple application that uses the previously mentioned component. Code here: https://github.com/mmakrzem/myApp
I can start running the Electron App with npm start however my-component does not render in the window. The Stencil documentation (https://stenciljs.com/docs/distribution) describes how to use node modules, however I suspect there is more to it to make this work.
The code that I generate is this:
<html>
<head>
<meta charset="utf-8">
<script>
require("module").globalPaths.push( "C:/Users/mkrzeminski/Documents/webWork/__help/myApp/node_modules")
require("source-map-support/source-map-support.js").install()
</script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="renderer.js"></script>
<div>Hello Electron</div>
<script src="node_modules/@marekknows/my-component/dist/my-component.js"></script>
<my-component></my-component>
</body>
</html>
But the Electron (chrome) dev tools says:
Refused to execute script from 'http://localhost:56759/node_modules/@marekknows/my-component/dist/my-component.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
I also don't know how the images found in my component node_modules@marekknowsmy-componentdistcollectionassets are supposed to get resolved correctly by Electron.
webpack electron stenciljs
asked Nov 13 '18 at 22:01
MarekKnows.comMarekKnows.com
315213
add a comment |
Using the Stencil component starter project I created a simple my-component object and published it to npm here: https://www.npmjs.com/package/@marekknows/my-component
I then used the electron-webpack-quick-start project to create a simple application that uses the previously mentioned component. Code here: https://github.com/mmakrzem/myApp
I can start running the Electron App with npm start however my-component does not render in the window. The Stencil documentation (https://stenciljs.com/docs/distribution) describes how to use node modules, however I suspect there is more to it to make this work.
The code that I generate is this:
<html>
<head>
<meta charset="utf-8">
<script>
require("module").globalPaths.push( "C:/Users/mkrzeminski/Documents/webWork/__help/myApp/node_modules")
require("source-map-support/source-map-support.js").install()
</script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="renderer.js"></script>
<div>Hello Electron</div>
<script src="node_modules/@marekknows/my-component/dist/my-component.js"></script>
<my-component></my-component>
</body>
</html>
But the Electron (chrome) dev tools says:
Refused to execute script from 'http://localhost:56759/node_modules/@marekknows/my-component/dist/my-component.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
I also don't know how the images found in my component node_modules@marekknowsmy-componentdistcollectionassets are supposed to get resolved correctly by Electron.
webpack electron stenciljs
asked Nov 13 '18 at 22:01
MarekKnows.comMarekKnows.com
315213
Are you sure the path tomy-component.jsis correct? That might explain why the returned MIME type istext/html.
– Thomas
Dec 3 '18 at 16:52
yes the path is correct.
– MarekKnows.com
Dec 3 '18 at 21:39
What's the actual response the browser receives? You can check that in DevTools. Also setting a base might work, see stackoverflow.com/questions/49603177/…
– Thomas
Dec 4 '18 at 11:09
where do I specify the base? Does that go somewhere in the index.html file?
– MarekKnows.com
Dec 4 '18 at 15:07
Yes, insidehead. It's to tell the browser the base URL for relative requests (likenode_modules/....).
– Thomas
Dec 5 '18 at 12:27
add a comment |
Using the Stencil component starter project I created a simple my-component object and published it to npm here: https://www.npmjs.com/package/@marekknows/my-component
I then used the electron-webpack-quick-start project to create a simple application that uses the previously mentioned component. Code here: https://github.com/mmakrzem/myApp
I can start running the Electron App with npm start however my-component does not render in the window. The Stencil documentation (https://stenciljs.com/docs/distribution) describes how to use node modules, however I suspect there is more to it to make this work.
The code that I generate is this:
<html>
<head>
<meta charset="utf-8">
<script>
require("module").globalPaths.push( "C:/Users/mkrzeminski/Documents/webWork/__help/myApp/node_modules")
require("source-map-support/source-map-support.js").install()
</script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="renderer.js"></script>
<div>Hello Electron</div>
<script src="node_modules/@marekknows/my-component/dist/my-component.js"></script>
<my-component></my-component>
</body>
</html>
But the Electron (chrome) dev tools says:
Refused to execute script from 'http://localhost:56759/node_modules/@marekknows/my-component/dist/my-component.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
I also don't know how the images found in my component node_modules@marekknowsmy-componentdistcollectionassets are supposed to get resolved correctly by Electron.
webpack electron stenciljs
asked Nov 13 '18 at 22:01
MarekKnows.comMarekKnows.com
315213
Using the Stencil component starter project I created a simple my-component object and published it to npm here: https://www.npmjs.com/package/@marekknows/my-component
I then used the electron-webpack-quick-start project to create a simple application that uses the previously mentioned component. Code here: https://github.com/mmakrzem/myApp
I can start running the Electron App with npm start however my-component does not render in the window. The Stencil documentation (https://stenciljs.com/docs/distribution) describes how to use node modules, however I suspect there is more to it to make this work.
The code that I generate is this:
<html>
<head>
<meta charset="utf-8">
<script>
require("module").globalPaths.push( "C:/Users/mkrzeminski/Documents/webWork/__help/myApp/node_modules")
require("source-map-support/source-map-support.js").install()
</script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="renderer.js"></script>
<div>Hello Electron</div>
<script src="node_modules/@marekknows/my-component/dist/my-component.js"></script>
<my-component></my-component>
</body>
</html>
But the Electron (chrome) dev tools says:
Refused to execute script from 'http://localhost:56759/node_modules/@marekknows/my-component/dist/my-component.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
I also don't know how the images found in my component node_modules@marekknowsmy-componentdistcollectionassets are supposed to get resolved correctly by Electron.
webpack electron stenciljs
webpack electron stenciljs
asked Nov 13 '18 at 22:01
MarekKnows.comMarekKnows.com
315213
asked Nov 13 '18 at 22:01
MarekKnows.comMarekKnows.com
315213
asked Nov 13 '18 at 22:01
MarekKnows.comMarekKnows.com
315213
asked Nov 13 '18 at 22:01
MarekKnows.comMarekKnows.com
315213
asked Nov 13 '18 at 22:01
MarekKnows.comMarekKnows.com
315213
315213
Are you sure the path tomy-component.jsis correct? That might explain why the returned MIME type istext/html.
– Thomas
Dec 3 '18 at 16:52
yes the path is correct.
– MarekKnows.com
Dec 3 '18 at 21:39
What's the actual response the browser receives? You can check that in DevTools. Also setting a base might work, see stackoverflow.com/questions/49603177/…
– Thomas
Dec 4 '18 at 11:09
where do I specify the base? Does that go somewhere in the index.html file?
– MarekKnows.com
Dec 4 '18 at 15:07
Yes, insidehead. It's to tell the browser the base URL for relative requests (likenode_modules/....).
– Thomas
Dec 5 '18 at 12:27
add a comment |
Are you sure the path tomy-component.jsis correct? That might explain why the returned MIME type istext/html.
– Thomas
Dec 3 '18 at 16:52
yes the path is correct.
– MarekKnows.com
Dec 3 '18 at 21:39
What's the actual response the browser receives? You can check that in DevTools. Also setting a base might work, see stackoverflow.com/questions/49603177/…
– Thomas
Dec 4 '18 at 11:09
where do I specify the base? Does that go somewhere in the index.html file?
– MarekKnows.com
Dec 4 '18 at 15:07
Yes, insidehead. It's to tell the browser the base URL for relative requests (likenode_modules/....).
– Thomas
Dec 5 '18 at 12:27
Are you sure the path to
my-component.js is correct? That might explain why the returned MIME type is text/html.– Thomas
Dec 3 '18 at 16:52
Are you sure the path to
my-component.js is correct? That might explain why the returned MIME type is text/html.– Thomas
Dec 3 '18 at 16:52
yes the path is correct.
– MarekKnows.com
Dec 3 '18 at 21:39
yes the path is correct.
– MarekKnows.com
Dec 3 '18 at 21:39
What's the actual response the browser receives? You can check that in DevTools. Also setting a base might work, see stackoverflow.com/questions/49603177/…
– Thomas
Dec 4 '18 at 11:09
What's the actual response the browser receives? You can check that in DevTools. Also setting a base might work, see stackoverflow.com/questions/49603177/…
– Thomas
Dec 4 '18 at 11:09
where do I specify the base? Does that go somewhere in the index.html file?
– MarekKnows.com
Dec 4 '18 at 15:07
where do I specify the base? Does that go somewhere in the index.html file?
– MarekKnows.com
Dec 4 '18 at 15:07
Yes, inside
head. It's to tell the browser the base URL for relative requests (like node_modules/....).– Thomas
Dec 5 '18 at 12:27
Yes, inside
head. It's to tell the browser the base URL for relative requests (like node_modules/....).– Thomas
Dec 5 '18 at 12:27
add a comment |
1 Answer
1
active
oldest
votes
I was able to finally get things working by doing the following:
- copy all the assets found in my node package under /dist/collection/assets into my own static/assets folder
- copy all the compiled javascript source code to static/js/
then from the html, if i refer to the code found in static everything resolves correctly.
I don't know why I need to move things around from my node_modules directory into my local application directory, but at least it works!
answered Dec 5 '18 at 16:33
MarekKnows.comMarekKnows.com
315213
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53290156%2fhow-to-use-a-stenciljs-component-in-electronjs%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I was able to finally get things working by doing the following:
- copy all the assets found in my node package under /dist/collection/assets into my own static/assets folder
- copy all the compiled javascript source code to static/js/
then from the html, if i refer to the code found in static everything resolves correctly.
I don't know why I need to move things around from my node_modules directory into my local application directory, but at least it works!
answered Dec 5 '18 at 16:33
MarekKnows.comMarekKnows.com
315213
add a comment |
I was able to finally get things working by doing the following:
- copy all the assets found in my node package under /dist/collection/assets into my own static/assets folder
- copy all the compiled javascript source code to static/js/
then from the html, if i refer to the code found in static everything resolves correctly.
I don't know why I need to move things around from my node_modules directory into my local application directory, but at least it works!
answered Dec 5 '18 at 16:33
MarekKnows.comMarekKnows.com
315213
add a comment |
I was able to finally get things working by doing the following:
- copy all the assets found in my node package under /dist/collection/assets into my own static/assets folder
- copy all the compiled javascript source code to static/js/
then from the html, if i refer to the code found in static everything resolves correctly.
I don't know why I need to move things around from my node_modules directory into my local application directory, but at least it works!
answered Dec 5 '18 at 16:33
MarekKnows.comMarekKnows.com
315213
I was able to finally get things working by doing the following:
- copy all the assets found in my node package under /dist/collection/assets into my own static/assets folder
- copy all the compiled javascript source code to static/js/
then from the html, if i refer to the code found in static everything resolves correctly.
I don't know why I need to move things around from my node_modules directory into my local application directory, but at least it works!
answered Dec 5 '18 at 16:33
MarekKnows.comMarekKnows.com
315213
answered Dec 5 '18 at 16:33
MarekKnows.comMarekKnows.com
315213
answered Dec 5 '18 at 16:33
MarekKnows.comMarekKnows.com
315213
answered Dec 5 '18 at 16:33
MarekKnows.comMarekKnows.com
315213
315213
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53290156%2fhow-to-use-a-stenciljs-component-in-electronjs%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Are you sure the path to
my-component.jsis correct? That might explain why the returned MIME type istext/html.– Thomas
Dec 3 '18 at 16:52
yes the path is correct.
– MarekKnows.com
Dec 3 '18 at 21:39
What's the actual response the browser receives? You can check that in DevTools. Also setting a base might work, see stackoverflow.com/questions/49603177/…
– Thomas
Dec 4 '18 at 11:09
where do I specify the base? Does that go somewhere in the index.html file?
– MarekKnows.com
Dec 4 '18 at 15:07
Yes, inside
head. It's to tell the browser the base URL for relative requests (likenode_modules/....).– Thomas
Dec 5 '18 at 12:27