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

No puedo creer que esté haciendo una pregunta obvia, pero sigo recibiendo el error en el registro de la consola.

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

Quiero renderizar el encabezado 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 Headercomponente

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 comprobado 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 arroja este error:

No se pudo compilar

./src/App.js Module not found: Can't resolve './src/components/header/header' in '/home/wiseman/Desktop/React_Components/github-portfolio/src'

La prueba npm dice lo mismo.

La forma en que usamos habitualmente importse basa en la ruta relativa.

.y ..son similares a cómo usamos para navegar terminalcomo cd ..para salir del directorio y mv ~/file .mover un fileal directorio actual.

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

En su caso, App.jsestá en el src/directorio mientras header.jsestá en src/components. Para importti harías import Header from './components/header'. Esto se traduce aproximadamente a en mi directorio actual, busque la carpeta de componentes que contiene un archivo de encabezado.

Ahora, si desde header.js, necesitas importalgo de card, harías esto. import Card from '../containers/card'. Esto se traduce a, salir de mi directorio actual, buscar un contenedor de nombre de carpeta que tenga un archivo de tarjeta.

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

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

NODE_PATH=./src

O agregue al .envarchivo a su carpeta raíz;

Agregar NODE_PATHcomo variable de entorno en .envestá obsoleto y se reemplaza por agregar "baseUrl": "./src", compilerOptionsen jsconfig.jsono tsconfig.json.

Referencia

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

npm install

Leer más

en mi caso, el mensaje de error fue

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

Mientras todo estaba en el directorio correcto.

¡Encontré ese cambio body.jsxde nombre para body.jsresolver el problema!

Así que agregué este código webpack.config.jspara resolverlo jsxcomojs

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

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

Creo que es el doble uso del encabezado. Intenté algo similar yo mismo y también causé problemas. Capitalicé mi archivo de componentes para que coincida con los demás y funcionó.

import Header from './src/components/header/header';

Debiera ser

import Header from './src/components/header/Header';

Tuve un problema similar.

Porque:

import HomeComponent from "components/HomeComponent";

Solución:

import HomeComponent from "./components/HomeComponent";

NOTA: ./ fue antes de componentes. Puede leer la publicación de @Zac Kwan arriba sobre cómo usarimport

Enfrenté el mismo problema cuando creé una nueva aplicación de reacción, probé todas las opciones en https://github.com/facebook/create-react-app/issues/2534 pero no ayudó. Tuve que cambiar el puerto de la nueva aplicación y luego funcionó. De forma predeterminada, las aplicaciones usan el puerto 3000. Cambié el puerto a 8001 en package.json de la siguiente manera:

  "scripts": {
    "start": "PORT=8001 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Necesita estar en la carpeta del proyecto, si está dentro srco publictiene que salir de esas carpetas. Suponga que el nombre de su proyecto de reacción es 'hola-reacciona' entoncescd hello-react

debe cambiar el encabezado de importación de ' ./ src / components / header / header 'a

importar Encabezado de ' .. / src / components / header / header'

Puede intentar ejecutar 'npm install' en la carpeta de la aplicación. Esto también podría resolver el problema. Funcionó para mí.

Estaba enfrentando el mismo problema y lo resolví. Vea si su index.jsarchivo está ensrc carpeta, entonces cualquier archivo que esté importando, la carpeta que lo contiene también debe estar dentro de la carpeta src.

Eso significa que si su carpeta de componentes está fuera de la srccarpeta, simplemente arrástrela dentro de la srccarpeta en su editor porque los archivos fuera desrc carpeta no se importan.

Entonces podrá importar usando ./components/header/header(en este caso)

Existe una mejor manera de manejar la importación de módulos en su aplicación React. Considere hacer esto:

Agregue un jsconfig.jsonarchivo a su carpeta base. Esa es la misma carpeta que contiene su package.json. A continuación, defina sus importaciones de URL base en él:

//jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./src"
  }
}

Ahora, en lugar de llamar ../../, puede hacer esto fácilmente:

import navBar from 'components/header/navBar'
import 'css/header.css'

Tenga en cuenta que 'componentes /' es diferente de '../components/'

Es más ordenado de esta manera.

Pero si desea importar archivos en el mismo directorio, también puede hacerlo:

import logo from './logo.svg'

Verifique las declaraciones de importación. Debe terminar con punto y coma. Si omite alguno, obtendrá este error.

También verifique si la siguiente declaración de importación se agregó en su componente.

importar {threadId} de 'worker_threads';

Si es así, elimine esa línea. Esto funciona para mi.

En mi caso, cambio el nombre de un archivo de componente, un código VS agrega la siguiente línea de código para mí:

import React, { Component } from "./node_modules/react";

Así que lo arreglé eliminando el: ./node_modules/

import React, { Component } from "react";

¡Salud!