Ignore some imports from vite:import-analysis plugin to enable import-maps workflow.

[JayaKrishnaNamburu]

Heya, I am trying to setup a import-maps based worflow using vite. The main goal is to have the users code bundles using vite with all the HMR capabilities and stuff at build time. But load the dependencies alone from the CDN server.

Errror

[vite] Internal server error: Failed to resolve import "react-dom" from "src/main.tsx". Does the file exist?
  Plugin: vite:import-analysis
  File: /Users/jkrishna/Documents/teleporthq/vite-esm-react-template/src/main.tsx
  1  |  var _jsxFileName = "/Users/jkrishna/Documents/teleporthq/vite-esm-react-template/src/main.tsx";
  2  |  import React from "react";
  3  |  import ReactDOM from "react-dom";
     |                        ^
  4  |  import "./global.module.css";
  5  |  import App from "./pages/app";

from here -> https://github.com/vitejs/vite/blob/main/packages/vite/src/node/plugins/importAnalysis.ts#L203

In order for the deps to work, we set the import-map directly inside the index.html file

<script type="importmap">
      {
        "imports": {
          "prop-types": "https://ga.jspm.io/npm:[email protected]/dev.index.js",
          "react": "https://ga.jspm.io/npm:[email protected]/dev.index.js",
          "react-dom": "https://ga.jspm.io/npm:[email protected]/dev.index.js",
          "react-helmet": "https://ga.jspm.io/npm:[email protected]/lib/dev.Helmet.js",
          "react-router-dom": "https://ga.jspm.io/npm:[email protected]/index.js",
          "react/jsx-runtime": "https://ga.jspm.io/npm:[email protected]/jsx-runtime.js"
        },
        "scopes": {
          "https://ga.jspm.io/": {
            "@babel/runtime/helpers/esm/extends": "https://ga.jspm.io/npm:@babel/[email protected]/helpers/esm/extends.js",
            "history": "https://ga.jspm.io/npm:[email protected]/index.js",
            "object-assign": "https://ga.jspm.io/npm:[email protected]/index.js",
            "react-fast-compare": "https://ga.jspm.io/npm:[email protected]/index.js",
            "react-is": "https://ga.jspm.io/npm:[email protected]/dev.index.js",
            "react-router": "https://ga.jspm.io/npm:[email protected]/index.js",
            "react-side-effect": "https://ga.jspm.io/npm:[email protected]/lib/index.js",
            "scheduler": "https://ga.jspm.io/npm:[email protected]/dev.index.js",
            "scheduler/tracing": "https://ga.jspm.io/npm:[email protected]/dev.tracing.js"
          }
        }
      }
    </script>

So, in order to achieve the same. I am using the below config from vite

const exclude = [...Object.keys(config?.importmap?.imports || {})];

export default defineConfig({
  clearScreen: true,
  optimizeDeps: {
    exclude,
  },
  build: {
    rollupOptions: {
      external: exclude,
    },
  },
  css: {
    modules: {
      scopeBehaviour: "local",
      localsConvention: "dashesOnly",
    },
  },
  plugins: [react()],
});

All, works good for production builds. But in dev mode, vite is running vite:import-analysis plugin to resolve the imported files. Is there is a way to by-pass this import-analysis for specific files that are being defined in optimizeDeps.exclude. So the dev builds work in the same way as prod. And the deps are loaded using CDN.

References

Vite setup

GitHub - https://github.com/JayaKrishnaNamburu/esm-vite-import-maps/blob/master/vite.config.ts
Deployed Vite App -> https://zealous-dubinsky-ed00ad.netlify.app/

Plain EsBuild setup

GitHub setup -> https://github.com/JayaKrishnaNamburu/esm-importmaps-esbuild-template/blob/master/builder.js#L29
Deployed version - https://serene-joliot-62d732.netlify.app

And i tried the same, with this cool plugin here https://github.com/pakholeung37/vite-plugin-import-maps. But still seems to break the build. Unless the module is inside script tag alone.

[yangmiao7]

I noticed that this question was asked in 2021. My situation and problem are the same as yours. How did you end up solving this problem?
#14549

[yangmiao7]

@JayaKrishnaNamburu

[NotYoojun]

I have the same problem. Help!

[2234839]

I have written a plugin to solve similar problems, hoping to enlighten you

plugins: [
// siyuan lib is actually empty and can only be loaded through require at run time.
// And vite using import will not be able to load to the change package, here do a hack to change to require
// In this way, with vite-plugin-siyuan, it can be directly referenced during development
      {
        name: "siyuan shim",
        transform(code, id) {
          if (/import \{(.*)\} from "siyuan"/.test(code)) {
            const transformedCode = code.replace(
              /import \{(.*)\} from "siyuan"/,
              'const {$1} = require("siyuan")',
            );
            return {
              code: transformedCode,
              map: null, 
            };
          }
        },
      },
    ],