Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Bug: Code Editor + Jest not working

Abierto
#111 15 comentarios 3 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
35/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
react, typescript
Área
build-system, frontend, testing-qa

Línea de trabajo

Start by running npm i and yarn jest in the linked reproduction repository to confirm the import error. Then inspect the package metadata and the esm, cjs, and dist/editor.js entry points, including the main field, and compare how Jest resolves each one. Done means the library can be imported under Jest without moduleNameMapper, with the entry-point behavior documented or corrected.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Hey! Thanks for this library.

The Code Editor does not work when using Jest. One reason is Jest not supporting import statements natively but what I am not understanding is that it should be using cjs - but it is not.

I created a down-to-earth, super-easy repository (it literally does nothing but importing your library and console.log). Just do npm i and run yarn jest to trigger jest.

https://github.com/activenode-bugs/uiw-react-textarea-code-editor-jest

You will see the error message of Cannot use import statement outside a module.

I googled this for hours and tried multiple things but maybe I'm overlooking something. It will always end up in trying to load unified from the rehype library with an import statement instead of going for a non-module approach.

What works (which is not a satisfying solution):

I've looked into your package folder which contains esm, cjs AND a dist folder. If you use jest with moduleNameMapper and then map @uiw/react-textarea-code-editor to @uiw/react-textarea-code-editor/dist/editor.js it will work / run.

moduleNameMapper: {
    // if you use the following, it will work
    // '@uiw/react-textarea-code-editor':
    //   '<rootDir>/node_modules/@uiw/react-textarea-code-editor/dist/editor.js',
  },

But the question is WHY? My first thought then is: Shouldn't your repo point main: "dist/editor.js" if this works seamlessly?

Which triggers my follow up question why there even is esm, cjs AND dist (can you clarify the differentiation?) and why does dist/editor.js work but cjs does not?

I feel like there is something weird going on which you can probably clarify as I am not as deep into this as you are :) Thank you so much in advance!

Lenguaje dominante
TypeScript
Estrellas
575
Forks
23
Sin PR fusionados en 30 d

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de uiwjs/react-textarea-code-editor

Todos los issues de uiwjs/react-textarea-code-editor

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.