CollarCodeEditor.tsx:45 Uncaught (in promise) TypeError: Failed to resolve module specifier 'xxx'

Question

I want to load the codemirror6 theme dynamic when user select the theme name in the UI. So I tried to load the theme dependencies dynamic when user choose it. But now I am facing a issue Uncaught (in promise) TypeError: Failed to resolve module specifier 'cm6-theme-basic-light',this is the code look like:

const App: React.FC = () => {

  const handleClick = () => {
    let depName = "cm6-theme-basic-light";
    import(depName).then((module) => {
      const { theme } = module;
      
    });
  }

  return (
    <div >
      <button onClick={handleClick}>Click Me</button>
    </div>
  )
}

export default App

when passed a variable dependencies name, it failed. when use the static string, works. why did this happen? what should I do to fixed it? is it possible to use variable dependencies name? I have already installed the dependencies using pnpm like this:

> pnpm install cm6-theme-basic-light
Packages: +9
+++++++++
Progress: resolved 370, reused 347, downloaded 2, added 9, done

dependencies:
+ cm6-theme-basic-light 0.2.0

Done in 8.5s