Styjun

How do I find the unknown program enabled during Start-Up?

Short story/novella about old-school Biblical angels wrecking the world

Surfacing out of a sunken ship/submarine - Survival Tips

What do you call someone whose unmarried partner has died?

Should a middle class person emulate a very wealthy investor for % of cash hold?

Is current (November 2019) polling about Democrats lead over Trump trustworthy?

count network interfaces in bash

How much money is needed to prove you can support yourself with ESTA

How to avoid answering "what were you sick with"?

Is it a good idea to contact a candidate?

Well-known American figure with Roman numerals

Fivefold division of the whole tone - What does it mean?

Speaking German abroad and feeling condescended to when people speak English back to me

Why is potassium ferrocyanide considered safe for consumption, when it is just one reaction away from the highly toxic potassium cyanide?

Google just EOLed the original Pixel. How long until it's a brick?

A shoe in the safe

Making Sandwiches

I'm being blamed for not responding to an email from a client that was directly addressed to coworker

Do airplanes need brakes in the air?

Why use [FormalN]?

Does the Green-Flame Blade cantrip work if I've cast the Shillelagh cantrip on my staff?

What type of beer is best for beer battered fish?

Decision problems for which it is unknown whether they are decidable

Can you make monkeys human?

React swiper not working: Uncaught TypeError: react_1.useEffect is not a function

React - uncaught TypeError: Cannot read property 'setState' of undefinedTypeError: Cannot read property 'Symbol' of undefined in react-data-grid.ui-plugins.js:18258React-Scripts import Bootstrap not workingReact router renders the root component specified in index.js alwaysReact - Google Map Will Not Loadreactjs giving error module not foundReactApp: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: objecthow to export React component from a typescript fileHow to solve “Element type is invalid” for my React app?React-router <Link> doesn't work with react 16.8 correctly

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty
margin-bottom:0;

0

I have installed react-id-swiper in my web app following this tuts:

https://www.npmjs.com/package/react-id-swiper

Installation:
npm install --save react-id-swiper@latest swiper@latest

And I have created following component:

import React from 'react';
import Swiper from 'react-id-swiper/lib/ReactIdSwiper.full';

const SimpleSwiper = () => (
 <Swiper>
 <div>Slide 1</div>
 <div>Slide 2</div>
 <div>Slide 3</div>
 <div>Slide 4</div>
 <div>Slide 5</div>
 </Swiper>
)

export default SimpleSwiper;

Have imported component in App.js:

import React from 'react';
import Route from 'react-router-dom';

import LandingPage from './templates/LandingPage';
import SimpleSwiper from "./templates/Swiper";

class App extends React.Component

 render()
 return(

 <div>
 <Route path="/" exact component=LandingPage />
 <Route path="/slide" component= () => 
 <SimpleSwiper /> 
 />
 </div>
 )
 



export default App;

When I access it in browser http://localhost:3000/slide
the following error is displayed:

Uncaught TypeError: react_1.useEffect is not a function
 at ReactIdSwiper (ReactIdSwiper.full.js:104)
 at mountIndeterminateComponent (react-dom.development.js:13381)
 at beginWork (react-dom.development.js:13821)
 at performUnitOfWork (react-dom.development.js:15864)
 at workLoop (react-dom.development.js:15903)
 at HTMLUnknownElement.callCallback (react-dom.development.js:100)
 at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
 at invokeGuardedCallback (react-dom.development.js:187)
 at replayUnitOfWork (react-dom.development.js:15311)
 at renderRoot (react-dom.development.js:15963)

I am not sure what I have missed...

reactjs swiper

share|improve this question

edited Mar 28 at 22:34

user9347049

asked Mar 28 at 21:59

user9347049user9347049

1931212 bronze badges

add a comment
 | 

0

I have installed react-id-swiper in my web app following this tuts:

https://www.npmjs.com/package/react-id-swiper

Installation:
npm install --save react-id-swiper@latest swiper@latest

And I have created following component:

