前提・実現したいこと
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}
あなたの回答
tips
プレビュー