1

TSでGSAPを読み込んでコンパイルまでは上手くいくのですが、JSの時点で下記エラーが表示されます。

tsconfig.jsonの値はいろいろ変えてみたのですが、どうしてもうまくいきません。
何が問題なのでしょうか。どなたか教えて頂けないでしょうか。

エラーメッセージ:

Uncaught ReferenceError: exports is not defined

Object.defineProperty(exports, "__esModule", { value: true });

tsconfig.json

"target": "ES5", 
"lib": ["es2015", "dom"],
"module": "ES2015", 
"moduleResolution": "node10"

TSファイル

import { gsap, Bounce } from 'gsap';

// 個数
const MAX = 50;

// 適当に要素をたくさん用意する
const rects = [];
for (let i = 0; i < MAX; i++) {
  const rect = document.createElement("div");
  rect.className = "rect";
  rect.style.width = `calc(100vw * ${1 / MAX})`;
  rect.style.height = `calc(100vw * ${1 / MAX})`;
  rect.style.left = `calc(100vw * ${i / MAX})`;
  rect.style.top = `-100px`;
  document.body.appendChild(rect);
  rects.push(rect);
}

// タイムラインを作成する
const tl = gsap.timeline({ repeat: -1, repeatDelay: 1 });
rects.forEach((rect, index) => {
  // トゥイーンインスタンスを追加する
  tl.add(
    gsap.to(rect, {
      duration: 3,
      y: (window.innerHeight * 3) / 4,
      ease: Bounce.easeOut,
      delay: Math.random(),
    }),
    0
  );
});

1 件の回答 1

0

module の指定が効いておらず、CommonJS になっていると思われます。

質問の tsconfig.json は省略されていると思いますが、記述が compilerOptions に対してなされているか確認して下さい。

tsconfig.json の記述例:

{
    "compilerOptions": {
        "target": "ES5",
        "module": "ES2015",
        "lib": [
            "es2015",
            "dom"
        ],
        "moduleResolution": "Node",
    }
}

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。