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
-
For example, I have this script in my html:
but right now, the imports 404
Beta Was this translation helpful? Give feedback.
All reactions