ScrollMagi c теряет функциональность после сборки Gatsby - PullRequest
0 голосов
/ 13 марта 2020

Проблема : Я пытался реализовать ScrollMagi c через NPM для Гэтсби. Во время разработки (gatsby develop) ScrollMagi c работает, после gatsby build и gatsby serve ScrollMagi c либо показывает ошибку, либо теряет свою функциональность (оба шага описаны ниже).

Чего я хочу добиться? Рабочий ScrollMagi c после сборки Гэтсби.

Буду благодарен за все ваши советы!


1. шаг, который я сделал : когда вы пытаетесь построить проект Gatsby с ScrollMagi c внутри, он покажет вам ошибку:

  36 |  // TODO: temporary workaround for chrome's scroll jitter bug
> 37 |  window.addEventListener("mousewheel", function () {});
     | ^
  38 | 
  39 |  // global const
  40 |  var PIN_SPACER_ATTRIBUTE = "data-scrollmagic-pin-spacer";


  WebpackError: ReferenceError: window is not defined

Очевидно, это происходит потому, что Gatsby использует среду Node для создания сборки с stati c файлы и окно объект недоступен в узле.

Поэтому сборка не завершена и не была успешно создана. Документация Gatsby содержит рекомендации по этому конкретному c "проблема окна не определена" (шаг 2).


2. шаг, который я сделал: Я скопировал код с веб-сайта Gatsby и вставил его в мой gatsby-node.js:

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
    if (stage === "build-html") {
        actions.setWebpackConfig({
            module: {
                rules: [
                    {
                        test: /scrollmagic/,
                        use: loaders.null(),
                    }
                ],
            },
        })
    }
}

Сделав это и написав gatsby build и gatsby serve, Гэтсби успешно создал сеть. Но после того, как я go перешел на подстраницу, где должен быть включен ScrollMagi c, он просто не работает и ScrollMagi c теряет свою функциональность .


мои пакеты GSAP и ScrollMagi c:

"scrollmagic": "^2.0.5",
"gsap": "^3.2.4"

Файл My Gatsby, в котором ScrollMagi c должен делать свои маги c:

import React from "react"
import { graphql, Link } from "gatsby"
import SEO from "../components/SEO"
import Layout from '../layouts/Layout'
import SubpageHeader from '../components/SubpageHeader'
import SubpageItem from '../components/SubpageItem'
import styled from "styled-components"
import { gsap } from "gsap";
import ScrollMagic from 'scrollmagic';

export const query = graphql`
{
    prismic {
        allAbouts {
            edges {
                node {
                short_footer_text
                }
            }
        }
        allProjectssubpages {
            edges {
                node {
                    intro_text_to_projects
                    ordered_projects {
                        link_to_project {
                            ... on PRISMIC_Project {
                                _meta{
                                    uid
                                }
                                project_title
                                project_description
                                photos {
                                    photo
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
`

const MainContainer = styled.div`
    margin: 6rem 15vw 0;
    display: flex;
`

const ItemsContrainer = styled.div`
    width: 45vw;
`

const LinksContainer = styled.div`
    width: 25vw;
`

const LinksInnerContainer = styled.div`
    display: flex;
    flex-direction: column;
`
const LinkTag = styled(Link)`
    text-decoration: none;
    font-size: 16px;
    color: #000;
    margin-bottom: 15px;
    letter-spacing: 2px;
    opacity: 0.5;
`

class projects extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount = () => {
        const projectssubpageData = this.props.data.prismic.allProjectssubpages.edges.slice(0, 1).pop()
        const orderedProjects = projectssubpageData.node.ordered_projects;

        if (typeof window !== 'undefined') {
            let controller = new ScrollMagic.Controller();
            const itemsContainerHeight = document.querySelector('#items-container').clientHeight;
            const linksContainerHeight = document.querySelector('#links-inner-container').clientHeight;
            const height = itemsContainerHeight - linksContainerHeight;

            let scene = new ScrollMagic.Scene({ triggerElement: "#main-container", triggerHook: 0.25, duration: height })
                .setPin("#links-container")
                .addTo(controller);

            orderedProjects.forEach(project => {
                let uidOfProject = project.link_to_project._meta.uid;
                let projectDivHeight = document.querySelector(`.${uidOfProject}`).clientHeight;

                let scene = new ScrollMagic.Scene({ triggerElement: `.${uidOfProject}`, triggerHook: 0.4, duration: projectDivHeight })
                    .setClassToggle(`#${uidOfProject}`, "active")
                    .addTo(controller);
            });
        }
    }

    render() {
        const footerData = this.props.data.prismic.allAbouts.edges.slice(0, 1).pop()
        const projectssubpageData = this.props.data.prismic.allProjectssubpages.edges.slice(0, 1).pop()
        if (!projectssubpageData || !footerData) return null

        return (
            <>
                <SEO title="Projects" />
                <Layout
                    footerShortText={footerData.node.short_footer_text[0].text}
                    footerLinksArray={[
                        {
                            name: 'All Events',
                            URL: '/events'
                        },
                        {
                            name: 'Diary',
                            URL: '/diary'
                        },
                        {
                            name: 'Home',
                            URL: '/'
                        }
                    ]}>
                    {/* Subpage header */}
                    <SubpageHeader headline={"PROJECTS"} introText={projectssubpageData.node.intro_text_to_projects[0].text}></SubpageHeader>

                    <MainContainer id="main-container">
                        {/* Links to the projects */}
                        <LinksContainer id="links-container">
                            <LinksInnerContainer id="links-inner-container">
                                {projectssubpageData.node.ordered_projects.map(project => (
                                    <LinkTag
                                        to={"projects/" + project.link_to_project._meta.uid}
                                        key={project.link_to_project._meta.uid}
                                        id={project.link_to_project._meta.uid}>
                                        {project.link_to_project.project_title[0].text}
                                    </LinkTag>
                                ))}
                            </LinksInnerContainer>
                        </LinksContainer>

                        {/* All projects */}
                        <ItemsContrainer id="items-container">
                            {projectssubpageData.node.ordered_projects.map(project => (
                                <SubpageItem
                                    itemURL={"projects/" + project.link_to_project._meta.uid}
                                    photoURL={project.link_to_project.photos[0].photo.url}
                                    photoAlt={project.link_to_project.photos[0].photo.alt}
                                    title={project.link_to_project.project_title[0].text}
                                    description={project.link_to_project.project_description[0].text}
                                    divClass={project.link_to_project._meta.uid}
                                    key={project.link_to_project._meta.uid}>
                                </SubpageItem>
                            ))}
                        </ItemsContrainer>
                    </MainContainer>
                </Layout>
            </>
        )
    }
}

export default projects

1 Ответ

2 голосов
/ 14 марта 2020

Я сделал один обходной путь, который, кажется, работает, поэтому я публикую его здесь. Вместо реализации scrollmagi c в начале документа, я реализую его позже после вызова componentDidMount и после того, как смогу быть на 100% уверенным, что объект окна существует.

здесь вы go:

componentDidMount = () => {
        if (typeof window !== 'undefined') {
            import('scrollmagic').then((ScrollMagic) => {
                 // your scrollmagic code here
                 let controller = new ScrollMagic.Controller();
                 // ....
            });
        }
    }

Таким образом, ошибка исчезает, и поэтому шаг 2 (шаг 2 из вопроса) не требуется.

...