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

Question

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

我已经阅读了很多东西,说你可以对路径进行导入,但这对我来说仍然不起作用.任何帮助将不胜感激.我知道有很多这样的问题,但他们都告诉我要导入徽标或图像,所以我在大局中遗漏了一些东西.

Answer 1

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

您可以在ModuleScopePlugincreate-react-app项目运行后禁用此功能.

大多数功能及其更新都隐藏在create-react-app系统的内部.如果你让src/你不再拥有一些功能及其更新.因此,如果您还没准备好管理和配置包含的应用程序以配置webpack等等 - 请勿执行eject操作.

按现有规则播放(转到src).但现在您可以知道如何删除限制:从webpack配置文件执行eject和删除eject.

Answer 2

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

Answer 3

我能够src/通过“复制”具有file:本地依赖关系的外部文件来导入外部文件。

"dependencies": {
    "@my-project/outside-dist": "file:./../../../../dist".
}

然后

import {FooComponent} from "@my-project/outside-dist/components";

不需要eject或react-app-rewired其他第三方解决方案。

Answer 4

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

1. 使用import x from yreact-create-app提供的模块系统()并将其与JS捆绑在一起.将图像放在src文件夹中.

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

Answer 5

软件包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，但其余部分保持原样，从而无需弹出。

Answer 6

有一些答案提供了 解决方案react-app-rewired，但customize-cra包括一个removeModuleScopePlugin()更优雅的API。（这是相同的解决方案，但被customize-cra包抽象掉了。）

npm i --save-dev react-app-rewired customize-cra

包.json

"scripts": {
    - "start": "react-scripts start"
    + "start": "react-app-rewired start",
    ...
},

config-overrides.js

const { removeModuleScopePlugin } = require('customize-cra')

module.exports = removeModuleScopePlugin()

Answer 7

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

"/images/logo_2016.png"

在您<img> src而不是导入

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

这会起作用

<img className="Header-logo" src="/images/logo_2016.png" alt="Logo" />

Answer 8

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

Answer 9

复制粘贴打字稿解决方案

（例如，这适用于 CRA/TS 堆栈，与 CRA/JS 相比，它需要额外的步骤。解决方案本身没有类型化。）

添加所需的路径，而ModuleScopePlugin不是直接删除插件。

下面的代码使用craco，但应该可以轻松用于react-app-rewired或类似的解决方案。您只需要找到拥有webpackConfig对象的位置（react-app-rewired：module.exports.webpack在您的 内部config-overrides.js），并将其传递给提供的函数。

craco.config.js

const path = require("path");
const enableImportsFromExternalPaths = require("./src/helpers/craco/enableImportsFromExternalPaths");

// Paths to the code you want to use
const sharedLibOne = path.resolve(__dirname, "../shared-lib-1/src");
const sharedLibTwo = path.resolve(__dirname, "../shared-lib-2/src");

module.exports = {
    plugins: [
        {
            plugin: {
                overrideWebpackConfig: ({ webpackConfig }) => {
                    enableImportsFromExternalPaths(webpackConfig, [
                        // Add the paths here
                        sharedLibOne,
                        sharedLibTwo,
                    ]);
                    return webpackConfig;
                },
            },
        },
    ],
};

帮助者/craco/enableImportsFromExternalPaths.js

const findWebpackPlugin = (webpackConfig, pluginName) =>
    webpackConfig.resolve.plugins.find(
        ({ constructor }) => constructor && constructor.name === pluginName
    );

const enableTypescriptImportsFromExternalPaths = (
    webpackConfig,
    newIncludePaths
) => {
    const oneOfRule = webpackConfig.module.rules.find((rule) => rule.oneOf);
    if (oneOfRule) {
        const tsxRule = oneOfRule.oneOf.find(
            (rule) => rule.test && rule.test.toString().includes("tsx")
        );

        if (tsxRule) {
            tsxRule.include = Array.isArray(tsxRule.include)
                ? [...tsxRule.include, ...newIncludePaths]
                : [tsxRule.include, ...newIncludePaths];
        }
    }
};

const addPathsToModuleScopePlugin = (webpackConfig, paths) => {
    const moduleScopePlugin = findWebpackPlugin(
        webpackConfig,
        "ModuleScopePlugin"
    );
    if (!moduleScopePlugin) {
        throw new Error(
            `Expected to find plugin "ModuleScopePlugin", but didn't.`
        );
    }
    moduleScopePlugin.appSrcs = [...moduleScopePlugin.appSrcs, ...paths];
};

const enableImportsFromExternalPaths = (webpackConfig, paths) => {
    enableTypescriptImportsFromExternalPaths(webpackConfig, paths);
    addPathsToModuleScopePlugin(webpackConfig, paths);
};

module.exports = enableImportsFromExternalPaths;

取自这里和这里

Answer 10

我认为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;
};

Answer 11

公共文件夹内的图像

  use image inside html extension
  <img src="%PUBLIC_URL%/resumepic.png"/>

  use image inside  js extension
  <img src={process.env.PUBLIC_URL+"/resumepic.png"}/>

• 在 js 扩展中使用图像

Answer 12

安装这两个包

npm i --save-dev react-app-rewired customize-cra

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

Answer 13

此限制确保所有文件或模块（导出）都位于src/目录内，实现位于./node_modules/react-dev-utils/ModuleScopePlugin.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. 或者然后ejectModuleScopePlugin.js从目录中删除。
3. 或评论/const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');删除./node_modules/react-scripts/config/webpack.config.dev.js

PS：谨防弹出后果。

Answer 14

添加到 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>';