Any component doesn't render after importing react-bootstrap libraryReactJS - Does render get called any time “setState” is called?React “after render” code?Set focus on input after renderCan you force a React component to rerender without calling setState?How to conditionally add attributes to React components?React-Scripts import Bootstrap not workingreactstrap - create-react-app - not found bootstrap/dist/css/bootstrap.css - v.4react-bootstrap collapse and Fade module not foundUse ReactJS in ASP.Net Core without React.ASPNet libraryUncaught TypeError: Cannot read property 'current' of undefined react-dom.production.min.js:134 at Vg
Constitutional limitation of criminalizing behavior in US law?
Why is "breaking the mould" positively connoted?
Should I simplify my writing in a foreign country?
Dangerous workplace travelling
Why didn't this character get a funeral at the end of Avengers: Endgame?
Correct way of drawing empty, half-filled and fully filled circles?
Is “snitty” a popular American English term? What is its origin?
How to deal with employer who keeps me at work after working hours
Which sphere is fastest?
Trigonometry substitution issue with sign
How do LIGO and VIRGO know that a gravitational wave has its origin in a neutron star or a black hole?
SOQL query WHERE filter by specific months
How can Internet speed be 10 times slower without a router than when using the same connection with a router?
Is there a word that describes the unjustified use of a more complex word?
Should homeowners insurance cover the cost of the home?
Is there an age requirement to play in Adventurers League?
How does the reduce() method work in Java 8?
What was the first story to feature the plot "the monsters were human all along"?
Copy previous line to current line from text file
Is an HNN extension of a virtually torsion-free group virtually torsion-free?
Why would a military not separate its forces into different branches?
How do I allocate more memory to an app on Sheepshaver running Mac OS 9?
Is 'contemporary' ambiguous and if so is there a better word?
Notation: What does the tilde below of the expectation mean?
Any component doesn't render after importing react-bootstrap library
ReactJS - Does render get called any time “setState” is called?React “after render” code?Set focus on input after renderCan you force a React component to rerender without calling setState?How to conditionally add attributes to React components?React-Scripts import Bootstrap not workingreactstrap - create-react-app - not found bootstrap/dist/css/bootstrap.css - v.4react-bootstrap collapse and Fade module not foundUse ReactJS in ASP.Net Core without React.ASPNet libraryUncaught TypeError: Cannot read property 'current' of undefined react-dom.production.min.js:134 at Vg
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
After npm init and installation of react, react-dom, bootstrap and react-bootstrap packages, I can't import any component from react-bootstrap library, as import Button from 'react-bootstrap/Button'; produce TypeError: Error resolving module specifier: react-bootstrap/Button.
I get rid of that error by changing the path to import Button from './node_modules/react-bootstrap/Button' - it's correct path, but when I try to render anything it doesn't change the div in target .php file, there's not any error in the console, so I lost. I use Babel babel-cli@6 babel-preset-react-app@3 preprocessor for JSX translation.
Here is preprocessed index.js:
import Button from 'react-bootstrap/Button'
class ProfilePage extends React.Component
render()
return (
<div>
<p>blah blah blah blah blah</p>
</div>
);
ReactDOM.render(<ProfilePage/>, document.getElementById('app'))
and index.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
</head>
<body>
<div id="app">inner html
</div>
<script
src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
crossorigin
/>
<script>var Alert = ReactBootstrap.Alert;</script>
<script type="module" src="./index.js"></script> <!-- processed index.js -->
</body >
Output is: inner html.
Without react-bootstrap import it works perfectly, bootstrap also, but of course I'm not able to use react-bootstrap components. What am I missing?
javascript reactjs npm bootstrap-4 react-bootstrap
asked Mar 23 at 1:29
beeboozebeebooze
1
add a comment |
After npm init and installation of react, react-dom, bootstrap and react-bootstrap packages, I can't import any component from react-bootstrap library, as import Button from 'react-bootstrap/Button'; produce TypeError: Error resolving module specifier: react-bootstrap/Button.
I get rid of that error by changing the path to import Button from './node_modules/react-bootstrap/Button' - it's correct path, but when I try to render anything it doesn't change the div in target .php file, there's not any error in the console, so I lost. I use Babel babel-cli@6 babel-preset-react-app@3 preprocessor for JSX translation.
Here is preprocessed index.js:
import Button from 'react-bootstrap/Button'
class ProfilePage extends React.Component
render()
return (
<div>
<p>blah blah blah blah blah</p>
</div>
);
ReactDOM.render(<ProfilePage/>, document.getElementById('app'))
and index.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
</head>
<body>
<div id="app">inner html
</div>
<script
src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
crossorigin
/>
<script>var Alert = ReactBootstrap.Alert;</script>
<script type="module" src="./index.js"></script> <!-- processed index.js -->
</body >
Output is: inner html.
Without react-bootstrap import it works perfectly, bootstrap also, but of course I'm not able to use react-bootstrap components. What am I missing?
javascript reactjs npm bootstrap-4 react-bootstrap
asked Mar 23 at 1:29
beeboozebeebooze
1
add a comment |
After npm init and installation of react, react-dom, bootstrap and react-bootstrap packages, I can't import any component from react-bootstrap library, as import Button from 'react-bootstrap/Button'; produce TypeError: Error resolving module specifier: react-bootstrap/Button.
I get rid of that error by changing the path to import Button from './node_modules/react-bootstrap/Button' - it's correct path, but when I try to render anything it doesn't change the div in target .php file, there's not any error in the console, so I lost. I use Babel babel-cli@6 babel-preset-react-app@3 preprocessor for JSX translation.
Here is preprocessed index.js:
import Button from 'react-bootstrap/Button'
class ProfilePage extends React.Component
render()
return (
<div>
<p>blah blah blah blah blah</p>
</div>
);
ReactDOM.render(<ProfilePage/>, document.getElementById('app'))
and index.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
</head>
<body>
<div id="app">inner html
</div>
<script
src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
crossorigin
/>
<script>var Alert = ReactBootstrap.Alert;</script>
<script type="module" src="./index.js"></script> <!-- processed index.js -->
</body >
Output is: inner html.
Without react-bootstrap import it works perfectly, bootstrap also, but of course I'm not able to use react-bootstrap components. What am I missing?
javascript reactjs npm bootstrap-4 react-bootstrap
asked Mar 23 at 1:29
beeboozebeebooze
1
After npm init and installation of react, react-dom, bootstrap and react-bootstrap packages, I can't import any component from react-bootstrap library, as import Button from 'react-bootstrap/Button'; produce TypeError: Error resolving module specifier: react-bootstrap/Button.
I get rid of that error by changing the path to import Button from './node_modules/react-bootstrap/Button' - it's correct path, but when I try to render anything it doesn't change the div in target .php file, there's not any error in the console, so I lost. I use Babel babel-cli@6 babel-preset-react-app@3 preprocessor for JSX translation.
Here is preprocessed index.js:
import Button from 'react-bootstrap/Button'
class ProfilePage extends React.Component
render()
return (
<div>
<p>blah blah blah blah blah</p>
</div>
);
ReactDOM.render(<ProfilePage/>, document.getElementById('app'))
and index.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
</head>
<body>
<div id="app">inner html
</div>
<script
src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
crossorigin
/>
<script>var Alert = ReactBootstrap.Alert;</script>
<script type="module" src="./index.js"></script> <!-- processed index.js -->
</body >
Output is: inner html.
Without react-bootstrap import it works perfectly, bootstrap also, but of course I'm not able to use react-bootstrap components. What am I missing?
javascript reactjs npm bootstrap-4 react-bootstrap
javascript reactjs npm bootstrap-4 react-bootstrap
asked Mar 23 at 1:29
beeboozebeebooze
1
asked Mar 23 at 1:29
beeboozebeebooze
1
asked Mar 23 at 1:29
beeboozebeebooze
1
asked Mar 23 at 1:29
beeboozebeebooze
1
asked Mar 23 at 1:29
beeboozebeebooze
1
1
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
I think your import syntax is just off. Instead of
import Button from 'react-bootstrap/Button'
Try
import Button from 'react-bootstrap’
Or
import Button from 'react-bootstrap/Button'
if the above doesn’t work.
answered Mar 23 at 1:51
C. PeckC. Peck
908324
I tried those and numerous possible variations and it's still the same. I have to provide/or./in the front of the path to eliminateTypeError: Error resolving module specifier: react-bootstrap/Button. Maybe it's something with npm configuration? I didn't use it earlier. Just typednpm initnamed project and left rest default, then installed packages I mentioned and think it should work... ?
– beebooze
Mar 23 at 15:41
Oh.. well why don't you just add / in front of your path? It must be specified somewhere the relative path for modules, and there must not be a slash at the end there (I'd recommend adding it there so you never need it again)
– C. Peck
Mar 24 at 1:55
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%2f55309765%2fany-component-doesnt-render-after-importing-react-bootstrap-library%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
I think your import syntax is just off. Instead of
import Button from 'react-bootstrap/Button'
Try
import Button from 'react-bootstrap’
Or
import Button from 'react-bootstrap/Button'
if the above doesn’t work.
answered Mar 23 at 1:51
C. PeckC. Peck
908324
I tried those and numerous possible variations and it's still the same. I have to provide/or./in the front of the path to eliminateTypeError: Error resolving module specifier: react-bootstrap/Button. Maybe it's something with npm configuration? I didn't use it earlier. Just typednpm initnamed project and left rest default, then installed packages I mentioned and think it should work... ?
– beebooze
Mar 23 at 15:41
Oh.. well why don't you just add / in front of your path? It must be specified somewhere the relative path for modules, and there must not be a slash at the end there (I'd recommend adding it there so you never need it again)
– C. Peck
Mar 24 at 1:55
add a comment |
I think your import syntax is just off. Instead of
import Button from 'react-bootstrap/Button'
Try
import Button from 'react-bootstrap’
Or
import Button from 'react-bootstrap/Button'
if the above doesn’t work.
answered Mar 23 at 1:51
C. PeckC. Peck
908324
I tried those and numerous possible variations and it's still the same. I have to provide/or./in the front of the path to eliminateTypeError: Error resolving module specifier: react-bootstrap/Button. Maybe it's something with npm configuration? I didn't use it earlier. Just typednpm initnamed project and left rest default, then installed packages I mentioned and think it should work... ?
– beebooze
Mar 23 at 15:41
Oh.. well why don't you just add / in front of your path? It must be specified somewhere the relative path for modules, and there must not be a slash at the end there (I'd recommend adding it there so you never need it again)
– C. Peck
Mar 24 at 1:55
add a comment |
I think your import syntax is just off. Instead of
import Button from 'react-bootstrap/Button'
Try
import Button from 'react-bootstrap’
Or
import Button from 'react-bootstrap/Button'
if the above doesn’t work.
answered Mar 23 at 1:51
C. PeckC. Peck
908324
I think your import syntax is just off. Instead of
import Button from 'react-bootstrap/Button'
Try
import Button from 'react-bootstrap’
Or
import Button from 'react-bootstrap/Button'
if the above doesn’t work.
answered Mar 23 at 1:51
C. PeckC. Peck
908324
answered Mar 23 at 1:51
C. PeckC. Peck
908324
answered Mar 23 at 1:51
C. PeckC. Peck
908324
answered Mar 23 at 1:51
C. PeckC. Peck
908324
908324
I tried those and numerous possible variations and it's still the same. I have to provide/or./in the front of the path to eliminateTypeError: Error resolving module specifier: react-bootstrap/Button. Maybe it's something with npm configuration? I didn't use it earlier. Just typednpm initnamed project and left rest default, then installed packages I mentioned and think it should work... ?
– beebooze
Mar 23 at 15:41
Oh.. well why don't you just add / in front of your path? It must be specified somewhere the relative path for modules, and there must not be a slash at the end there (I'd recommend adding it there so you never need it again)
– C. Peck
Mar 24 at 1:55
add a comment |
I tried those and numerous possible variations and it's still the same. I have to provide/or./in the front of the path to eliminateTypeError: Error resolving module specifier: react-bootstrap/Button. Maybe it's something with npm configuration? I didn't use it earlier. Just typednpm initnamed project and left rest default, then installed packages I mentioned and think it should work... ?
– beebooze
Mar 23 at 15:41
Oh.. well why don't you just add / in front of your path? It must be specified somewhere the relative path for modules, and there must not be a slash at the end there (I'd recommend adding it there so you never need it again)
– C. Peck
Mar 24 at 1:55
I tried those and numerous possible variations and it's still the same. I have to provide
/ or ./ in the front of the path to eliminate TypeError: Error resolving module specifier: react-bootstrap/Button. Maybe it's something with npm configuration? I didn't use it earlier. Just typed npm init named project and left rest default, then installed packages I mentioned and think it should work... ?– beebooze
Mar 23 at 15:41
I tried those and numerous possible variations and it's still the same. I have to provide
/ or ./ in the front of the path to eliminate TypeError: Error resolving module specifier: react-bootstrap/Button. Maybe it's something with npm configuration? I didn't use it earlier. Just typed npm init named project and left rest default, then installed packages I mentioned and think it should work... ?– beebooze
Mar 23 at 15:41
Oh.. well why don't you just add / in front of your path? It must be specified somewhere the relative path for modules, and there must not be a slash at the end there (I'd recommend adding it there so you never need it again)
– C. Peck
Mar 24 at 1:55
Oh.. well why don't you just add / in front of your path? It must be specified somewhere the relative path for modules, and there must not be a slash at the end there (I'd recommend adding it there so you never need it again)
– C. Peck
Mar 24 at 1:55
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%2f55309765%2fany-component-doesnt-render-after-importing-react-bootstrap-library%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
