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

古一2020-05-28

我正在使用create-react-app。我正在尝试从文件夹中的文件中调用公用文件夹中的图片src/components。我收到此错误消息。

./src/components/website_index.js找不到模块：您试图导入属于项目src /目录之外的../../public/images/logo/WC-BlackonWhite.jpg。不支持src /以外的相对导入。您可以将其移动到src /中，也可以从项目的node_modules /中向其添加符号链接。

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

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

GO2020/05/28 10:05:59

除Bartek Maciejiczek的答案外，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;
    }
  }
};

展开摘要

启人2020/05/28 10:05:59

最好的解决方案是fork react-scripts，实际上在官方文档中提到过，请参阅：弹出的替代方法

Vicky2020/05/28 10:05:59

我认为Lukas Bach解决方案使用react-app- rewired来修改webpack配置是一个好方法，但是，我不会排除整个ModuleScopePlugin，而是将可以导入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;
};

武藏2020/05/28 10:05:59

不需要弹出，可以react-scripts使用rescripts库修改配置

然后可以这样：

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

  config.resolve.plugins.splice(scopePluginIndex, 1);

  return config;
};

猪猪2020/05/28 10:05:59

您需要WC-BlackonWhite.jpg进入src目录。该public目录用于将直接在HTML中链接的静态文件（例如favicon），而不是要直接导入捆绑包中的内容。

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer