質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

2674閲覧

Nuxt.js のコンポーネントでgsap(greensock)をimportする方法について

katatema01

総合スコア23

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/01/14 05:46

前提・実現したいこと

Nuxt.jsにてgsap(greensock)を利用したアプリケーションを構築しています。
vueコンポーネントにて、gsapを利用したScrollToを実現したいです。

発生している問題・エラーメッセージ

npm i gsap にてnpmモジュールを追加後、
Nuxt.jsのコンポーネントでimportを試みるも、エラーとなります。

Unexpected token export

server-bundle.js

javascript

1 !*** external "gsap/TweenLite" ***! 2 *********************************/ 3/*! no static exports found */ 4/***/ (function(module, exports) { 5 6module.exports = require("gsap/TweenLite"); 7 8/***/ }), 9 10/***/ "lodash/omit": 11/*!******************************!*\

上記の
module.exports = require("gsap/TweenLite");
の箇所で発生している様です。

該当のソースコード

vue

1<template lang="pug"> 2 a(href="#about" @click="scrollTo") 3 <span></span>Scroll 4</template> 5 6<script> 7import { TweenLite } from 'gsap/TweenLite' 8import { ScrollToPlugin } from 'gsap/ScrollToPlugin' 9 10export default { 11 methods: { 12 scrollTo(e) { 13 e.preventDefault() 14 TweenLite.to(window, 0.5, { 15 scrollTo: { y: '#about', autoKill: false } 16 }) 17 } 18 } 19} 20</script>

試したこと

import { TweenLite } from 'gsap/TweenLite' import { ScrollToPlugin } from 'gsap/ScrollToPlugin'

import { TweenLite } from 'gsap' import { ScrollToPlugin } from 'gsap'

に変更すると画面表示はされるが、
scrollToメソッド動作時にブラウザ側で以下のエラーが発生する。

Uncaught TypeError: Failed to execute 'scrollTo' on 'Window': parameter 1 ('options') is not an object. at Array._setRatio [as setRatio] (index.js:6611) at Object.push../node_modules/gsap/TweenLite.js.p.render (index.js:7165) at Object.push../node_modules/gsap/TweenLite.js.p.render (index.js:6469) at Object.push../node_modules/gsap/TweenLite.js.Animation._updateRoot.TweenLite.render (index.js:6741) at Object.push../node_modules/gsap/TweenLite.js.p.dispatchEvent (index.js:5879) at _tick (index.js:5931)

どうも、ScrollToPluginが正常にimportされていない様な気がしています。

補足情報(FW/ツールのバージョンなど)

node: v9.2.0
npm: 6.5.0

package.json以下です。

json

1{ 2 "name": "xxxxx", 3 "version": "1.0.0", 4 "description": "xxxxx", 5 "author": "xxxxx", 6 "private": true, 7 "scripts": { 8 "dev": "nuxt", 9 "build": "nuxt build", 10 "start": "nuxt start", 11 "generate": "nuxt generate", 12 "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", 13 "precommit": "npm run lint" 14 }, 15 "dependencies": { 16 "@nuxtjs/axios": "^5.0.0", 17 "bootstrap": "^4.2.1", 18 "cross-env": "^5.2.0", 19 "gsap": "^2.0.2", 20 "node-sass": "^4.11.0", 21 "nuxt": "^2.0.0", 22 "pug": "^2.0.3", 23 "pug-loader": "^2.4.0", 24 "pug-plain-loader": "^1.0.0", 25 "sass-loader": "^7.1.0", 26 "style-loader": "^0.23.1" 27 }, 28 "devDependencies": { 29 "babel-eslint": "^8.2.1", 30 "eslint": "^5.0.1", 31 "eslint-config-prettier": "^3.1.0", 32 "eslint-loader": "^2.0.0", 33 "eslint-plugin-prettier": "2.6.2", 34 "eslint-plugin-vue": "^4.0.0", 35 "nodemon": "^1.11.0", 36 "prettier": "1.14.3" 37 } 38}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問