How to add react-bootstrap to ASP.NET project

Question

So, I'm new to ASP.NET MVC.

I have a web application in ASP.NET MVC and I'm trying to add react-bootstrap to it. It's already using React/ReactDOM.

I did

         npm install --save react-bootstrap

and react-bootstrap is in the node_modules folder in the project.

I added react-bootstrap to the dependencies in the Package.json file.

         "dependencies": {
           ......
           "react-bootstrap": "^0.30.0"
         },

I added react-bootstrap to the externals in the webpack.config.js file.

        externals:
        {
         'react-bootstrap':
           {
            "var": 'ReactBootstrap',
            web: 'ReactBootstrap',
            root: 'ReactBootStrap',
            commonjs2: 'ReactBootstrap',
            commonjs: 'ReactBootstrap',
            amd: 'ReactBoostrap'
           },
        .....
        }

In the Layout.cshtml, I did added a script tag with the src attribute specifying the location of the reactbootstrap.js file in node_modules folder.

        <script src="@Url.Content("~/node_modules/react-bootstrap/dist/react-bootstrap.min.js")"></script>

But when I do

       import * as ReactBootStrap from 'react-bootstrap';

in the Dashboard.tsx file, it says it can't find the module.

What's missing?

Johan O · Accepted Answer · 2017-04-27 21:49:20Z

1

Try this: npm i @types/react-bootstrap --save

answered Apr 27, 2017 at 21:49

Johan O

4544 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Algorithmic Programmer Over a year ago

the output on the command line was @types/[email protected] node_modules\@types\react-bootstrap

Algorithmic Programmer Over a year ago

@typesreact/[email protected]

Algorithmic Programmer · Accepted Answer · 2017-04-29 21:05:45Z

0

So, I figured this out. To add another package, TypeScript requires the addition of a declaration file. These typically carry extension of .d.ts, and define prototypes of functions, classes, interfaces, etc. within the package you are adding. In the past, these needed to be created manually, but lately npm-based packages can be handled by new Typescript. There is also a repository of commonly-used Typescript declaration files (NuGet and DefinitelyTyped)

In the package manager console in Visual Studio, you do

Install-Package react-bootstrap.TypeScript.DefinitelyTyped

answered Apr 29, 2017 at 21:05

Algorithmic Programmer

7661 gold badge15 silver badges31 bronze badges

Collectives™ on Stack Overflow

How to add react-bootstrap to ASP.NET project

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related