javascript - No se puede resolver el módulo (no encontrado) en React.js

No puedo creer que esté haciendo una pregunta obvia, pero todavía recibo el error en el registro de la consola.

La consola dice que no puede encontrar el módulo en el directorio, pero he revisado al menos 10 veces por errores tipográficos. De todos modos, aquí está el código del componente.

Quiero renderizar Header en la raíz

import React, { Component } from 'react'
import Header from './src/components/header/header'
import logo from './logo.svg'
import './App.css'

class App extends Component {
  render() {
    return (
      <Header/>
    );
  }
}

export default App;

Este es el componente Header

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import navBar from './src/components/header/navBar'
import './src/css/header.css'

class Header extends Component {
    render() {
        return {
            <div>
             <div id="particles-js"></div>
             <navBar/>
             <Title/>
          </div>
        };
    }
}

ReactDOM.render(<Header/>, document.getElementById('header'));

He verificado al menos 10 veces que el módulo está en esta ubicación ./src/components/header/header, y lo está (la carpeta "header" contiene "header.js").

Sin embargo, React todavía lanza este error:

No se pudo compilar

./src/App.js Módulo no encontrado: No se puede resolver './src/components/header/header' en '/home/wiseman/Desktop/React_Components/github-portfolio/src'

npm test dice lo mismo.

Respuesta #1

La forma en que usualmente usamos import se basa en rutas relativas.

. y .. son similares a cómo los usamos para navegar en el terminal, como cd .. para salir del directorio y mv ~/file . para mover un archivo al directorio actual.

my-app/
  node_modules/
  package.json
  src/
    containers/card.js
    components/header.js
    App.js
    index.js

En tu caso, App.js está en el directorio src/ mientras que header.js está en src/components. Para importar lo harías así: import Header from './components/header'. Esto se traduce aproximadamente a que en mi directorio actual, busca la carpeta components que contiene un archivo header.

Ahora, si desde header.js, necesitas importar algo de card, harías esto. import Card from '../containers/card'. Esto se traduce en, salir de mi directorio actual, buscar una carpeta llamada containers que tenga un archivo card.

En cuanto a import React, { Component } from 'react', esto no comienza con un ./ o ../ o / por lo tanto node comenzará a buscar el módulo en node_modules en un orden específico hasta que se encuentre react. Para una comprensión más detallada, se puede leer aquí.

Respuesta #2

Si creas una aplicación con react-create-app, no olvides establecer la variable de entorno:

NODE_PATH=./src

O añádelo al archivo .env en tu carpeta raíz;

Respuesta #3

Eliminé el archivo package-lock.json y luego ejecuté

npm install

Respuesta #4

en mi caso, el mensaje de error fue

Module not found: Error: Can't resolve '/components/body

Mientras todo estaba en el directorio correcto.

¡Descubrí que renombrar body.jsx a body.js resuelve el problema!

Así que añadí este código en webpack.config.js para resolver jsx como js

 module.exports = {
  //...
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

¡Y entonces el error de compilación desapareció!

Respuesta #5

Agregar NODE_PATH como variable de entorno en .env está obsoleto y se reemplaza agregando "baseUrl": "./src" a compilerOptions en jsconfig.json o tsconfig.json.

Referencia

Respuesta #6

Lo resolví poniendo la extensión del archivo

import MyComponent from "src/components/MyComponent";

import MyComponent from "src/components/MyComponent.tsx";