DEV.log

Uncaught (in promise) TypeError: WebAssembly.instantiate(): Import #0 module="env" error: module is not an object or function 본문

WebAssembly/웹어셈블리 인 액션

Uncaught (in promise) TypeError: WebAssembly.instantiate(): Import #0 module="env" error: module is not an object or function

magnae2016 2022. 1. 30. 17:18

Where did the problem occur?

  • 도서명
    웹어셈블리 인 액션
  • 구분
    주요 기술 오류(로직/코드)
  • 상품 버전
    종이책
  • 페이지
    116~121 페이지
  • 위치정보
    4.2 엠스크립튼 연결 코드 없이 동작하는 웹어셈블리 모듈 생성하기
    4.2.2 코드를 웹어셈블리 모듈로 컴파일
  • 본문 내용
    지금까지 작성한 C++ 코드를 자바스크립트 연결 파일을 생성하지 않고 웹어셈블리 모듈러 컴파일하겠습니다.
    emcc side_module_system_functions.cpp validate.cpp -s SIDE_MODULE=2 -O1 -o validate.wasm​

 

Problem
엠스크립튼 3.1.2 버전에서 실습할 경우 개발자 도구 콘솔창에서 오류를 확인할 수 있습니다.

 

Uncaught (in promise) TypeError: WebAssembly.instantiate(): Import #0 module="env" error: module is not an object or function

 

Answers 1. C++ 코드를 웹어셈블리 모듈로 컴파일

다음과 같이 명령어를 수정하고 엠스크립튼 모듈을 다시 생성합니다.

emcc side_module_system_functions.cpp validate.cpp -s STANDALONE_WASM=1 --no-entry -O1 -o validate.wasm
warning: To build in STANDALONE_WASM mode without a main(), use emcc --no-entry

 

Answers 2. 모듈과 상호작용할 자바스크립트 수정(editproduct.js)

본문 내용에서 엠스크립튼 컴파일러는 각 모듈 함수명 앞에 언더스코어 문자를 추가하므로 _create_buffer 처럼 모듈 함수명 앞에 언더스코어 문자를 붙여야 한다고 했지만, 웹어셈블리 모듈 인스턴스의 익스포트된 항목을 살펴보면 모듈 함수명 앞에 언더스코어가 붙어있지 않습니다. 따라서 예제 코드에서 모듈 함수명 앞에 붙은 언더스코어를 제거해야합니다.

 

// 수정된 validateName 함수(editproduct.js)
function validateName(name, errorMessagePointer) {
    const namePointer = moduleExports.create_buffer(name.length + 1);
    copyStringToMemory(name, namePointer);

    const isValid = moduleExports.ValidateName(
        namePointer,
        MAXIMUM_NAME_LENGTH,
        errorMessagePointer
    );

    moduleExports.free_buffer(namePointer);

    return isValid === 1;
}

 

Environment

  • macOS
  • emcc (Emscripten gcc/clang-like replacement + linker emulating GNU ld) 3.1.2
  • python-3.9.2
  • node-14.18.2

 

참고 자료

http://www.yes24.com/Product/Goods/92907281

 

웹어셈블리 인 액션 - YES24

웹 개발의 새로운 지평을 열게 될 잠재력 높은 기술!웹어셈블리를 처음 접하는 분을 위한 안내서로, 자바스크립트에 의존하지 않고도 브라우저 기반의 고성능 애플리케이션을 만들 수 있는 방

www.yes24.com

 

1 Comments
댓글쓰기 폼