javascript - deploy - npx react create app

La aplicación create-react-app restringe las importaciones fuera del directorio src

Question

Estoy usando create-react-app. Estoy tratando de llamar una imagen desde 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 queda fuera del directorio del proyecto src /. Las importaciones relativas fuera de src / no son compatibles. Puede moverlo dentro de src / o agregarle un enlace simbólico desde el nodo_módulos / 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 importar a la ruta, pero eso todavía no me funciona. Cualquier ayuda sería muy apreciada. Sé que hay muchas preguntas como esta, pero todas me dicen que importe el logotipo o la imagen con tanta claridad que me falta algo en el panorama general.

Answer 1

El paquete react-app-rewired se puede usar para eliminar el complemento. De esta manera no tienes 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á el ModuleScopePlugin de los complementos de WebPack utilizados, pero dejará el resto como estaba y elimina la necesidad de expulsar.

Answer 2

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.

Puede deshabilitar esta función, pero solo después de la operación de eject del proyecto create-react-app.

La mayoría de las funciones y sus actualizaciones están ocultas en las partes internas del sistema create-react-app. Si eject , ya no tendrá algunas funciones y su actualización. Entonces, si no está listo para administrar y configurar la aplicación incluida para configurar el paquete web, etc., no eject operación.

Juega según las reglas existentes (muévete a src). Pero ahora puede saber cómo eliminar la restricción: eject y elimine ModuleScopePlugin del archivo de configuración del paquete web .

Desde create-react-app v0.4.0 la variable de entorno NODE_PATH permite especificar una ruta para la importación absoluta.

La importación absoluta permite utilizar la import App from ''App'' lugar de import App from ''./App'' relativamente al valor especificado en la variable NODE_PATH .

Esta característica es específicamente útil para monorepos u otras preguntas de configuración, pero no para importar imágenes o cualquier otra cosa desde public carpeta public .

El contenido de public carpeta public se colocará en la carpeta de build y estará disponible por URL relativa. También todo lo importado será procesado por webpack y se colocará también en la carpeta de build .

Si importa algo de public carpeta public probablemente esa cosa se duplicará en la carpeta de build y estará disponible por dos URL diferentes (o con diferentes formas de carga), lo que finalmente empeorará el tamaño de descarga del paquete.

Importar desde la carpeta src es preferible y tiene ventajas. Todo será empaquetado por webpack en el paquete con trozos de tamaño óptimo y para la mejor eficiencia de carga .

Answer 3

Esta restricción asegura que todos los archivos o módulos (exportaciones) estén dentro del directorio src/ , la implementación está en ./node_modules/react-dev-utils/ModuleScopePlugin.js , en las siguientes líneas de código.

// Resolve the issuer from our appSrc and make sure it''s one of our files
// Maybe an indexOf === 0 would be better?
     const relative = path.relative(appSrc, request.context.issuer);
// If it''s not in src/ or a subdirectory, not our request!
     if (relative.startsWith(''../'') || relative.startsWith(''..//')) {
        return callback();
      }

Puede eliminar esta restricción mediante

1. ya sea cambiando este código (no recomendado)
2. o eject luego eliminar ModuleScopePlugin.js del directorio.
3. o comentar / eliminar const ModuleScopePlugin = require(''react-dev-utils/ModuleScopePlugin''); de ./node_modules/react-scripts/config/webpack.config.dev.js

PD: cuidado con las consecuencias de la eject .

Answer 4

Necesita mover WC-BlackonWhite.jpg a su directorio src . El directorio public es para archivos estáticos que se vincularán directamente en el HTML (como el favicon), no cosas que va a importar directamente en su paquete.

Answer 5

No necesita expulsar, puede modificar la configuración de react-scripts con la biblioteca de rescripts

Esto funcionaría entonces:

module.exports = config => { const scopePluginIndex = config.resolve.plugins.findIndex( ({ constructor }) => constructor && constructor.name === "ModuleScopePlugin" ); config.resolve.plugins.splice(scopePluginIndex, 1); return config; };

Answer 6

Ofrecer un poco más de información a las respuestas de otros. Tiene dos opciones con respecto a cómo entregar el archivo .png al usuario. La estructura del archivo debe ajustarse al método que elija. Las dos opciones son:

1. Utilice el sistema de módulos ( import x from y ) provisto con react-create-app y agruparlo con su JS. Coloque la imagen dentro de la carpeta src .

2. Servirlo desde la carpeta public y dejar que Node sirva el archivo. aparentemente, create-react-app también viene con una variable de entorno, por ejemplo, <img src={process.env.PUBLIC_URL + ''/img/logo.png''} />; . Esto significa que puede hacer referencia a él en su aplicación React, pero aún así se puede enviar a través de Node, con su navegador solicitándolo por separado en una solicitud GET normal.

Fuente: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-fonts-and-files

Answer 7

Si solo necesita importar un solo archivo, como README.md o package.json, esto se puede agregar explícitamente a ModuleScopePlugin ()

config / paths.js

const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
module.exports = {
  appPackageJson: resolveApp(''package.json''),
  appReadmeMD:    resolveApp(''README.md''),
};

config / webpack.config.dev.js + config / webpack.config.prod.js

module.exports = {
  resolve: {
    plugins: [
      // Prevents users from importing files from outside of src/ (or node_modules/).
      // This often causes confusion because we only process files within src/ with babel.
      // To fix this, we prevent you from importing files out of src/ -- if you''d like to,
      // please link the files into your node_modules/ and let module-resolution kick in.
      // Make sure your source files are compiled, as they will not be processed in any way.
      new ModuleScopePlugin(paths.appSrc, [
          paths.appPackageJson,
          paths.appReadmeMD         // README.md lives outside of ./src/ so needs to be explicitly included in ModuleScopePlugin()
      ]),
    ]
  }
}

Answer 8

Si sus imágenes están en la carpeta pública, entonces debe usar

"/images/logo_2016.png"

en su <img> src lugar de importar

''../../public/images/logo_2016.png''; 

Esto funcionará

<img className="Header-logo" src="/images/logo_2016.png" alt="Logo" />

Answer 9

la mejor solución es bifurcar react-scripts , esto en realidad se menciona en la documentación oficial, vea: Alternativas a la expulsión