javascript-src目录外的create-react-app导入限制

我正在使用create-react-app。 我试图从import logo from '../../public/images/logo_2016.png'; <img className="Header-logo" src={logo} alt="Logo" />内部文件中的公用文件夹中调用图像。我收到此错误消息。

./src/components/website_index.js找不到模块:您试图   导入../../public/images/logo/WC-BlackonWhite.jpg   在项目src /目录之外。 国外的相对进口   不支持src /。 您可以将其移动到src /中,也可以添加一个   从项目的node_modules /对其进行符号链接。

import logo from '../../public/images/logo_2016.png'; <img className="Header-logo" src={logo} alt="Logo" />

我读过很多东西,说您可以导入路径,但对我来说仍然行不通。 任何帮助将不胜感激。 我知道有很多这样的问题,但是它们都告诉我要导入徽标或图像,因此很明显我在全局图中缺少某些内容。

8个解决方案
64 votes

这是create-react-app开发人员添加的特殊限制。 它在ModuleScopePlugin中实现,以确保文件位于src /中。 该插件可确保从应用程序源目录的相对导入不会到达该目录的外部。

您可以禁用此功能,但只能在create-react-app项目的eject操作之后。

大多数功能及其更新都隐藏在create-react-app系统的内部。 如果您制作eject,您将不再具有某些功能及其更新。 因此,如果您尚未准备好管理和配置用于配置Webpack等的应用程序-请勿进行ModuleScopePlugin操作。

按照现有规则播放(移至src)。 但是现在您可以知道如何删除限制:执行eject并从webpack配置文件中删除ModuleScopePlugin

oklas answered 2019-10-05T12:19:59Z
21 votes

为他人的答案提供更多信息。 关于如何将.png文件交付给用户,您有两个选择。 文件结构应符合您选择的方法。 这两个选项是:

  1. 使用react-create-app随附的模块系统(public),并将其与JS捆绑在一起。 将图像放在<img src={process.env.PUBLIC_URL + '/img/logo.png'} />;文件夹中。

  2. public文件夹提供服务,然后让Node为文件提供服务。 create-react-app显然还带有环境变量,例如 <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;.这意味着您可以在React应用中引用它,但仍然可以通过Node来提供它,而浏览器在常规GET请求中单独要求它。

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

danielgormly answered 2019-10-05T12:20:54Z
8 votes

您需要将WC-BlackonWhite.jpg移动到src目录中。 public目录用于将直接在HTML中链接的静态文件(例如favicon),而不是要直接导入捆绑包中的内容。

Joe Clay answered 2019-10-05T12:21:20Z
7 votes

软件包react-app-rewired可以用来删除插件。 这样,您不必退出。

请遵循npm软件包页面上的步骤(安装软件包并翻转package.json文件中的调用),并使用类似于此代码的config-overrides.js文件:

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

这将从使用过的WebPack插件中删除ModuleScopePlugin,但其余部分保持原样,从而无需弹出。

Lukas Bach answered 2019-10-05T12:22:02Z
4 votes

此限制确保所有文件或模块(导出)都在const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');目录中,实现在./node_modules/react-scripts/config/webpack.config.dev.js中,使用以下代码行。

// 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();
      }

您可以通过以下方式删除此限制

  1. 要么更改这段代码(不推荐)
  2. 或执行const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');,然后从目录中删除const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
  3. 或评论/从./node_modules/react-scripts/config/webpack.config.dev.js中删除const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');

PS:当心弹出的后果。

its4zahoor answered 2019-10-05T12:23:12Z
4 votes

如果图像位于公用文件夹中,则应使用

"/images/logo_2016.png"

在您的<img> src中,而不是导入

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

这会工作

<img className="Header-logo" src="/images/logo_2016.png" alt="Logo" />
Abhinav bhardwaj answered 2019-10-05T12:23:51Z
1 votes

如果只需要导入一个文件,例如README.md或package.json,则可以将其显式添加到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()
      ]),
    ]
  }
}
James McGuigan answered 2019-10-05T12:24:33Z
1 votes

最好的解决方案是分叉react-scripts,这在官方文档中实际上已提到,请参阅:弹出的替代方法

Fareed Alnamrouti answered 2019-10-05T12:25:03Z
translate from https://stackoverflow.com:/questions/44114436/the-create-react-app-imports-restriction-outside-of-src-directory