React-bootstrap installing issue

Hi,
I am working on the “Build a Random Quote Machine” project using React 17.0.1 and ReactDOM 17.0.1

import * as React from "https://cdn.skypack.dev/react@17.0.1";
import * as ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";

i am trying to use the reactBootstrap framework but it is not working

import * as reactBootstrap from "https://cdn.skypack.dev/react-bootstrap@1.5.2";
this is the error on the console

PropTypes.js:2 Uncaught ReferenceError: process is not defined
    at PropTypes.js:2

https://codepen.io/sabri0o/pen/LYbwmZP?editors=0010
Any help would be appreciated, thanks

React (and I assume, in turn, the React Bootstrap library) uses the function process.env from the Node standard library to check whether it’s in a development or a production environment.

It is assumed React applications will always be ran through some Node-based build process, so normally this is not an issue. You are not doing this, so you are going to hit issues.

To work as an ES6 module in browser, any piece of code using a Node API has to be replaced. The code hosted on Skypack has to be a version of the original code that conforms to ES6 module spec, and with those replacements for Node-specific code (or for other external APIs) made.

The versions of React/ReactDOM on Skypack have had this done afaik – it’s still difficult to build anything using them, but they’ll work. So if you are getting this error, I assume the React Bootstrap library has not. If that assumption is correct, then it will be unusable.

FYI, front end development using only ES6 modules for anything non-trivial that uses external dependencies is not currently practical. Almost the entire frontend ecosystem is based on the assumption that your code will be transpiled and bundled into a deployable unit.

Development of non-trivial React apps using only ES6 modules is effectively impossible: as things stand you are on a hiding to nothing attempting it. Preact works better, mainly because hyperscript can be used instead of JSX so there is no transpilation step required, but it’s still extremely difficult to build anything non-trivial if you aren’t writing every dependency yourself.

1 Like

I would suggest you use CodeSandbox instead.

It will work just fine for the challenges and is a better dev experience for React.

2 Likes

Thanks a lot for the explanation

1 Like