import React from 'react';
import Swiper from 'react-id-swiper/lib/ReactIdSwiper.full';

const SimpleSwiper = () => (
 <Swiper>
 <div>Slide 1</div>
 <div>Slide 2</div>
 <div>Slide 3</div>
 <div>Slide 4</div>
 <div>Slide 5</div>
 </Swiper>
)

export default SimpleSwiper;

Have imported component in App.js:

import React from 'react';
import Route from 'react-router-dom';

import LandingPage from './templates/LandingPage';
import SimpleSwiper from "./templates/Swiper";

class App extends React.Component

 render()
 return(

 <div>
 <Route path="/" exact component=LandingPage />
 <Route path="/slide" component= () => 
 <SimpleSwiper /> 
 />
 </div>
 )
 



export default App;

When I access it in browser http://localhost:3000/slide
the following error is displayed:

Uncaught TypeError: react_1.useEffect is not a function
 at ReactIdSwiper (ReactIdSwiper.full.js:104)
 at mountIndeterminateComponent (react-dom.development.js:13381)
 at beginWork (react-dom.development.js:13821)
 at performUnitOfWork (react-dom.development.js:15864)
 at workLoop (react-dom.development.js:15903)
 at HTMLUnknownElement.callCallback (react-dom.development.js:100)
 at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
 at invokeGuardedCallback (react-dom.development.js:187)
 at replayUnitOfWork (react-dom.development.js:15311)
 at renderRoot (react-dom.development.js:15963)

I am not sure what I have missed...

reactjs swiper

share|improve this question

edited Mar 28 at 22:34

user9347049

asked Mar 28 at 21:59

user9347049user9347049

1931212 bronze badges

add a comment
 | 

I have installed react-id-swiper in my web app following this tuts:

https://www.npmjs.com/package/react-id-swiper

Installation:
npm install --save react-id-swiper@latest swiper@latest

And I have created following component:

import React from 'react';
import Swiper from 'react-id-swiper/lib/ReactIdSwiper.full';

const SimpleSwiper = () => (
 <Swiper>
 <div>Slide 1</div>
 <div>Slide 2</div>
 <div>Slide 3</div>
 <div>Slide 4</div>
 <div>Slide 5</div>
 </Swiper>
)

export default SimpleSwiper;

Have imported component in App.js:

import React from 'react';
import Route from 'react-router-dom';

import LandingPage from './templates/LandingPage';
import SimpleSwiper from "./templates/Swiper";

class App extends React.Component

 render()
 return(

 <div>
 <Route path="/" exact component=LandingPage />
 <Route path="/slide" component= () => 
 <SimpleSwiper /> 
 />
 </div>
 )
 



export default App;

When I access it in browser http://localhost:3000/slide
the following error is displayed:

Uncaught TypeError: react_1.useEffect is not a function
 at ReactIdSwiper (ReactIdSwiper.full.js:104)
 at mountIndeterminateComponent (react-dom.development.js:13381)
 at beginWork (react-dom.development.js:13821)
 at performUnitOfWork (react-dom.development.js:15864)
 at workLoop (react-dom.development.js:15903)
 at HTMLUnknownElement.callCallback (react-dom.development.js:100)
 at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
 at invokeGuardedCallback (react-dom.development.js:187)
 at replayUnitOfWork (react-dom.development.js:15311)
 at renderRoot (react-dom.development.js:15963)

I am not sure what I have missed...

reactjs swiper

share|improve this question

edited Mar 28 at 22:34

user9347049

asked Mar 28 at 21:59

user9347049user9347049

1931212 bronze badges

import React from 'react';
import Swiper from 'react-id-swiper/lib/ReactIdSwiper.full';

const SimpleSwiper = () => (
 <Swiper>
 <div>Slide 1</div>
 <div>Slide 2</div>
 <div>Slide 3</div>
 <div>Slide 4</div>
 <div>Slide 5</div>
 </Swiper>
)

export default SimpleSwiper;

