일치하지 않는 익명의 define () 모듈

129

웹 애플리케이션 을 처음 탐색 할 때 (일반적으로 캐시가 비활성화 된 브라우저에서) 이 오류가 발생 합니다.

오류 : 일치하지 않는 anonymous define () 모듈 : function (필수) {

HTML :

<html>
   .
   .
   .
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
   <script> var require = { urlArgs: "v=0.4.1.32" }; </script>
   <script data-main="assets/js/main" src="assets/js/libs/require.js"></script>
   <script src="assets/js/ace/ace.js?v=0.4.1.32"></script>
   </body>
</html>

JS :

$(function () {
    define(function (require) {
        // do something
    });
});

이 오류의 의미와 발생 원인을 정확히 아는 사람이 있습니까?

소스 파일 , github 이슈 페이지에서 그것에 대한 짧은 토론

javascript  jquery  requirejs 
— 아도니스 K. 카 쿨리 디스
소스

답변:

142

AlienWebguy 말했듯이, 워드 프로세서 당 require.js는 폭파 할 수 있는 경우

  • 자체 스크립트 태그에 익명의 define ( " 문자열 ID없이 define ()을 호출하는 모듈 ")이 있습니다 (실제로는 전역 범위의 어느 곳이든 의미한다고 가정합니다)
  • 이름이 충돌하는 모듈이 있습니다
  • 로더 플러그인 또는 익명 모듈을 사용하지만 require.js의 옵티 마이저를 사용하여 번들로 묶지 마십시오.

require.js 모듈과 함께 browserify로 빌드 된 번들을 포함시키는 동안이 문제가 발생했습니다. 해결책은 다음 중 하나였습니다.

A. require.js가로드 되기 전에 스크립트 태그에 non-require.js 독립형 번들을 로드하거나

B. 스크립트 태그 대신 require.js를 사용하여로드

— BT
소스
2
이름이 충돌하는 것은 일반적인 일이다
— 훌리오 마린
1
익명 모듈이있는 특수한 경우의 또 다른 가능한 해결책은 requirejs에 의해 발생하는 기본 오류 예외를 방지하기 위해 requirejs.onError 함수를 덮어 쓰는 것입니다.
— xtrm
1
정확한 요청 을 완화하기 위해 풀 요청 ( github.com/requirejs/requirejs/pull/1763 )을 추가했습니다 . 요즘 매우 일반적인 문제라고 생각합니다.
— Bob S
1
로드하기 전에 알려 주셔서 감사합니다! 이 팁이 requirejs 자체 문서에없는 이유를 모르겠습니다 ... 스택이 유용한 곳
— Tobias Feil
14

스크립트 태그에 직접 포함 된 다른 라이브러리와 requirejs 파일을 포함했기 때문에이 오류가 발생했습니다. lodash와 같은 해당 라이브러리는 require의 define과 충돌하는 define 함수를 사용했습니다. requirejs 파일이 비동기 적으로로드되고 있으므로 요구 사항 정의가 다른 라이브러리가 정의 된 후에 정의되므로 충돌이 발생합니다.

오류를 제거하려면 requirejs를 사용하여 다른 모든 js 파일을 포함하십시오.

— eloone
소스
많은 라이브러리가 그런 일을하거나 적어도 그러한 기능을 사용하거나 내보내는 것으로 나타났습니다. 나는 그들이 필요로하는 모든 것을 요구할 것이다
— Andrey Popov
12

reactjs를 시작하면서 문제에 부딪 쳤고 초보자는 문서 를 그리스어로 작성했을 수 있습니다.

내가 겪었던 문제는 대부분의 초보자 예제에서 "문자열 ID"를 사용해야 할 때 "익명 정의"를 사용한다는 것입니다.

익명 정의

define(function() {
        return { helloWorld: function() { console.log('hello world!') } };
 })


define(function() {
        return { helloWorld2: function() { console.log('hello world again!') } };
 })

문자열 ID로 정의

define('moduleOne',function() {
    return { helloWorld: function() { console.log('hello world!') } };
})

 define('moduleTwo', function() {
      return { helloWorld2: function() { console.log('hello world again!') } };
})

문자열 ID 로 define 을 사용하면 다음과 같이 모듈을 사용하려고 할 때이 오류가 발생하지 않습니다.

require([ "moduleOne", "moduleTwo" ], function(moduleOne, moduleTwo) {
    moduleOne.helloWorld();
    moduleTwo.helloWorld2();
});
— 브라이언 맥키
소스
이 (후손에 대한 그냥 참고) 입니다 설명이 방법의 몇 가지 단점, 워드 프로세서에서 "정의 () 호출 모듈의 이름을 포함 ... 일반적으로 최적화 도구 ... 남에 의해 생성 된 [보내고] 모듈을 자신합니다 ... 수 덜 이식성있는 모듈… 일반적으로 모듈의 이름으로 코딩하는 것을 피하고 최적화 도구가 모듈 이름으로 구워 지도록하는 것이 가장 좋습니다.” … 이 GitHub 스레드 에서도 마찬가지입니다 . 이것이 초보자 예제에서 이름을 나열하는 것이 제외 된 이유 인 것 같습니다.
— Mark G.
10

문서 당 :

익명의 define () 호출로 스크립트를로드하기 위해 HTML로 스크립트 태그를 수동으로 코딩하면이 오류가 발생할 수 있습니다.

또한 이름이 지정된 몇 개의 모듈이있는 스크립트를로드하기 위해 HTML에서 스크립트 태그를 수동으로 코딩 한 다음 수동으로로드 한 스크립트의 이름이 지정된 모듈 중 하나와 이름이 같은 익명 모듈을로드하려고 시도하는 경우 코딩 된 스크립트 태그.

마지막으로 로더 플러그인 또는 익명 모듈 (문자열 ID없이 define ()을 호출하는 모듈)을 사용하지만 RequireJS 최적화 프로그램을 사용하여 파일을 결합하지 않으면이 오류가 발생할 수 있습니다. 최적화 프로그램은 익명 모듈의 이름을 올바르게 지정하여 최적화 된 파일에서 다른 모듈과 결합 할 수있는 방법을 알고 있습니다.

오류를 피하려면 다음을 수행하십시오.

  • RequireJS API를 통해 define ()을 호출하는 모든 스크립트를로드하십시오. define () 호출이있는 스크립트를로드하기 위해 HTML에서 스크립트 태그를 수동으로 코딩하지 마십시오.

  • HTML 스크립트 태그를 수동으로 코딩하는 경우 이름 지정된 모듈 만 포함하고 해당 파일의 모듈 중 하나와 이름이 같은 익명 모듈이로드되지 않아야합니다.

  • 로더 플러그인 또는 익명 모듈을 사용하는 데 문제가 있지만 RequireJS 최적화 프로그램이 파일 번들링에 사용되지 않는 경우 RequireJS 최적화 프로그램을 사용하십시오.

— AlienWebguy
소스
3
이것은 익명으로 정의 된 모듈입니까? github.com/requirejs/example-multipage/blob/master/www/js/app/…
— 가로등
5

일부 브라우저 확장 프로그램은 페이지에 코드를 추가 할 수 있습니다. 제 경우에는 requireJs와 엉망인 "Emmet in all textareas"플러그인이있었습니다. 브라우저에서 문서를 검사하여 문서에 추가 코드를 추가하지 않도록하십시오.

— 벡터
소스
5

기존 답변은 문제를 잘 설명하지만 requireJS를 사용하거나 이전에 스크립트 파일을 포함시키는 것이 레거시 코드로 인해 쉬운 옵션이 아닌 경우 약간 해킹 된 해결 방법은 스크립트 태그 전에 창 범위에서 require를 제거한 다음 사후에 복원하는 것입니다. 우리 프로젝트에서 이것은 서버 측 함수 호출 뒤에 싸여 있지만 효과적으로 브라우저는 다음을 볼 수 있습니다.

    <script>
        window.__define = window.define;
        window.__require = window.require;
        window.define = undefined;
        window.require = undefined;
    </script>
    <script src="your-script-file.js"></script>        
    <script>
        window.define = window.__define;
        window.require = window.__require;
        window.__define = undefined;
        window.__require = undefined;
    </script>

가장 작지는 않지만 작동하는 것처럼 보이며 많은 굴절을 저장했습니다.

— jcbdrn
소스
5
실제로이 작업을 수행하지 마십시오. IE에서는 제대로 작동하지 않습니다.
— jcbdrn
2
IE에서 간헐적으로 requireJS에 포함 된 스크립트는 해당 변수가 복원 된 후 require 명령이 실행 된 경우에도 창 범위에서 누락 된 것으로 정의했을 것입니다. 우리는 왜 이런 일이 일어 났는지 알지 못하여이 해키 솔루션을 포기했습니다.
— jcbdrn
2
@jcbdrn IE에만있는 것이 아닙니다. 다른 플랫폼에서 발생하는 것을 보았습니다. 그 이유는 HTML 사양이 동기식 스크립트의 실행 순서에 관한 보증을 제공 하지만 다른 동기식 스크립트에 대해서만 보장하기 때문입니다 . 동기식 스크립트와 관련하여 비동기식 스크립트 의 실행을 보장하지는 않습니다 (또는 그 반대). 따라서 여기 답변에 표시된 코드에서 두 script요소 사이에서 비동기 스크립트를 실행할 수 있습니다.
— Louis
가져 오는 번들 js를 편집 할 수 있다면 다음과 같이 전체를 래핑 할 수 있습니다.(function(){ var define = undefined; // the UMD registration code won't find the global 'define' anymore! // generated content goes here })()
— Pete Thorne
2

또는이 방법을 사용할 수 있습니다.

  • 코드베이스에 require.js 추가
  • 그런 다음 해당 코드를 통해 스크립트를로드하십시오.

<script data-main="js/app.js" src="js/require.js"></script>

그것이하는 일은 require.js를로드 한 후에 스크립트를로드 합니다.

— 우마르 아스 가르
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.