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

javascript reactjs webpack create-react-app

2022-08-30 00:14:05

我正在使用create-react-app。我正在尝试从我的.我收到此错误消息。src/components

./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" />

我读过很多东西，说你可以做一个导入到路径，但这仍然不适合我。任何帮助将不胜感激。我知道有很多这样的问题，但他们都告诉我要导入徽标或图像，所以很明显我在大局中缺少一些东西。

答案 1

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

除了使用和修改 webpack 配置之外，没有官方方法可以禁用此功能。eject

但是，大多数功能及其更新都隐藏在create-react-app系统的内部。如果您这样做，您将不再拥有新功能及其更新。因此，如果您还没有准备好管理和配置包含的应用程序来配置webpack等 - 请不要执行操作。ejecteject

按照现有规则播放 - 将资源移动到src或基于文件夹URL使用而无需导入。public

但是，基于rewire的许多非官方解决方案，它允许您以编程方式修改webpack配置，而无需.但是删除插件并不好 - 这会失去一些保护，并且不会添加src中可用的一些功能。旨在支持多个文件夹。ejectejectModuleScopePluginModuleScopePlugin

更好的方法是添加完全正常工作的附加目录，类似于也受保护的 src。这可以使用 react-app-alias 来完成ModuleScopePlugin

无论如何，不要从文件夹中导入 - 这将在文件夹中复制，并且将通过两个不同的URL（以及不同的加载方式）提供，这最终会恶化包下载大小。publicbuild

从 src 文件夹导入是可取的，并且具有优势。所有内容都将通过webpack打包到具有最佳大小和最佳加载效率的块捆绑包中。

答案 2

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，但保持其余部分不变，并消除弹出的必要性。