CODEWITHSUNDEEP
javascriptreactjsnpmparallax
Jesús
Jesús

Reputation: 467

React cant find a module

I am trying to insttall https://github.com/wagerfield/parallax/, I already read the documentation, and I got a sample of how to use it in javascript, I am going to use it in React, so, with that sample and the documentation for react I think my code should works, but it doesnt!, I think maybe there are 2 motives for not work.

1- In my html inside body tag this tag appears:

<noscript>You need to enable JavaScript to run this app.</noscript>

2- When I hover the module that I install via NPM, vscode show me this:

enter image description here

I am using react hooks, here I found information of how to use it https://github.com/wagerfield/parallax/issues/167 And also here on demo samples https://github.com/wagerfield/parallax/blob/master/examples/pages/simple.html

I have literally hours trying to know whats the problem!

This is my jsx code:

import React, {useEffect, useRef} from 'react';
// @ts-ignore
import Parallax from 'parallax-js';
import BackgroundIMG from '../assets/img/background.jpg';
import Guitar from '../assets/img/guitar.png';
import Layer1 from '../assets/img/layer1.png';
import Layer2 from '../assets/img/layer2.png';
import Layer3 from '../assets/img/layer3.png';
import Layer4 from '../assets/img/layer4.png';
import Layer5 from '../assets/img/layer5.png';
import Layer6 from '../assets/img/layer6.png';
import './styles/Home.css';

const Home = () => {
  const sceneEl = useRef(null);

  useEffect(() => {
    const parallaxInstance = new Parallax(sceneEl.current, {
      relativeInput: true,
    })
    
    parallaxInstance.enable();

    return () => parallaxInstance.disable();

  }, [])

  return (
    <div id="container">
      <div id="scene" ref={sceneEl}>
        <div dataDepth="1.00"><img src={Layer1} /></div>
        <div dataDepth="0.80"><img src={Layer2} /></div>
        <div dataDepth="0.60"><img src={Layer3} /></div>
        <div dataDepth="0.40"><img src={Layer4} /></div>
        <div dataDepth="0.20"><img src={Layer5} /></div>
        <div dataDepth="0.00"><img src={Layer6} /></div>
      </div>
    </div>
  )
}

export default Home;

In my browser I can see this:

enter image description here

But it doesn't hace the "parallax" effect 😥.

Upvotes: 3

Views: 210

Answers (1)

luissmg
luissmg

Reputation: 580

That's because you are using TS and there is no types declaration on the side of the library. I think you can simply fix this doing exactly what the console shows. I you don't have a .d.ts file, just create one and add declare module 'parallax-js'; After this, if you didn't have the file yet, add it to the include property of your tsconfig.json file and you should be fine.

Upvotes: 2

Related Questions