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

JavaScript

飞云Jim梅

2020-03-12

我正在使用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" />

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

第908篇《src目录外部的create-react-app导入限制》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共5个回答
小小古一 2020.03.12

加上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.03.12

我认为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.03.12

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

村村AL 2020.03.12

您不需要弹出，可以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;
};
阿飞Sam 2020.03.12

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android