import React from 'react';
import Route from 'react-router-dom';

import LandingPage from './templates/LandingPage';
import SimpleSwiper from "./templates/Swiper";

class App extends React.Component

 render()
 return(

 <div>
 <Route path="/" exact component=LandingPage />
 <Route path="/slide" component= () => 
 <SimpleSwiper /> 
 />
 </div>
 )
 



export default App;

Uncaught TypeError: react_1.useEffect is not a function
 at ReactIdSwiper (ReactIdSwiper.full.js:104)
 at mountIndeterminateComponent (react-dom.development.js:13381)
 at beginWork (react-dom.development.js:13821)
 at performUnitOfWork (react-dom.development.js:15864)
 at workLoop (react-dom.development.js:15903)
 at HTMLUnknownElement.callCallback (react-dom.development.js:100)
 at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
 at invokeGuardedCallback (react-dom.development.js:187)
 at replayUnitOfWork (react-dom.development.js:15311)
 at renderRoot (react-dom.development.js:15963)

share|improve this question

edited Mar 28 at 22:34

user9347049

asked Mar 28 at 21:59

user9347049user9347049

1931212 bronze badges

share|improve this question

edited Mar 28 at 22:34

user9347049

asked Mar 28 at 21:59

user9347049user9347049

1931212 bronze badges

asked Mar 28 at 21:59

user9347049user9347049

1931212 bronze badges

asked Mar 28 at 21:59

user9347049user9347049

1931212 bronze badges

2 Answers
2

active

oldest

votes

0

Apparently they are using the useEffect hooks already (awesome!). Maybe you can import it directly?

import React, useEffect from 'react';

share|improve this answer

answered Mar 28 at 22:12

lakerskilllakerskill

40833 silver badges1111 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes, the same thing crossed my mind also but no, it's not working :/ I have found another solution upgrading react-dom. I have explained it in edit. It works fine now :) Error was because I was not able to use hooks.
  
  – user9347049
  Mar 28 at 22:51
  

  
  
  
  

add a comment
 | 

0

EDIT:

I was using 16.3.2 version of React.

Hooks are released as a part of version 16.8.0 and you can use it by upgrading React and React-dom 16.8.0.

I have upgraded it:

npm upgrade react react-dom

Version that was updated to is "react-dom": "^16.8.6" and everything works great now.

So if you want to use react-swiper make sure your React and React-dom is up to date so Hooks can be used.

share|improve this answer

answered Mar 28 at 22:49

user9347049user9347049

1931212 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  AHHH damn, my useEffect didn't work cause it doesn't exist in the version you were using.. Should have asked that first lol! Nice job!
  
  – lakerskill
  Mar 28 at 23:21
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes :D but I had no clue that was issue. Tnx mate!
  
  – user9347049
  Mar 28 at 23:22
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Honestly, your answer probably just saved a ton of people some time. Sooner or later all these people are going to want to try hooks in their old projects and will run into this problem.
  
  – lakerskill
  Mar 28 at 23:28
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks! It took me some time to figure out what is going on. Will be happy if it helps to someone else :)
  
  – user9347049
  Mar 28 at 23:30
  

  
  
  
  

add a comment
 | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55407498%2freact-swiper-not-working-uncaught-typeerror-react-1-useeffect-is-not-a-functio%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

Apparently they are using the useEffect hooks already (awesome!). Maybe you can import it directly?

import React, useEffect from 'react';

share|improve this answer

answered Mar 28 at 22:12

lakerskilllakerskill

40833 silver badges1111 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes, the same thing crossed my mind also but no, it's not working :/ I have found another solution upgrading react-dom. I have explained it in edit. It works fine now :) Error was because I was not able to use hooks.
  
  – user9347049
  Mar 28 at 22:51
  

  
  
  
  

add a comment
 | 

0

Apparently they are using the useEffect hooks already (awesome!). Maybe you can import it directly?

import React, useEffect from 'react';

share|improve this answer

answered Mar 28 at 22:12

lakerskilllakerskill

