1

Due to some limitations of using jQuery libraries, I need to import bootstrap 4 vanilla style into a couple of React projects. But I would like to create a single package that holds all the assets (such as importing BS4) and having the other React projects importing from this.

assets/package.json

"dependencies": {
 "bootstrap": "^4.5.3"
}

index.js

import "bootstrap/dist/js/bootstrap.bundle"; //Does Work; Syntax is called importing with side effects, I believe
//import "bootstrap/dist/css/bootstrap.min.css"; //Unneeded, thanks to j1mbl3s pointing out we don't usually export CSS. I'm importing the CSS directly from the node_modules instead of the bundle

export * from "bootstrap/dist/js/bootstrap.bundle"; //Does NOT work
//export * from "bootstrap/dist/css/bootstrap.min.css"; //Unneeded, thanks to j1mbl3s pointing out we don't usually export CSS. I'm importing the CSS directly from the node_modules instead of the bundle

myReactApp1/package.json

"dependencies": {
"@bit/X.Y.Z.assets": "file./components/assets"
}

myReactApp1/App.js

import "@bit/X.Y.Z.assets" //Does NOT work
//import "bootstrap/dist/js/bootstrap.bundle"; //Does work; so essentially I want to replicate their export into my assets so that the version control is one central place

myReactApp1/App.scss

import "~@bit/X.Y.Z.assets/node_modules/bootstrap/scss/bootstrap" //Does work

How do I export a vanilla JS file in React, so that I can import it again?

What I'm trying to achieve is the following diagram, and respectively a non-compiling sandbox.

myPoorManMSPaintVisualDiagram

WCGPR2
  • 55
  • 5
  • 1
    Have you tried this without exporting the CSS file? With JS bundlers, you wouldn't typically export a CSS file but instead import it in your JS code for the bundler to build a separate CSS bundle from the JS bundle. JS/Node wouldn't know how to handle the CSS since it's an entirely different language (*cough* syntax). – j1mbl3s Jun 03 '21 at 02:33
  • What do you mean when you say "does not work"? What are the actual results? – j1mbl3s Jun 03 '21 at 02:47
  • I'm checking if [Bootstrap is loaded](https://stackoverflow.com/questions/13933000/how-to-check-if-twitter-bootstrap-is-loaded) And it doesn't load when I do it through importing it via assets. But it loads when I directly import from the bootstrap/dist/js/bootstrap.bundle, that is commented out – WCGPR2 Jun 03 '21 at 02:50
  • If you're not trying to import Bootstrap as a module (i.e. `import * from 'bootstrap/...'`) but instead as jQuery plugins, and the import with side-effects is working, then why not just use the side-effect method? And when you try to export the Bootstrap exports (`export * from 'bootstrap/...'`), do you get references to its exports (`Alert`, `Button`, `Carousel`, etc: [bootstrap.bundle.js](https://github.com/twbs/bootstrap/blob/7d9adb702d96f9eb4706afb12cd73c9654979575/dist/js/bootstrap.bundle.js#L6709)) in your other App.js code with `import * from '@bit/...'`? – j1mbl3s Jun 03 '21 at 03:16
  • The importing as a side-effects works but it does not work when exported. What I would like to do is import it as a side-effect (assets), export it as a side-effect _as is_ (assets), then import it again as a side effect (myReactApp1) – WCGPR2 Jun 03 '21 at 04:08
  • I realize now, this might actually more of an npm module question, but I created a sandbox as an example of what I have: https://codesandbox.io/s/mybootstrapexportexample-jgc38 (it does not fully compile as I don't think the sandbox allow local modules, possibly) – WCGPR2 Jun 03 '21 at 04:10
  • 1
    It works fine. assets/index.js: `export * from 'bootstrap/dist/js/bootstrap.bundle';` and src/App.js: `import $ from 'jquery'; import * as Bootstrap from '../assets'; console.log(Bootstrap); console.log(typeof $().emulateTransitionEnd === 'function');` outputs `{Alert: f Alert(), ...}`, `true`. Granted I'm not using a separate package.json for assets (after all, at a usage level it only says the dependencies needed and the code entrypoint), but the idea is the same. It also works with `import '../assets';` in src/App.js, although then the local Bootstrap reference is not defined. – j1mbl3s Jun 03 '21 at 05:39
  • This makes a lot of sense, I see what you mean by the references from the exports now. I was able to replicate your example above and get the same output. It seems only when assets has its own separate package.json, I get the output `{alert: f Alert(), ...}, false`. My best guess for this is because jQuery is a peer dependency of Bootstrap, so it installs its own jQuery. Furthermore, when we import assets, the [UMD pattern](https://stackoverflow.com/questions/60365052/why-is-functionglobal-factory-used-in-so-many-js-libraries) in BS4 does not seem to set the global/this context to window – WCGPR2 Jun 03 '21 at 08:58
  • Update: I misspoke... I think the UMD pattern does properly set the global/this context to window in both cases. I have no idea why breaking it out into a separate module with it's own package.json would make it behave differently.. – WCGPR2 Jun 03 '21 at 18:27

0 Answers0