How do I make imports in a script[type=module] be resolved? #113
Unanswered
NullVoxPopuli
asked this question in
Q&A
Replies: 1 comment
-
|
Hello @NullVoxPopuli, the resolving only works for tag attributes, not in the code inside the tag. You should create the JS/TS file, e.g. import Application from './app/app.ts';
import environment from './app/config/environment';
Application.create(environment.APP);Then add this file into HTML template, e.g. <html>
<head>
<!-- relative path to ./src/myApp.ts file -->
<script src="./myApp.ts" type="module"></script>
</head>
<body>
<h1>Hello World!</h1>
<!-- OR you can add JS/TS source file here -->
<script src="./myApp.ts" type="module"></script>
</body>
</html>In Webpack config add the const path = require('path');
const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
module.exports = {
plugins: [
new HtmlBundlerPlugin({
entry: {
index: 'src/index.html',
},
js: {
//filename: 'js/[name].[contenthash:8].js', // JS output filename, use it if the inline option is false
inline: true, // <= add this option to inline generated JS into HTML
},
}),
],
};The generated HTML will contain inlined JS code: <html>
<head>
<script type="module">
// here will be compiled JS code
Application.create(environment.APP);
</script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>More you can see here: How to inline JS in HTML. |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
For example, I have this script in my html:
but right now, the imports 404
Beta Was this translation helpful? Give feedback.
All reactions