40833 silver badges1111 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes, the same thing crossed my mind also but no, it's not working :/ I have found another solution upgrading react-dom. I have explained it in edit. It works fine now :) Error was because I was not able to use hooks.
  
  – user9347049
  Mar 28 at 22:51
  

  
  
  
  

add a comment
 | 

Apparently they are using the useEffect hooks already (awesome!). Maybe you can import it directly?

import React, useEffect from 'react';

share|improve this answer

answered Mar 28 at 22:12

lakerskilllakerskill

40833 silver badges1111 bronze badges

import React, useEffect from 'react';

share|improve this answer

answered Mar 28 at 22:12

lakerskilllakerskill

40833 silver badges1111 bronze badges

answered Mar 28 at 22:12

lakerskilllakerskill

40833 silver badges1111 bronze badges

answered Mar 28 at 22:12

lakerskilllakerskill

40833 silver badges1111 bronze badges

0

EDIT:

I was using 16.3.2 version of React.

Hooks are released as a part of version 16.8.0 and you can use it by upgrading React and React-dom 16.8.0.

I have upgraded it:

npm upgrade react react-dom

Version that was updated to is "react-dom": "^16.8.6" and everything works great now.

So if you want to use react-swiper make sure your React and React-dom is up to date so Hooks can be used.

share|improve this answer

answered Mar 28 at 22:49

user9347049user9347049

1931212 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  AHHH damn, my useEffect didn't work cause it doesn't exist in the version you were using.. Should have asked that first lol! Nice job!
  
  – lakerskill
  Mar 28 at 23:21
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes :D but I had no clue that was issue. Tnx mate!
  
  – user9347049
  Mar 28 at 23:22
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Honestly, your answer probably just saved a ton of people some time. Sooner or later all these people are going to want to try hooks in their old projects and will run into this problem.
  
  – lakerskill
  Mar 28 at 23:28
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks! It took me some time to figure out what is going on. Will be happy if it helps to someone else :)
  
  – user9347049
  Mar 28 at 23:30
  

  
  
  
  

add a comment
 | 

0

EDIT:

I was using 16.3.2 version of React.

Hooks are released as a part of version 16.8.0 and you can use it by upgrading React and React-dom 16.8.0.

I have upgraded it:

npm upgrade react react-dom

Version that was updated to is "react-dom": "^16.8.6" and everything works great now.

So if you want to use react-swiper make sure your React and React-dom is up to date so Hooks can be used.

share|improve this answer

answered Mar 28 at 22:49

user9347049user9347049

1931212 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  AHHH damn, my useEffect didn't work cause it doesn't exist in the version you were using.. Should have asked that first lol! Nice job!
  
  – lakerskill
  Mar 28 at 23:21
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes :D but I had no clue that was issue. Tnx mate!
  
  – user9347049
  Mar 28 at 23:22
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Honestly, your answer probably just saved a ton of people some time. Sooner or later all these people are going to want to try hooks in their old projects and will run into this problem.
  
  – lakerskill
  Mar 28 at 23:28
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks! It took me some time to figure out what is going on. Will be happy if it helps to someone else :)
  
  – user9347049
  Mar 28 at 23:30
  

  
  
  
  

add a comment
 | 

EDIT:

I was using 16.3.2 version of React.

Hooks are released as a part of version 16.8.0 and you can use it by upgrading React and React-dom 16.8.0.

I have upgraded it:

npm upgrade react react-dom

Version that was updated to is "react-dom": "^16.8.6" and everything works great now.

So if you want to use react-swiper make sure your React and React-dom is up to date so Hooks can be used.

share|improve this answer

answered Mar 28 at 22:49

user9347049user9347049

1931212 bronze badges

share|improve this answer

answered Mar 28 at 22:49

user9347049user9347049

1931212 bronze badges

answered Mar 28 at 22:49

user9347049user9347049

1931212 bronze badges

answered Mar 28 at 22:49

user9347049user9347049

1931212 bronze badges