gatsbyjs / gatsby

The best React-based framework with performance, scalability and security built in.
https://www.gatsbyjs.com
MIT License
55.27k stars 10.31k forks source link

Animation Library GSAP doesn't work after generating build. #19553

Closed alqamabinsadiq closed 5 years ago

alqamabinsadiq commented 5 years ago

Summary

Everything works fine in development env (using gatsby develop) but when I generate build using gatsby build. I can't see any gsap animations. Is there any other way to use gsap in gatsby?

Relevant information

gatsby build not loading gsap.

Environment (if relevant)

File contents (if changed)

gatsby-config.js:

module.exports = {
  pathPrefix: "/react-rendering",
  plugins: ["gatsby-plugin-react-helmet", "gatsby-plugin-sass"],
}

package.json:

{
  "name": "experience-builder",
  "description": "Experience Builder",
  "license": "MIT",
  "scripts": {
    "develop": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "css": "^2.2.4",
    "fs": "0.0.1-security",
    "gatsby": "^2.13.42",
    "gatsby-plugin-react-helmet": "^3.1.3",
    "gatsby-plugin-sass": "^2.1.23",
    "global": "^4.4.0",
    "gsap": "^3.0.1",
    "lodash": "^4.17.15",
    "node-sass": "^4.13.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-helmet": "^5.2.1"
  },
  "version": "1.0.0",
  "main": "index.js",
  "author": "Alqama Bin Sadiq <alqamabinsadiq@gmail.com>",
  "devDependencies": {
    "path": "^0.12.7",
    "prop-types": "^15.7.2"
  }
}

gatsby-node.js:

const tree = require('./tree');

exports.createPages = async ({ actions: { createPage } }) => {

  for (let i = 0; i < tree.pages.length; i++) {
    const page = { ...tree.pages[i] };
    if (!page.uri) {
      createPage({
        path: `/`,
        component: require.resolve("./src/templates/Page.js"),
        context: { tree: tree, currentPage: page }
      });
    } else {
      createPage({
        path: `/${page.uri}`,
        component: require.resolve("./src/templates/Page.js"),
        context: { tree: tree, currentPage: page }
      });
    }
  }
};

gatsby-browser.js: N/A gatsby-ssr.js: N/A

alqamabinsadiq commented 5 years ago

After doing some research I found out that I have to add these two lines.

import CSSPlugin from 'gsap/CSSPlugin';

const C = CSSPlugin;