Что вызывает «TypeError: Object(...) is not a function» при попытке использовать Vanilla Tilt с React?

Я пытаюсь использовать Vanilla Tilt в своем приложении React со следующим примером: https://codesandbox.io/s/vanilla-tilt-with-react-n5ptm

Мой код выглядит так:

import React, { Component, useEffect, useRef } from "react";
import ReactDOM from 'react-dom';
import Heading from "../../_styled/Heading";
import Paragraph from "../../_styled/Paragraph";
import { Content } from "../../_styled/Content";
import MouseScroll from "../../_static/MouseScroll";
import PlaceHolder from "../../_static/PlaceHolder";
import VanillaTilt from 'vanilla-tilt';

function Tilt(props) {
  const { options, ...rest } = props;
  const tilt = useRef(null);

  useEffect(() => {
    VanillaTilt.init(tilt.current, options);
  }, [options]);

  return <div ref = {tilt} {...rest} />;
}

const options = {
    scale: 1.2,
    speed: 1000,
    max: 30
  };


export default class CaseStudies extends Component {
  render() {
    const { showMouseIcon } = this.props;

    return (
      <Content>
        <PlaceHolder sideMenuOpen = {this.props.sideMenuOpen}/>
        <div className = "container casestudiesheight">
          <div className = "row casestudiesheight">
            <div className = "case-studies-container">
              <Heading className = "careers_ku">Case Studies</Heading>
              <div className = "case-card-container">
                <Tilt className = "case-card">Lorem ipsum
                  </Tilt>
                <div className = "case-card">a</div>
                <div className = "case-card"></div>
              </div>
            </div>
            {showMouseIcon && <MouseScroll />}
          </div>
        </div>
      </Content>
    );
  }
}

Номера версий:

    {
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^3.9.4",
    "@material-ui/icons": "^3.0.1",
    "axios": "^0.18.1",
    "classnames": "^2.2.6",
    "emotion": "^9.1.3",
    "jquery": "^3.5.1",
    "moment": "^2.22.2",
    "normalize.css": "^8.0.0",
    "react": "^17.0.1",
    "react-cookie-consent": "^2.2.2",
    "react-custom-scrollbars": "^4.2.1",
    "react-date-picker": "^7.0.0",
    "react-datepicker": "^1.7.0",
    "react-dom": "^17.0.1",
    "react-fullpage": "^0.1.19",
    "react-ga": "^2.5.7",
    "react-helmet": "^6.1.0",
    "react-icons": "^3.5.0",
    "react-meta-tags": "^0.7.4",
    "react-picky": "^4.0.1",
    "react-player": "^1.6.6",
    "react-protected-mailto": "^1.0.3",
    "react-responsive": "^6.0.0",
    "react-responsive-carousel": "^3.1.43",
    "react-scripts": "1.1.4",
    "react-select": "^2.1.1",
    "react-select-checked": "^0.1.10",
    "react-sidebar": "^3.0.2",
    "react-slideshow-image": "^1.0.8",
    "react-toastify": "^4.5.2",
    "react-vanilla-tilt": "^1.0.0",
    "vanilla-tilt": "^1.7.0"
  },

Сообщение об ошибке:

TypeError: Object(...) is not a function
Tilt
C:/01_Projects/src/components/_pages/CaseStudies/CaseStudies.js:15
  12 | 
  13 | function Tilt(props) {
  14 |   const { options, ...rest } = props;
> 15 |   const tilt = useRef(null);
  16 | 
  17 |   useEffect(() => {
  18 |     VanillaTilt.init(tilt.current, options);
View compiled
▶ 18 stack frames were collapsed.
./src/index.js
C:/01_Projects/src/index.js:48
  45 | const target = document.querySelector("#root");
  46 | 
  47 | 
> 48 | render(
  49 |   <Router>
  50 |     <React.Fragment>
  51 |       <Switch>

Я не могу найти решение, позволяющее заставить VanillaTilt работать в моем приложении, и был бы рад, если бы кто-нибудь указал, что я делаю неправильно.

Перейдите в свой package.json, замените «реагировать-дом»: «^ 17.0.1» и «реагировать»: «^ 17.0.1» на «реагировать-дом»: «^ 16.13.1» и «реагировать» : "^ 16.13.1". Затем выполните установку npm в терминале. Подскажите как себя ведет :)

Imran Rafiq Rather 21.12.2020 10:19

Ссылка codeandbox не имеет проблем, не может найти никакой ошибки. Также в 16.8.0 введены хуки, так что проверяйте версии, если вопрос не обновился

Learner 21.12.2020 10:23

Большое спасибо @Imran, изменение номеров версий и запуск npm install исправили ошибки сборки.

Hunor Kerekes 21.12.2020 12:00
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
Раскрытие чувствительных данных
Раскрытие чувствительных данных
Все внешние компоненты, рассмотренные здесь до сих пор, взаимодействуют с клиентской стороной. Однако, если они подвергаются атаке, они не...
Зод: сила проверки и преобразования данных
Зод: сила проверки и преобразования данных
Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Руководство ChatGPT по продаже мини JS-файлов
Руководство ChatGPT по продаже мини JS-файлов
JS-файл - это файл, содержащий код JavaScript. JavaScript - это язык программирования, который в основном используется для добавления интерактивности...
0
3
680
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Хотя React-17 был недавно выпущен. С некоторыми пакетами могут возникнуть некоторые ошибки. Попробуйте перейти на предыдущую стабильную версию React.

Перейдите к своему package.json, замените "react-dom": "^17.0.1" и "react": "^17.0.1" на "react-dom": "^16.13.1" и "react": "^16.13.1".

Затем выполните npm install в терминале, чтобы начать.

Другие вопросы по теме