La respuesta a esta pregunta depende de su tiempo de ejecución y entorno de compilación, y también de si está utilizando módulos ES (la sintaxis de import ) o módulos CommonJS (la sintaxis require ). A continuación encontrará una descripción general de los casos más comunes.

Webpack (utilizado por create-react-app y muchas otras herramientas) funciona con módulos ES de la siguiente manera:

Si la ruta tiene una extensión de archivo, el archivo se empaqueta inmediatamente. De lo contrario, la extensión del archivo se resuelve mediante la opciónresolve.extensions , que le indica al resolutor qué extensiones son aceptables para la resolución, por ejemplo, .js , .jsx . Más sobre ladocumentación oficial.

Si está utilizando módulos ES con Node.js:

Se debe proporcionar una extensión de archivo al usar la palabra clave de import para resolver especificadores relativos o absolutos. Los índices de directorio (p. ej './startup/index.js' ) también deben especificarse por completo. Este comportamiento coincide con el comportamiento de la importación en entornos de navegador, suponiendo un servidor configurado normalmente.

El --experimental-specifier-resolution=[mode] se puede usar para personalizar el algoritmo de resolución de extensión. El modo predeterminado es explícito, lo que requiere que se proporcione al cargador la ruta completa a un módulo. Más sobre la documentación oficial.

Si está utilizando módulos ES en el navegador sin ninguna compilación, habrá una solicitud a un servidor para obtener el archivo necesario, por lo que debe agregar la extensión. Más sobre la documentación de MDN.

Si está utilizando módulos CommonJS con Node.js:

Si no se encuentra el nombre de archivo exacto, Node.js intentará cargar el nombre de archivo requerido con las extensiones agregadas: .js , .json y, finalmente, .node . Más sobre la documentación oficial.