I'm trying to use the package off https://react-bootstrap.github.io/
It simply says you must npm install the package, and then has some very ambiguous instructions on browser globals:
We provide react-bootstrap.js and react-bootstrap.min.js bundles with all components exported on the window.ReactBootstrap object. These bundles are available on unpkg, as well as in the npm package.
<script src="https://unpkg.com/react/umd/react.production.min.js" crossorigin></script>
<script
src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
crossorigin></script>
<script
src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
crossorigin></script>
<script>var Alert = ReactBootstrap.Alert;</script>
As well as for the CDN they have provided.
How and which Bootstrap styles you include is up to you, but the simplest way is to include the latest styles from the CDN. A little more information about the benefits of using a CDN can be found here.
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
I downloaded the package in the local react directory, where my public, src, package.json, etc are. Once I try using the components off the package, it gives me the following error:
Failed to compile.
Error in ./~/react-bootstrap/cjs/Container.js
Module parse failed: C:\Users\joemo\Documents\Active\JoeOMGWorks\joeomgworks\node_modules\react-bootstrap\cjs\Container.js Unexpected token (29:2)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (29:2)
@ ./src/Components/GlobalHeader.js 17:17-53
You may need an appropriate loader to handle this file type.
The message is above my knowledge. There isn't a clear answer on whether it is a webpack configuration I must do, or if I have to download something extra. Looking at Container.js (29:2) is the following:
23 const Container = /*#__PURE__*/React.forwardRef(({
24 bsPrefix,
25 fluid,
26 // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
27 as: Component = 'div',
28 className,
**29 ...props**
30}, ref) => {
31 const prefix = (0, _ThemeProvider.useBootstrapPrefix)(bsPrefix, 'container');
32 const suffix = typeof fluid === 'string' ? `-${fluid}` : '-fluid';
33 return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
34 ref: ref,
35 ...props,
36 className: (0, _classnames.default)(className, fluid ? `${prefix}${suffix}` : prefix)
37 });
38});
What exactly is the appropriate loader and why is it not included in the npm download or why do I need a loader for this npm package? Unfortunately this is the first step to even be able to use this package. Not a good start with this one.