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

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 src / del proyecto. Las importaciones relativas fuera de src / no son compatibles. Puede moverlo dentro de src / o agregarle un enlace simbólico desde los módulos_nodo / 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.

Esta es una restricción especial agregada por los desarrolladores de create-react-app. Se implementa ModuleScopePluginpara garantizar que los archivos residan 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 ejectoperación 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 lo hace eject, ya no tendrá algunas características 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 ejectoperación.

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

Desde create-react-app v0.4.0, la NODE_PATHvariable de entorno permite especificar una ruta para la importación absoluta. Y desde v3.0.0 NODE_PATH está en desuso a favor de establecer baseUrlen jsconfig.jsono tsconfig.json.

La importación absoluta permite usar en import App from 'App'lugar import App from './App'del valor especificado en la URL base.

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 la publiccarpeta.

El contenido de la publiccarpeta se colocará en la buildcarpeta y estará disponible por URL relativa. Además, todo lo importado será procesado por webpack y se colocará también en la buildcarpeta.

Si importa algo de la publiccarpeta, probablemente esa cosa se duplicará en la buildcarpeta 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 paquete web con el paquete con trozos de tamaño óptimo y para la mejor eficiencia de carga .

Hay soluciones intermedias, a saber, el sistema de cableado que le permite modificar mediante programación la configuración del paquete web. Pero eliminar el ModuleScopePlugincomplemento no es una buena solución; es mejor agregar directorios adicionales totalmente funcionales similares a src.

Actualmente, create-react-appno admite directorios adicionales que no sean srcen la carpeta raíz. Esto se puede hacer usando react-app-rewire-alias

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 config-overrides.jsarchivo 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.

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. Use el sistema de módulos ( import x from y) provisto con react-create-app y combínelo con su JS. Coloque la imagen dentro de la srccarpeta.

2. Servirlo desde la publiccarpeta y dejar que Node sirva el archivo. create-react-app también aparentemente 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 servir a través de Node, con su navegador solicitándolo por separado en una solicitud GET normal.

Fuente: create-react-app

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

"/images/logo_2016.png"

en su <img> srclugar de importar

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

Esto funcionará

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

Necesita moverse WC-BlackonWhite.jpga su srcdirectorio. El publicdirectorio 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.

Hay algunas respuestas que brindan soluciones react-app-rewired, pero customize-craexpone una removeModuleScopePlugin()API especial que es un poco más elegante. (Es la misma solución, pero abstraída por el customize-crapaquete).

npm i --save-dev react-app-rewired customize-cra

package.json

"scripts": {
    - "start": "react-scripts start"
    + "start": "react-app-rewired start",
    ...
},

config-overrides.js

const { removeModuleScopePlugin } = require('customize-cra')

module.exports = removeModuleScopePlugin()

Eliminarlo con 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;
    }
  }
};

Esta restricción asegura que todos los archivos o módulos (exportaciones) estén dentro del src/directorio, la implementación está ./node_modules/react-dev-utils/ModuleScopePlugin.jsen 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 fragmento de código (no recomendado)
2. o noeject luego retire ModuleScopePlugin.jsdel 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 expulsión .

instale estos dos paquetes

npm i --save-dev react-app-rewired customize-cra

package.json

"scripts": {
    - "start": "react-scripts start"
    + "start": "react-app-rewired start"
},

config-overrides.js

const { removeModuleScopePlugin } = require('customize-cra');

module.exports = function override(config, env) {
    if (!config.plugins) {
        config.plugins = [];
    }
    removeModuleScopePlugin()(config);

    return config;
};

No necesita expulsar, puede modificar la react-scriptsconfiguración 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;
};

Creo que la solución de Lukas Bach para usar react-app- rewired para modificar la configuración del paquete web es una buena manera de hacerlo, sin embargo, no excluiría todo el ModuleScopePlugin, sino que incluiría en la lista blanca el archivo específico que se puede importar fuera de src:

config-overrides.js

const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin");
const path = require("path");

module.exports = function override(config) {
  config.resolve.plugins.forEach(plugin => {
    if (plugin instanceof ModuleScopePlugin) {
      plugin.allowedFiles.add(path.resolve("./config.json"));
    }
  });

  return config;
};

Imagen dentro de la carpeta pública

  use image inside html extension
  <img src="%PUBLIC_URL%/resumepic.png"/>

  use image inside  js extension
  <img src={process.env.PUBLIC_URL+"/resumepic.png"}/>

• usar imagen dentro de la extensión js

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()
      ]),
    ]
  }
}

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

Si necesita múltiples modificaciones, como cuando usa el diseño de hormigas , puede combinar múltiples funciones como esta:

const {
  override,
  removeModuleScopePlugin,
  fixBabelImports,
} = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
  }),
  removeModuleScopePlugin(),
);

Agregando a la respuesta de Bartek Maciejiczek, así es como se ve con Craco:

const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin");
const path = require("path");

module.exports = {
  webpack: {
    configure: webpackConfig => {
      webpackConfig.resolve.plugins.forEach(plugin => {
        if (plugin instanceof ModuleScopePlugin) {
          plugin.allowedFiles.add(path.resolve("./config.json"));
        }
      });
      return webpackConfig;
    }
  }
};