No puedo creer que esté haciendo una pregunta obvia, pero aún recibo el error en el registro de la consola.
La consola dice que no puede encontrar el módulo en el directorio, pero lo he comprobado al menos 10 veces en busca de 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 componente de 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 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 generalmente usamos la import se basa en la ruta relativa.
. y .. son similares a cómo usamos para navegar en terminal como cd .. para salir del directorio y mv ~/file . para mover un file al directorio actual.
my-app/ node_modules/ package.json src/ containers/card.js components/header.js App.js index.js En su caso, App.js está en el directorio src/ mientras que header.js está en src/components . Para import , haría import Header from './components/header' . Esto se traduce aproximadamente en mi directorio actual, busque la carpeta de componentes que contiene un archivo de encabezado.
Ahora, si desde header.js , necesita import algo desde card , haría esto. import Card from '../containers/card' . Esto se traduce en, salir de mi directorio actual, buscar contenedores de nombre de carpeta que tengan un archivo de tarjeta.
En cuanto a la import React, { Component } from 'react' , esto no comienza con ./ o ../ o / por lo tanto, el nodo comenzará a buscar el módulo en node_modules en un orden específico hasta que se encuentre la react . 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 un archivo .env a su carpeta raíz;