React: keep getting 'module not found' when requiring react-lazy-load
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
add a comment |
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
seems like you haven't installed the module. trynpm 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 usingnpm install -S react-lazy-load
oryarn 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
add a comment |
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
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
reactjs lazy-loading
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. trynpm 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 usingnpm install -S react-lazy-load
oryarn 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
add a comment |
seems like you haven't installed the module. trynpm 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 usingnpm install -S react-lazy-load
oryarn 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
add a comment |
1 Answer
1
active
oldest
votes
Import it like
import LazyLoad from 'react-lazy-load';
Or
var LazyLoad = require('react-lazy-load');
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
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/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
});
}
});
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
Required, but never shown
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
Import it like
import LazyLoad from 'react-lazy-load';
Or
var LazyLoad = require('react-lazy-load');
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
add a comment |
Import it like
import LazyLoad from 'react-lazy-load';
Or
var LazyLoad = require('react-lazy-load');
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
add a comment |
Import it like
import LazyLoad from 'react-lazy-load';
Or
var LazyLoad = require('react-lazy-load');
Import it like
import LazyLoad from 'react-lazy-load';
Or
var LazyLoad = require('react-lazy-load');
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
add a comment |
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
add a comment |
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.
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
Required, but never shown
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
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
Required, but never shown
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
Required, but never shown
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
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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
oryarn 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