search

guybedford / es-module-shims

Shims for new ES modules features on top of the basic modules support in browsers
MIT License
1.53k stars 82 forks source link

how to use "importmap-shim" with src attribute? #388

Open jogibear9988 opened 1 year ago

jogibear9988 commented 1 year ago

I've the following code:

    <script>
      const importMap = {
        imports: {
          "jquery.fancytree/": "./node_modules/jquery.fancytree/",
          "monaco-editor/": "./node_modules/monaco-editor/",
          "@node-projects/web-component-designer": "./node_modules/@node-projects/web-component-designer/dist/index.js",
          "@node-projects/web-component-designer/": "./node_modules/@node-projects/web-component-designer/",
          "@adobe/css-tools": "./node_modules/@adobe/css-tools/dist/index.mjs",
          "dock-spawn-ts/": "./node_modules/dock-spawn-ts/",
          "@node-projects/base-custom-webcomponent/": "./node_modules/@node-projects/base-custom-webcomponent/",
          "@node-projects/base-custom-webcomponent": "./node_modules/@node-projects/base-custom-webcomponent/dist/index.js",
          "@node-projects/lean-he-esm/": "./node_modules/@node-projects/lean-he-esm/",
          "@iobroker/socket-client/": "./node_modules/@iobroker/socket-client/",
          "@iobroker/socket-client": "./node_modules/@iobroker/socket-client/dist/esm/index.js",
          "tslib": "./node_modules/tslib/tslib.es6.mjs",
        }
      };
      //@ts-ignore
      importShim.addImportMap(importMap);
    </script>

works perfectly, but when I extract the importmap like this:

         <script type="importmap-shim" src="./dist/frontend/importmaps/importmap-config.json"></script>

it will be loaded by the browser but not be used.

it will work, if I paste the json directly into the 

     <script type="importmap-shim"> tag
guybedford commented 1 year ago

When you use <script type="importmap-shim"> you must also use <script type="module-shim"> as this runs the project in "shim mode", not polyfill mode.

jogibear9988 commented 1 year ago

I did use this: 

<script type="module">
  importShim('./dist/frontend/runtime/controls.js');
</script>

I'll try the other mode