Creé una aplicación reactjs/webpack con un componente creado en main.js:
import React from 'react'; import cube from 'my-module'; class MainLayout extends React.Component { constructor(props) { super(props); console.log('testing=main constructor') console.log(cube(3)); } render() { console.log('main render' ) return ( <div>hello</div> ); } } export default MainLayoutEstoy tratando de entender la importación y exportación en es6 y creé un módulo en el mismo directorio:
// module "my-module.js" export default function cube(x) { return x * x * x; }Sin embargo, recibo este error:
ERROR in ./app/components/layouts/main/main.js Module not found: Error: Cannot resolve module 'my-module' in ...¿Cómo puedo resolver este error?
Si no especifica una ruta (que comienza con ./ ) antes del nombre de su módulo, webpack (usando la resolución normal del módulo nodejs) buscará my-module en la carpeta node_modules más cercana.
Entonces, si el archivo que contiene su clase MainLayout está en la misma carpeta que my-module.js , su declaración de importación se vería así:
import cube from './my-module'Si estuviera un nivel por encima, se vería así:
import cube from '../my-module'Luego uno encima de eso:
import cube from '../../my-module'Etcétera.
Es posible configurar webpack con alias o hacer que conozca archivos específicos que actúan como módulos de nivel superior. Otra técnica que he encontrado muy útil es estructurar tu aplicación como:
node_modules/ src/ node_modules/ app.js my-module.js webpack.config.js De esa manera, siempre puede buscar cualquiera de sus propios módulos sin especificar una ruta, ya que el nodo primero buscará en su carpeta src/node_modules , luego, si no puede encontrarlo allí, buscará en su carpeta node_modules de nivel superior donde todos sus npm paquetes en vivo. Sin embargo, si hace esto, ¡asegúrese de no poner src/node_modules en .gitignore !