我正在使用create-react-app。我试图从我的src/components内部的文件中调用我的公共文件夹中的图像。我收到这个错误信息。

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

从“../../public/images/logo_2016.png”导入logo; <img className="Header-logo" src={logo} alt=" logo" />

我读过很多东西,说你可以做一个导入的路径,但这仍然不是为我工作。任何帮助都将不胜感激。我知道有很多这样的问题,但他们都告诉我导入标志或形象,所以很明显,我在大局中遗漏了一些东西。


当前回答

再加上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;
    }
  }
};

我之前的解决方案适用于Webpack 4,但不适用于Webpack 5。在浏览了从那时起积累的解决方法之后,我发现下面的方法非常简单(而且似乎是可扩展的)。

import { CracoAliasPlugin } from 'react-app-alias';

const cracoConfig = {
  plugins: [
    {
      plugin: CracoAliasPlugin,
      options: {
        alias: { '~': './' },
      },
    },
  ],
}

然后像这样导入:

import whatever from '~/<path-to-file>';

其他回答

把@Flaom写的评论放在这里,标记为回复答案,这实际上挽救了生命:

“这怎么是公认的答案呢?通过简单地设置NODE_PATH=./src/..在。env文件中。通过这样做,你可以从src文件夹外导入,而不用经历弹出应用程序的痛苦。”

Flaom

编辑添加了一些更多的信息@cigien请求。

上面所有的答案都很好地描述了为什么当我们用create-react-app创建react应用程序时,我们不能使用公共文件夹中的图像。我自己也有这个问题,读了所有这些答案,我意识到,答案说的是“黑”应用程序,以删除限制我们的模块。有些答案甚至没有撤销选项。对于“培训”应用程序来说,这是可以的。

就我个人而言,我不希望在我自己的项目中添加改变应用概念的解决方案,特别是在商业项目中。@Flaom解决方案是最简单的,如果将来有任何变化,它可以被另一个解决方案取代。它没有任何风险,可以随时移除,是最简单的。

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

下面是一个在简单情况下工作得很好的替代方案(使用fs和ncp)。在开发过程中,保持一个脚本运行,以监视/src之外的共享文件夹的更改。当进行更改时,脚本可以自动将共享文件夹复制到项目中。下面是递归地查看单个目录的示例:


// This should be run from the root of your project

const fs = require('fs')
const ncp = require('ncp').ncp;

ncp.limit = 16

// Watch for file changes to your shared directory outside of /src
fs.watch('../shared', { recursive: true }, (eventType, filename) => {
    console.log(`${eventType}: ${filename}`)

    // Copy the shared folder straight to your project /src
    // You could be smarter here and only copy the changed file
    ncp('../shared', './src/shared', function(err) {
        if (err) {
          return console.error(err);
        }

        console.log('finished syncing!');
    });
})

您可以尝试使用simlinks,但是相反。

React不会遵循simlink,但是你可以将一些东西移动到源目录,并创建一个simlink到它。

在项目的根目录中,我有一个节点服务器目录,其中有几个模式文件。我想在前端使用它们,所以我:

移动文件/src 在终端,我cd到哪里模式文件属于服务器 ln -s SRC_PATH_OF_SCHEMA_FILE

这为react提供了它所需要的东西,node也很乐意通过simlinks包含文件。

安装这两个包

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