create-react-app는 src 디렉토리 외부로 제한을 가져옵니다.

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

나는 당신이 경로로 가져 오기를 할 수 있다고 말하는 많은 것을 읽었지만 여전히 나를 위해 작동하지 않습니다. 도움을 주시면 감사하겠습니다. 나는 이와 같은 많은 질문이 있다는 것을 알고 있지만 모두 로고 나 이미지를 가져 오라고 말하면서 분명히 큰 그림에서 무언가를 놓치고 있습니다.

이것은 create-react-app 개발자가 추가 한 특별한 제한 사항입니다. ModuleScopePlugin파일이에 있도록하기 위해 구현 되었습니다 src/. 이 플러그인을 사용하면 앱의 소스 디렉토리에서 상대적인 가져 오기가 외부로 도달하지 않습니다.

ejectcreate-react-app 프로젝트를 실행 한 후에 만이 기능을 비활성화 할 수 있습니다 .

대부분의 기능과 업데이트는 create-react-app 시스템 내부에 숨겨져 있습니다. eject당신이 더 이상 일부 기능과 업데이트가 없습니다 만들 경우 . 따라서 웹팩 등을 구성하는 데 포함 된 응용 프로그램을 관리하고 구성 할 준비가되지 않은 경우 eject작업을 수행하지 마십시오 .

기존 규칙에 따라 재생합니다 (src로 이동). 그러나 이제 제한을 제거하는 방법을 알 수 있습니다 : webpack 구성 파일에서 do eject및 removeModuleScopePlugin .

이후 생성이-반응 - 응용 프로그램 v0.4.0NODE_PATH 환경 변수는 절대 수입 경로를 지정할 수 있습니다. 그리고 v3.0.0 NODE_PATH 은 or baseUrl에서 설정하기 위해 더 이상 사용되지 않습니다 .jsconfig.jsontsconfig.json

절대 가져 오기를 사용하면 기본 URL에 지정된 값을 기준으로 import App from 'App'대신 사용할 수 있습니다 import App from './App'.

이 기능은 monorepos 또는 기타 구성 질문에 특히 유용하지만 public폴더 에서 이미지 나 다른 것을 가져 오는 데는 유용하지 않습니다 .

public폴더의 내용은 폴더에 배치 build되고 상대 URL로 제공됩니다. 또한 가져온 모든 내용은 webpack에서 처리되며 build폴더 에도 저장됩니다.

public폴더 에서 무언가를 가져 오면 아마도 그 것이 폴더에 복제 build되고 두 가지 다른 URL (또는 다른로드 방법)로 사용 가능하게되어 궁극적으로 패키지 다운로드 크기가 악화됩니다.

src 폴더 에서 가져 오는 것이 바람직하며 장점이 있습니다. 모든 것은 웹팩에 의해 최적의 크기 와 최적의 로딩 효율을 위해 덩어리로 번들에 포장 될 것입니다 .

중간 솔루션, 즉있다 재배 선에 프로그래밍 방식으로 웹팩 설정을 수정할 수 있습니다 시스템은. 그러나 플러그인을 제거 하는 것은 좋은 해결책 이 아닙니다 . 와 비슷한 완전히 작동하는 추가 디렉토리를 추가하는 것이 좋습니다 .ModuleScopePluginsrc

현재 루트 폴더 create-react-app이외의 추가 디렉토리는 지원하지 않습니다 src. 이것은 react-app-rewire-alias를 사용하여 수행 할 수 있습니다

패키지 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이 제거되지만 나머지는 그대로두고 꺼내야 할 필요성이 제거됩니다.

다른 사람의 답변에 조금 더 많은 정보를 제공합니다. .png 파일을 사용자에게 전달하는 방법에 관한 두 가지 옵션이 있습니다. 파일 구조는 선택한 방법을 따라야합니다. 두 가지 옵션은 다음과 같습니다.

1. import x from yreact-create-app와 함께 제공된 모듈 시스템 ( )을 사용하여 JS와 번들로 묶습니다. src폴더 안에 이미지를 넣습니다 .

2. public폴더 에서 제공하고 노드가 파일을 제공하게하십시오. create-react-app에는 분명히 환경 변수가 있습니다 (예 :) <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;. 즉, React 앱에서 참조 할 수는 있지만 일반적인 GET 요청에서 브라우저가 별도로 요청하여 노드를 통해 제공 할 수 있습니다.

출처 : create-react-app

이미지가 공용 폴더에 있으면 사용해야합니다.

"/images/logo_2016.png"

당신의 <img> src대신 수입의

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

이 작동합니다

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

당신은 이동해야 WC-BlackonWhite.jpg당신에 src디렉토리. public디렉토리 (예 : 파비콘 등) HTML에 직접 연결되도록 당신이 번들로 직접 가져 오는 거라고, 아니 물건을거야 정적 파일입니다.

솔루션을 제공하는 몇 가지 답변이 react-app-rewired있지만 조금 더 우아한 customize-cra특수 removeModuleScopePlugin()API를 노출합니다 . (동일한 솔루션이지만 customize-cra패키지로 추상화 되었습니다.)

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 = removeModuleScopePlugin()

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

이 제한은 모든 파일 또는 모듈 (내보내기)이 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. 또는 않는eject 제거한 다음 ModuleScopePlugin.js디렉토리에서.
3. 또는 주석 / 제거 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');에서./node_modules/react-scripts/config/webpack.config.dev.js

추신 : eject 결과에주의하십시오 .

이 두 패키지를 설치

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

추출 할 필요가 없습니다 react-scripts. 스크립트 라이브러리를 사용 하여 구성을 수정할 수 있습니다

그러면 다음과 같이 작동합니다.

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

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

  return config;
};

webpack 설정을 수정하기 위해 react-app- rewired 를 사용 하는 Lukas Bach 솔루션 이 좋은 방법이라고 생각 하지만 전체 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;
};

공용 폴더 내의 이미지

  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 Extension 내에서 이미지 사용

README.md 또는 package.json과 같은 단일 파일 만 가져와야하는 경우 ModuleScopePlugin ()에 명시 적으로 추가 할 수 있습니다.

config / paths.js

const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
module.exports = {
  appPackageJson: resolveApp('package.json'),
  appReadmeMD:    resolveApp('README.md'),
};

config / webpack.config.dev.js + config / webpack.config.prod.js

module.exports = {
  resolve: {
    plugins: [
      // Prevents users from importing files from outside of src/ (or node_modules/).
      // This often causes confusion because we only process files within src/ with babel.
      // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
      // please link the files into your node_modules/ and let module-resolution kick in.
      // Make sure your source files are compiled, as they will not be processed in any way.
      new ModuleScopePlugin(paths.appSrc, [
          paths.appPackageJson,
          paths.appReadmeMD         // README.md lives outside of ./src/ so needs to be explicitly included in ModuleScopePlugin()
      ]),
    ]
  }
}

가장 좋은 방법은 포크이다 react-scripts,이 실제로 공식 문서에 언급, 참조 : 대안을 꺼내기에

ant design을 사용할 때 와 같이 여러 가지 수정이 필요한 경우 다음과 같은 여러 기능을 결합 할 수 있습니다.

const {
  override,
  removeModuleScopePlugin,
  fixBabelImports,
} = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
  }),
  removeModuleScopePlugin(),
);

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