Problem importing `@uiw/react-codemirror

[pieterbeulque]

Cannot find module '@uiw/react-codemirror/esm/useCodeMirror' imported from @uiw/react-codemirror/esm/index.js

on a simple import CodeMirror from "@uiw/react-codemirror";.

This is a Remix project built with Vite 5. "type": "module" is set on my package.json.

This is the only package I have this issue with. Running on Node 22. On Node 20, I get Cannot use import statement outside a module.

This makes me think it has something to do with ESM / CJS / … module resolution going wrong, but I can't really debug it more than that.

If I do a dynamic import(), it works fine.

[fredericoo]

also having that issue, but hey thanks for the tip of dynamic importing it

[grabbou]

This issue occurs because outputted ESM imports files without extensions. Simply add .js to the import and it will work. You will have to do it for all the imports.

You can also configure your Vite to process those packages from source, here's what I've done and it works:

https://github.com/callstackincubator/flows-ai/blob/cd2176c055cea526099c2e53000f4159cb535516/docs/astro.config.mjs

[curran]

There is no "type": "module" in the distributed package.json. That might be the root cause here.

[hipstersmoothie]

This seems to be a pretty systemic issue throughout all of the uiw code mirror packages. Someone should def take a look!

[curran]

FWIW this is what is currently working for me:

vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react(),
  ],
  resolve: {
    // Special case for runtime package,
    // so the app uses the latest source
    // rather than the built package.
    alias: {
      /**
       * @uiw/* packages are not compatible with ESM, as they do not import with `.js` extension.
       * We're using source in TypeScript instead.
       */

      '@uiw/codemirror-theme-okaidia':
        '@uiw/codemirror-theme-okaidia/src/index.ts',
      '@uiw/codemirror-theme-abcdef':
        '@uiw/codemirror-theme-abcdef/src/index.ts',
      '@uiw/codemirror-theme-dracula':
        '@uiw/codemirror-theme-dracula/src/index.ts',
      '@uiw/codemirror-theme-eclipse':
        '@uiw/codemirror-theme-eclipse/src/index.ts',
      '@uiw/codemirror-theme-github':
        '@uiw/codemirror-theme-github/src/index.ts',
      '@uiw/codemirror-theme-material':
        '@uiw/codemirror-theme-material/src/index.ts',
      '@uiw/codemirror-theme-nord':
        '@uiw/codemirror-theme-nord/src/index.ts',
      '@uiw/codemirror-theme-xcode':
        '@uiw/codemirror-theme-xcode/src/index.ts',
      '@uiw/codemirror-themes':
        '@uiw/codemirror-themes/src/index.tsx',
    },
  },
  optimizeDeps: {
    include: [
      '@uiw/codemirror-theme-okaidia',
      '@uiw/codemirror-theme-abcdef',
      '@uiw/codemirror-theme-dracula',
      '@uiw/codemirror-theme-eclipse',
      '@uiw/codemirror-theme-github',
      '@uiw/codemirror-theme-material',
      '@uiw/codemirror-theme-nord',
      '@uiw/codemirror-theme-xcode',
      '@uiw/codemirror-themes',
    ],
  },
});

In the application:

// These import are wreaking havoc with the build process
// and causing app deployments to fail.
// The upstream library is not configured properly in NPM.
// See:
// https://github.com/uiwjs/react-codemirror/issues/680
// https://github.com/scalar/scalar/issues/4222
// As a workaround, we need to explicitly target the ESM
// distribution of the library, which is not used by default
// because there is no "type": "module" field in the package.json
// of any of these `@uiw/codemirror-theme-*` packages.

import { okaidia } from '@uiw/codemirror-theme-okaidia/esm/index.js';
import { abcdef } from '@uiw/codemirror-theme-abcdef/esm/index.js';
import { dracula } from '@uiw/codemirror-theme-dracula/esm/index.js';
import { eclipse } from '@uiw/codemirror-theme-eclipse/esm/index.js';
import { githubDark } from '@uiw/codemirror-theme-github/esm/index.js';
import { material } from '@uiw/codemirror-theme-material/esm/index.js';
import { nord } from '@uiw/codemirror-theme-nord/esm/index.js';
import { xcodeLight } from '@uiw/codemirror-theme-xcode/esm/index.js';
import { createTheme } from '@uiw/codemirror-themes/esm/index.js';

export {
  okaidia,
  abcdef,
  dracula,
  eclipse,
  githubDark,
  material,
  nord,
  xcodeLight,
  createTheme,
};

As new releases come out I will try removing this special treatment and see if it breaks. I'm not even totally sure of what's going on and why this works.

[wdolek]

We are using webpack for building our project and with dependency update (4.23.10 -> 4.23.11 - yes, it's just build number! 😢) it stopped working. I tried to put alias configuration to our webpack, but couldn't figure out optimizeDeps.include equivalent.