React: keep getting 'module not found' when requiring react-lazy-load












0















I am trying to use React Lazy Load (https://github.com/loktar00/react-lazy-load) . I am requiring it with:
var LazyLoad = require('react-lazy-load').default; I'm using default based off of this: https://github.com/loktar00/react-lazy-load/issues/86 . Also, it doesn't work at all without .default at the end.

But I'm still getting newBundle.js:1 Uncaught Error: Cannot find module 'react-lazy-load' with just requiring it. Any ideas why?



EDIT: Forgot to mention I've already installed it with npm install --save react-lazy-load at the very beginning and it's showing in my package.json so I know it's there.



EDIT: Below are my packages already installed in package.json (NOT using webpack, using browserify)



  "devDependencies": {
"colors": "1.1.2",
"dotenv": "4.0.0",
"eslint": "3.4.0",
"eslint-plugin-import": "1.14.0",
"eslint-plugin-react": "6.1.2",
"expect": "1.20.2",
"mocha": "3.0.2",
"vinyl-buffer": "1.0.0",
"vinyl-source-stream": "1.1.0",
"yargs": "5.0.0"
},
"dependencies": {
"analytics-node": "3.2.0",
"autoprefixer": "7.2.3",
"babel-cli": "6.26.0",
"babel-core": "6.14.0",
"babel-plugin-react-transform": "2.0.2",
"babel-plugin-transform-runtime": "6.12.0",
"babel-preset-es2015": "6.14.0",
"babel-preset-react": "6.11.1",
"babelify": "7.3.0",
"bluebird": "3.5.1",
"body-parser": "1.18.2",
"bootstrap": "git://github.com/tradecoffee/bootstrap.git#v3.3.7-custom",
"braintree-web": "3.26.0",
"browserify": "13.1.0",
"compression": "1.7.2",
"connect-redis": "3.3.2",
"cookie-parser": "1.4.3",
"cors": "2.8.4",
"create-react-class": "15.6.3",
"envify": "4.1.0",
"express": "4.14.0",
"express-http-proxy": "1.0.0",
"express-session": "1.15.6",
"font-awesome": "4.6.3",
"helmet": "3.9.0",
"heroku-ssl-redirect": "0.0.4",
"honeybadger": "1.2.1",
"honeybadger-js": "0.5.5",
"jquery": "1.9.1",
"jsonwebtoken": "8.2.0",
"lodash": "4.17.4",
"newrelic": "3.3.0",
"node-sass": "4.1.1",
"npm-run-all": "3.0.0",
"onchange": "3.3.0",
"passport": "0.2.0",
"passport-http": "0.2.2",
"postcss": "6.0.14",
"react": "15.6.2",
"react-autosuggest": "9.3.2",
"react-bootstrap": "0.32.1",
"react-dom": "15.6.2",
"request": "2.83.0",
"request-promise": "4.2.2",
"rimraf": "2.5.4",
"forge-sha256": "git://github.com/tradecoffee/forge-sha256",
"uglify-js": "3.2.2",
"uglifyify": "4.0.5",
"watchify": "3.11.0",
"wolfy87-eventemitter": "5.2.4"
}









share|improve this question

























  • seems like you haven't installed the module. try npm install react-lazy-load?

    – Aseem Upadhyay
    Nov 26 '18 at 7:13











  • From the error it seems you haven't installed the npm module. Install it using npm install -S react-lazy-load or yarn add react-lazy-load

    – Shubham Khatri
    Nov 26 '18 at 7:13













  • @AseemUpadhyay apologies, yes I've done this step already and it appears in my package.json: "react-lazy-load": "^3.0.13",

    – John Nada
    Nov 26 '18 at 7:14











  • Can you show us your package.json to see the packages you have installed (this is always useful for these kind of questions)? are you using webpack? if you are, could you show us how you load your modules with you webpack.config?

    – c-chavez
    Nov 26 '18 at 8:00











  • @c-chavez editing my question now to show my packages √

    – John Nada
    Nov 26 '18 at 15:58
















0















I am trying to use React Lazy Load (https://github.com/loktar00/react-lazy-load) . I am requiring it with:
var LazyLoad = require('react-lazy-load').default; I'm using default based off of this: https://github.com/loktar00/react-lazy-load/issues/86 . Also, it doesn't work at all without .default at the end.

But I'm still getting newBundle.js:1 Uncaught Error: Cannot find module 'react-lazy-load' with just requiring it. Any ideas why?



EDIT: Forgot to mention I've already installed it with npm install --save react-lazy-load at the very beginning and it's showing in my package.json so I know it's there.



EDIT: Below are my packages already installed in package.json (NOT using webpack, using browserify)



  "devDependencies": {
"colors": "1.1.2",
"dotenv": "4.0.0",
"eslint": "3.4.0",
"eslint-plugin-import": "1.14.0",
"eslint-plugin-react": "6.1.2",
"expect": "1.20.2",
"mocha": "3.0.2",
"vinyl-buffer": "1.0.0",
"vinyl-source-stream": "1.1.0",
"yargs": "5.0.0"
},
"dependencies": {
"analytics-node": "3.2.0",
"autoprefixer": "7.2.3",
"babel-cli": "6.26.0",
"babel-core": "6.14.0",
"babel-plugin-react-transform": "2.0.2",
"babel-plugin-transform-runtime": "6.12.0",
"babel-preset-es2015": "6.14.0",
"babel-preset-react": "6.11.1",
"babelify": "7.3.0",
"bluebird": "3.5.1",
"body-parser": "1.18.2",
"bootstrap": "git://github.com/tradecoffee/bootstrap.git#v3.3.7-custom",
"braintree-web": "3.26.0",
"browserify": "13.1.0",
"compression": "1.7.2",
"connect-redis": "3.3.2",
"cookie-parser": "1.4.3",
"cors": "2.8.4",
"create-react-class": "15.6.3",
"envify": "4.1.0",
"express": "4.14.0",
"express-http-proxy": "1.0.0",
"express-session": "1.15.6",
"font-awesome": "4.6.3",
"helmet": "3.9.0",
"heroku-ssl-redirect": "0.0.4",
"honeybadger": "1.2.1",
"honeybadger-js": "0.5.5",
"jquery": "1.9.1",
"jsonwebtoken": "8.2.0",
"lodash": "4.17.4",
"newrelic": "3.3.0",
"node-sass": "4.1.1",
"npm-run-all": "3.0.0",
"onchange": "3.3.0",
"passport": "0.2.0",
"passport-http": "0.2.2",
"postcss": "6.0.14",
"react": "15.6.2",
"react-autosuggest": "9.3.2",
"react-bootstrap": "0.32.1",
"react-dom": "15.6.2",
"request": "2.83.0",
"request-promise": "4.2.2",
"rimraf": "2.5.4",
"forge-sha256": "git://github.com/tradecoffee/forge-sha256",
"uglify-js": "3.2.2",
"uglifyify": "4.0.5",
"watchify": "3.11.0",
"wolfy87-eventemitter": "5.2.4"
}









share|improve this question

























  • seems like you haven't installed the module. try npm install react-lazy-load?

    – Aseem Upadhyay
    Nov 26 '18 at 7:13











  • From the error it seems you haven't installed the npm module. Install it using npm install -S react-lazy-load or yarn add react-lazy-load

    – Shubham Khatri
    Nov 26 '18 at 7:13













  • @AseemUpadhyay apologies, yes I've done this step already and it appears in my package.json: "react-lazy-load": "^3.0.13",

    – John Nada
    Nov 26 '18 at 7:14











  • Can you show us your package.json to see the packages you have installed (this is always useful for these kind of questions)? are you using webpack? if you are, could you show us how you load your modules with you webpack.config?

    – c-chavez
    Nov 26 '18 at 8:00











  • @c-chavez editing my question now to show my packages √

    – John Nada
    Nov 26 '18 at 15:58














0












0








0








I am trying to use React Lazy Load (https://github.com/loktar00/react-lazy-load) . I am requiring it with:
var LazyLoad = require('react-lazy-load').default; I'm using default based off of this: https://github.com/loktar00/react-lazy-load/issues/86 . Also, it doesn't work at all without .default at the end.

But I'm still getting newBundle.js:1 Uncaught Error: Cannot find module 'react-lazy-load' with just requiring it. Any ideas why?



EDIT: Forgot to mention I've already installed it with npm install --save react-lazy-load at the very beginning and it's showing in my package.json so I know it's there.



EDIT: Below are my packages already installed in package.json (NOT using webpack, using browserify)



  "devDependencies": {
"colors": "1.1.2",
"dotenv": "4.0.0",
"eslint": "3.4.0",
"eslint-plugin-import": "1.14.0",
"eslint-plugin-react": "6.1.2",
"expect": "1.20.2",
"mocha": "3.0.2",
"vinyl-buffer": "1.0.0",
"vinyl-source-stream": "1.1.0",
"yargs": "5.0.0"
},
"dependencies": {
"analytics-node": "3.2.0",
"autoprefixer": "7.2.3",
"babel-cli": "6.26.0",
"babel-core": "6.14.0",
"babel-plugin-react-transform": "2.0.2",
"babel-plugin-transform-runtime": "6.12.0",
"babel-preset-es2015": "6.14.0",
"babel-preset-react": "6.11.1",
"babelify": "7.3.0",
"bluebird": "3.5.1",
"body-parser": "1.18.2",
"bootstrap": "git://github.com/tradecoffee/bootstrap.git#v3.3.7-custom",
"braintree-web": "3.26.0",
"browserify": "13.1.0",
"compression": "1.7.2",
"connect-redis": "3.3.2",
"cookie-parser": "1.4.3",
"cors": "2.8.4",
"create-react-class": "15.6.3",
"envify": "4.1.0",
"express": "4.14.0",
"express-http-proxy": "1.0.0",
"express-session": "1.15.6",
"font-awesome": "4.6.3",
"helmet": "3.9.0",
"heroku-ssl-redirect": "0.0.4",
"honeybadger": "1.2.1",
"honeybadger-js": "0.5.5",
"jquery": "1.9.1",
"jsonwebtoken": "8.2.0",
"lodash": "4.17.4",
"newrelic": "3.3.0",
"node-sass": "4.1.1",
"npm-run-all": "3.0.0",
"onchange": "3.3.0",
"passport": "0.2.0",
"passport-http": "0.2.2",
"postcss": "6.0.14",
"react": "15.6.2",
"react-autosuggest": "9.3.2",
"react-bootstrap": "0.32.1",
"react-dom": "15.6.2",
"request": "2.83.0",
"request-promise": "4.2.2",
"rimraf": "2.5.4",
"forge-sha256": "git://github.com/tradecoffee/forge-sha256",
"uglify-js": "3.2.2",
"uglifyify": "4.0.5",
"watchify": "3.11.0",
"wolfy87-eventemitter": "5.2.4"
}









share|improve this question
















I am trying to use React Lazy Load (https://github.com/loktar00/react-lazy-load) . I am requiring it with:
var LazyLoad = require('react-lazy-load').default; I'm using default based off of this: https://github.com/loktar00/react-lazy-load/issues/86 . Also, it doesn't work at all without .default at the end.

But I'm still getting newBundle.js:1 Uncaught Error: Cannot find module 'react-lazy-load' with just requiring it. Any ideas why?



EDIT: Forgot to mention I've already installed it with npm install --save react-lazy-load at the very beginning and it's showing in my package.json so I know it's there.



EDIT: Below are my packages already installed in package.json (NOT using webpack, using browserify)



  "devDependencies": {
"colors": "1.1.2",
"dotenv": "4.0.0",
"eslint": "3.4.0",
"eslint-plugin-import": "1.14.0",
"eslint-plugin-react": "6.1.2",
"expect": "1.20.2",
"mocha": "3.0.2",
"vinyl-buffer": "1.0.0",
"vinyl-source-stream": "1.1.0",
"yargs": "5.0.0"
},
"dependencies": {
"analytics-node": "3.2.0",
"autoprefixer": "7.2.3",
"babel-cli": "6.26.0",
"babel-core": "6.14.0",
"babel-plugin-react-transform": "2.0.2",
"babel-plugin-transform-runtime": "6.12.0",
"babel-preset-es2015": "6.14.0",
"babel-preset-react": "6.11.1",
"babelify": "7.3.0",
"bluebird": "3.5.1",
"body-parser": "1.18.2",
"bootstrap": "git://github.com/tradecoffee/bootstrap.git#v3.3.7-custom",
"braintree-web": "3.26.0",
"browserify": "13.1.0",
"compression": "1.7.2",
"connect-redis": "3.3.2",
"cookie-parser": "1.4.3",
"cors": "2.8.4",
"create-react-class": "15.6.3",
"envify": "4.1.0",
"express": "4.14.0",
"express-http-proxy": "1.0.0",
"express-session": "1.15.6",
"font-awesome": "4.6.3",
"helmet": "3.9.0",
"heroku-ssl-redirect": "0.0.4",
"honeybadger": "1.2.1",
"honeybadger-js": "0.5.5",
"jquery": "1.9.1",
"jsonwebtoken": "8.2.0",
"lodash": "4.17.4",
"newrelic": "3.3.0",
"node-sass": "4.1.1",
"npm-run-all": "3.0.0",
"onchange": "3.3.0",
"passport": "0.2.0",
"passport-http": "0.2.2",
"postcss": "6.0.14",
"react": "15.6.2",
"react-autosuggest": "9.3.2",
"react-bootstrap": "0.32.1",
"react-dom": "15.6.2",
"request": "2.83.0",
"request-promise": "4.2.2",
"rimraf": "2.5.4",
"forge-sha256": "git://github.com/tradecoffee/forge-sha256",
"uglify-js": "3.2.2",
"uglifyify": "4.0.5",
"watchify": "3.11.0",
"wolfy87-eventemitter": "5.2.4"
}






reactjs lazy-loading






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 26 '18 at 15:59







John Nada

















asked Nov 26 '18 at 7:09









John NadaJohn Nada

527




527













  • seems like you haven't installed the module. try npm install react-lazy-load?

    – Aseem Upadhyay
    Nov 26 '18 at 7:13











  • From the error it seems you haven't installed the npm module. Install it using npm install -S react-lazy-load or yarn add react-lazy-load

    – Shubham Khatri
    Nov 26 '18 at 7:13













  • @AseemUpadhyay apologies, yes I've done this step already and it appears in my package.json: "react-lazy-load": "^3.0.13",

    – John Nada
    Nov 26 '18 at 7:14











  • Can you show us your package.json to see the packages you have installed (this is always useful for these kind of questions)? are you using webpack? if you are, could you show us how you load your modules with you webpack.config?

    – c-chavez
    Nov 26 '18 at 8:00











  • @c-chavez editing my question now to show my packages √

    – John Nada
    Nov 26 '18 at 15:58



















  • seems like you haven't installed the module. try npm install react-lazy-load?

    – Aseem Upadhyay
    Nov 26 '18 at 7:13











  • From the error it seems you haven't installed the npm module. Install it using npm install -S react-lazy-load or yarn add react-lazy-load

    – Shubham Khatri
    Nov 26 '18 at 7:13













  • @AseemUpadhyay apologies, yes I've done this step already and it appears in my package.json: "react-lazy-load": "^3.0.13",

    – John Nada
    Nov 26 '18 at 7:14











  • Can you show us your package.json to see the packages you have installed (this is always useful for these kind of questions)? are you using webpack? if you are, could you show us how you load your modules with you webpack.config?

    – c-chavez
    Nov 26 '18 at 8:00











  • @c-chavez editing my question now to show my packages √

    – John Nada
    Nov 26 '18 at 15:58

















seems like you haven't installed the module. try npm install react-lazy-load?

– Aseem Upadhyay
Nov 26 '18 at 7:13





seems like you haven't installed the module. try npm install react-lazy-load?

– Aseem Upadhyay
Nov 26 '18 at 7:13













From the error it seems you haven't installed the npm module. Install it using npm install -S react-lazy-load or yarn add react-lazy-load

– Shubham Khatri
Nov 26 '18 at 7:13







From the error it seems you haven't installed the npm module. Install it using npm install -S react-lazy-load or yarn add react-lazy-load

– Shubham Khatri
Nov 26 '18 at 7:13















@AseemUpadhyay apologies, yes I've done this step already and it appears in my package.json: "react-lazy-load": "^3.0.13",

– John Nada
Nov 26 '18 at 7:14





@AseemUpadhyay apologies, yes I've done this step already and it appears in my package.json: "react-lazy-load": "^3.0.13",

– John Nada
Nov 26 '18 at 7:14













Can you show us your package.json to see the packages you have installed (this is always useful for these kind of questions)? are you using webpack? if you are, could you show us how you load your modules with you webpack.config?

– c-chavez
Nov 26 '18 at 8:00





Can you show us your package.json to see the packages you have installed (this is always useful for these kind of questions)? are you using webpack? if you are, could you show us how you load your modules with you webpack.config?

– c-chavez
Nov 26 '18 at 8:00













@c-chavez editing my question now to show my packages √

– John Nada
Nov 26 '18 at 15:58





@c-chavez editing my question now to show my packages √

– John Nada
Nov 26 '18 at 15:58












1 Answer
1






active

oldest

votes


















0














Import it like



  import LazyLoad from 'react-lazy-load';


Or



  var LazyLoad = require('react-lazy-load');





share|improve this answer
























  • Can you check, when you import with require it will return a default object instead of function so at the end default is required. require('react-lazy-load').default. First option will work fine.

    – Vaibhav Kumar
    Nov 26 '18 at 7:56











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/3.0/"u003ecc by-sa 3.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


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53476199%2freact-keep-getting-module-not-found-when-requiring-react-lazy-load%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









0














Import it like



  import LazyLoad from 'react-lazy-load';


Or



  var LazyLoad = require('react-lazy-load');





share|improve this answer
























  • Can you check, when you import with require it will return a default object instead of function so at the end default is required. require('react-lazy-load').default. First option will work fine.

    – Vaibhav Kumar
    Nov 26 '18 at 7:56
















0














Import it like



  import LazyLoad from 'react-lazy-load';


Or



  var LazyLoad = require('react-lazy-load');





share|improve this answer
























  • Can you check, when you import with require it will return a default object instead of function so at the end default is required. require('react-lazy-load').default. First option will work fine.

    – Vaibhav Kumar
    Nov 26 '18 at 7:56














0












0








0







Import it like



  import LazyLoad from 'react-lazy-load';


Or



  var LazyLoad = require('react-lazy-load');





share|improve this answer













Import it like



  import LazyLoad from 'react-lazy-load';


Or



  var LazyLoad = require('react-lazy-load');






share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 26 '18 at 7:38









Hemadri DasariHemadri Dasari

8,91731540




8,91731540













  • Can you check, when you import with require it will return a default object instead of function so at the end default is required. require('react-lazy-load').default. First option will work fine.

    – Vaibhav Kumar
    Nov 26 '18 at 7:56



















  • Can you check, when you import with require it will return a default object instead of function so at the end default is required. require('react-lazy-load').default. First option will work fine.

    – Vaibhav Kumar
    Nov 26 '18 at 7:56

















Can you check, when you import with require it will return a default object instead of function so at the end default is required. require('react-lazy-load').default. First option will work fine.

– Vaibhav Kumar
Nov 26 '18 at 7:56





Can you check, when you import with require it will return a default object instead of function so at the end default is required. require('react-lazy-load').default. First option will work fine.

– Vaibhav Kumar
Nov 26 '18 at 7:56


















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53476199%2freact-keep-getting-module-not-found-when-requiring-react-lazy-load%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

A CLEAN and SIMPLE way to add appendices to Table of Contents and bookmarks

Calculate evaluation metrics using cross_val_predict sklearn

Insert data from modal to MySQL (multiple modal on website)