Cannot use import statement outside a module after copy-webpack-plugin

Question

I've added git submodule with JS library to my Vue.js project. It is placed in root directory. I want to add the <script> tag to my index.html to import js file from this git submodule. So, I've configured webpack to copy files from git submodule in this way:

vue.config.js

    configureWebpack: {
        plugins: [
          new CopyPlugin(
            {
               patterns: [
                 {
                   from: "./library-dir",
                   to: "./library-dir"
                 }
               ]  
            }
          )
        ]
     }

Then I've added this line to my index.html:

<script src="./library-dir/script.js"></script>

But when I run the app I face an error in ./library-dir/script.js file:

Uncaught SyntaxError: Cannot use import statement outside a module

It points to the row with relative import:

import { Utils } from "./utils/utils.js"

How can I resolve such relative paths in submodule?

Appreciate if someone can help.

Answer 1

I was able to solve the issue by importing sumbodule inside module script tag:

<script type="module">
    import lib from "./library-dir/script.js";
    window.lib = lib;
</script>