Estoy usando crear-reaccionar-aplicación. Estoy tratando de llamar a una imagen de mi carpeta pública desde un archivo dentro de mi src/components . Estoy recibiendo este mensaje de error.
./src/components/website_index.js Módulo no encontrado: intentó importar ../../public/images/logo/WC-BlackonWhite.jpg que se encuentra fuera del directorio src/ del proyecto. No se admiten las importaciones relativas fuera de src/. Puede moverlo dentro de src/ o agregarle un enlace simbólico desde node_modules/ del proyecto.
import logo from '../../public/images/logo_2016.png'; <img className="Header-logo" src={logo} alt="Logo" />
He leído muchas cosas que dicen que puedes hacer una importación a la ruta, pero eso todavía no funciona para mí. Cualquier ayuda sería muy apreciada. Sé que hay muchas preguntas como esta, pero todas me dicen que importe el logotipo o la imagen, así que claramente me falta algo en el panorama general.
Esta es una restricción especial agregada por los desarrolladores de create-react-app. Se implementa en ModuleScopePlugin para garantizar que los archivos residan en src/ . Ese complemento garantiza que las importaciones relativas del directorio de origen de la aplicación no lleguen fuera de él.
No hay una forma oficial de deshabilitar esta función, excepto usar eject y modificar la configuración del paquete web.
Pero, la mayoría de las funciones y sus actualizaciones están ocultas en el interior del sistema create-react-app. Si haces eject no tendrás más novedades y su actualización. Entonces, si no está listo para administrar y configurar la aplicación incluida para configurar el paquete web, etc., no realice la operación de eject .
Siga las reglas existentes: mueva los activos a src o utilícelos según la URL de la carpeta public sin importar.
Sin embargo, en lugar de eject , existen muchas soluciones no oficiales, basadas en rewire , que le permiten modificar mediante programación la configuración del paquete web sin eject . Pero eliminar el complemento ModuleScopePlugin no es bueno ; esto pierde algo de protección y no agrega algunas características disponibles en src . ModuleScopePlugin está diseñado para admitir varias carpetas.
La mejor manera es agregar directorios adicionales completamente funcionales similares a src también protegidos por ModuleScopePlugin . Esto se puede hacer usando react-app-alias
De todos modos, no importe desde la carpeta public : se duplicará en la carpeta de build y estará disponible mediante dos URL diferentes (y con diferentes formas de carga), lo que en última instancia empeora el tamaño de descarga del paquete.
Importar desde la carpeta src es preferible y tiene ventajas. Todo se empaquetará por paquete web en el paquete con fragmentos de tamaño óptimo y para una mejor eficiencia de carga .
El paquete react-app-rewired se puede usar para eliminar el complemento. De esta manera usted no tiene que expulsar.
Siga los pasos en la página del paquete npm (instale el paquete y voltee las llamadas en el archivo package.json) y use un archivo config-overrides.js similar a este:
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); module.exports = function override(config, env) { config.resolve.plugins = config.resolve.plugins.filter(plugin => !(plugin instanceof ModuleScopePlugin)); return config; };Esto eliminará ModuleScopePlugin de los complementos WebPack usados, pero dejará el resto como estaba y eliminará la necesidad de expulsar.
Quitarlo usando Craco:
module.exports = { webpack: { configure: webpackConfig => { const scopePluginIndex = webpackConfig.resolve.plugins.findIndex( ({ constructor }) => constructor && constructor.name === 'ModuleScopePlugin' ); webpackConfig.resolve.plugins.splice(scopePluginIndex, 1); return webpackConfig; } } };