From 063f5f44af7ad8a3bb60b150e8935b54906cd02f Mon Sep 17 00:00:00 2001 From: Caspar MacRae Date: Mon, 14 Mar 2022 19:49:36 +0000 Subject: [PATCH 01/10] Docs: dependencies mgmt for vanilla ESM in browser Doc change for https://github.com/twbs/bootstrap/issues/31944 --- .../docs/5.2/getting-started/javascript.md | 38 ++++++++++++++++++- 1 file changed, 36 insertions(+), 2 deletions(-) diff --git a/site/content/docs/5.2/getting-started/javascript.md b/site/content/docs/5.2/getting-started/javascript.md index fd676cf42344..8768b9a4a8b3 100644 --- a/site/content/docs/5.2/getting-started/javascript.md +++ b/site/content/docs/5.2/getting-started/javascript.md @@ -36,9 +36,43 @@ We provide a version of Bootstrap built as `ESM` (`bootstrap.esm.js` and `bootst ``` {{< callout warning >}} -## Incompatible plugins +## Dependencies for vanilla ESM in the browser requires an `importmap` + +In order to support build tools, NPM dependencies, etc - external dependencies such as PopperJs are `import`ed with their NPM package name (e.g. `@popperjs/core`), to make this work in the browser you need to define an `importmap` which resolves arbitrary names to fully-qualified or relative URIs. + +If your [targeted browsers](https://caniuse.com/?search=importmap) do not support `importmap` then you will need to use the [es-module-shims](https://github.com/guybedford/es-module-shims) library. For example: + +```html + + + + + + + Hello, modularity! + + +

Hello, modularity!

+ + + + + + + +``` -Due to browser limitations, some of our plugins, namely Dropdown, Tooltip and Popover plugins, cannot be used in a ` - - + + + + }}" rel="stylesheet" integrity="{{< param "cdn.css_hash" >}}" crossorigin="anonymous"> + Hello, modularity! + + +

Hello, modularity!

+ + + + + ``` From 859cf9f501450be6184bffbf7c8684cac07bcaf1 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 15 Mar 2022 10:09:01 +0200 Subject: [PATCH 03/10] Update javascript.md --- site/content/docs/5.2/getting-started/javascript.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/content/docs/5.2/getting-started/javascript.md b/site/content/docs/5.2/getting-started/javascript.md index 16af23ce03e7..0bc8be1a75ae 100644 --- a/site/content/docs/5.2/getting-started/javascript.md +++ b/site/content/docs/5.2/getting-started/javascript.md @@ -53,7 +53,7 @@ If your [targeted browsers](https://caniuse.com/?search=importmap) do not suppor

Hello, modularity!

- + From b1adbae6bf4265f2b5c2a4fb903d23cb2adb2e81 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 15 Mar 2022 10:09:33 +0200 Subject: [PATCH 04/10] Update .cspell.json --- .cspell.json | 1 + 1 file changed, 1 insertion(+) diff --git a/.cspell.json b/.cspell.json index efd3eb714ed2..11516df2dc9a 100644 --- a/.cspell.json +++ b/.cspell.json @@ -50,6 +50,7 @@ "Hoverable", "hreflang", "hstack", + "importmap", "jsdelivr", "Jumpstart", "keyframes", From 9c741f9e5e4c310086275b568c5156659f9c046b Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 15 Mar 2022 10:13:27 +0200 Subject: [PATCH 05/10] Update javascript.md --- site/content/docs/5.2/getting-started/javascript.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/content/docs/5.2/getting-started/javascript.md b/site/content/docs/5.2/getting-started/javascript.md index 0bc8be1a75ae..2410df0c8feb 100644 --- a/site/content/docs/5.2/getting-started/javascript.md +++ b/site/content/docs/5.2/getting-started/javascript.md @@ -60,12 +60,12 @@ If your [targeted browsers](https://caniuse.com/?search=importmap) do not suppor { "imports": { "@popperjs/core": "{{< param "cdn.popper" >}}", - "@twbs/bootstrap": "https://cdn.jsdelivr.net/npm/bootstrap@{{< param "current_version" >}}/dist/js/bootstrap.esm.min.js" + "bootstrap": "https://cdn.jsdelivr.net/npm/bootstrap@{{< param "current_version" >}}/dist/js/bootstrap.esm.min.js" } } From 722a25f0e33c3809efa63da0b5c8a929c6e17760 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 15 Mar 2022 10:21:42 +0200 Subject: [PATCH 06/10] Update javascript.md --- site/content/docs/5.2/getting-started/javascript.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/content/docs/5.2/getting-started/javascript.md b/site/content/docs/5.2/getting-started/javascript.md index 2410df0c8feb..faf88e1a41b3 100644 --- a/site/content/docs/5.2/getting-started/javascript.md +++ b/site/content/docs/5.2/getting-started/javascript.md @@ -36,7 +36,7 @@ We provide a version of Bootstrap built as `ESM` (`bootstrap.esm.js` and `bootst ``` {{< callout warning >}} -## Dependencies for vanilla ESM in the browser requires an `importmap` +## Dependencies for vanilla ESM in the browser require an `importmap` In order to support build tools, npm dependencies - external dependencies such as Popper are `import`ed with their npm package name (e.g. `@popperjs/core`), to make this work in the browser you need to define an `importmap` which resolves arbitrary names to fully-qualified or relative URIs. @@ -55,7 +55,7 @@ If your [targeted browsers](https://caniuse.com/?search=importmap) do not suppor

Hello, modularity!

- + ``` -{{< callout warning >}} -## Dependencies for vanilla ESM in the browser require an `importmap` +Compared to JS bundlers, using ESM in the browser requires you to use the full path and filename instead of the module name. That's why we use `'bootstrap.esm.min.js'` instead of `'bootstrap'` above. This is further complicated by our Popper dependency, which imports Popper like so: + +```js +import * as Popper from "@popperjs/core" +``` + +If you try this as-is, you'll see an error in the console like the following: -In order to support build tools, npm dependencies - external dependencies such as Popper are `import`ed with their npm package name (e.g. `@popperjs/core`), to make this work in the browser you need to define an `importmap` which resolves arbitrary names to fully-qualified or relative URIs. +```text +Uncaught TypeError: Failed to resolve module specifier "@popperjs/core". Relative references must start with either "/", "./", or "../". +``` -If your [targeted browsers](https://caniuse.com/?search=importmap) do not support `importmap` then you will need to use the [es-module-shims](https://github.com/guybedford/es-module-shims) library. For example: +To fix this, you can use an `importmap` to resolve the arbitrary module names to complete paths. If your [targeted browsers](https://caniuse.com/?search=importmap) do not support `importmap`, you'll need to use the [es-module-shims](https://github.com/guybedford/es-module-shims) project. Here's how it works for Bootstrap and Popper: ```html @@ -53,7 +64,7 @@ If your [targeted browsers](https://caniuse.com/?search=importmap) do not suppor

Hello, modularity!

- + - ``` -Compared to JS bundlers, using ESM in the browser requires you to use the full path and filename instead of the module name. That's why we use `'bootstrap.esm.min.js'` instead of `'bootstrap'` above. This is further complicated by our Popper dependency, which imports Popper like so: +Compared to JS bundlers, using ESM in the browser requires you to use the full path and filename instead of the module name. [Read more about JS modules in the browser.](https://v8.dev/features/modules#specifiers) That's why we use `'bootstrap.esm.min.js'` instead of `'bootstrap'` above. This is further complicated by our Popper dependency, which imports Popper like so: ```js import * as Popper from "@popperjs/core" From 8593b4752700df0da88c347f8b3aafb1b721b2c5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 20 May 2022 13:41:04 -0700 Subject: [PATCH 09/10] edit --- site/content/docs/5.2/getting-started/javascript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/5.2/getting-started/javascript.md b/site/content/docs/5.2/getting-started/javascript.md index 2e5849f4fd9a..650cb333efc4 100644 --- a/site/content/docs/5.2/getting-started/javascript.md +++ b/site/content/docs/5.2/getting-started/javascript.md @@ -39,7 +39,7 @@ We provide a version of Bootstrap built as `ESM` (`bootstrap.esm.js` and `bootst ``` -Compared to JS bundlers, using ESM in the browser requires you to use the full path and filename instead of the module name. [Read more about JS modules in the browser.](https://v8.dev/features/modules#specifiers) That's why we use `'bootstrap.esm.min.js'` instead of `'bootstrap'` above. This is further complicated by our Popper dependency, which imports Popper like so: +Compared to JS bundlers, using ESM in the browser requires you to use the full path and filename instead of the module name. [Read more about JS modules in the browser.](https://v8.dev/features/modules#specifiers) That's why we use `'bootstrap.esm.min.js'` instead of `'bootstrap'` above. However, this is further complicated by our Popper dependency, which imports Popper into our JavaScript like so: ```js import * as Popper from "@popperjs/core" From 1fe6fd3b45a94b1508a40c3dfaab57ab1cff281f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 20 May 2022 13:41:56 -0700 Subject: [PATCH 10/10] eslint-skip --- site/content/docs/5.2/getting-started/javascript.md | 1 + 1 file changed, 1 insertion(+) diff --git a/site/content/docs/5.2/getting-started/javascript.md b/site/content/docs/5.2/getting-started/javascript.md index 650cb333efc4..0b79ef8912b1 100644 --- a/site/content/docs/5.2/getting-started/javascript.md +++ b/site/content/docs/5.2/getting-started/javascript.md @@ -41,6 +41,7 @@ We provide a version of Bootstrap built as `ESM` (`bootstrap.esm.js` and `bootst Compared to JS bundlers, using ESM in the browser requires you to use the full path and filename instead of the module name. [Read more about JS modules in the browser.](https://v8.dev/features/modules#specifiers) That's why we use `'bootstrap.esm.min.js'` instead of `'bootstrap'` above. However, this is further complicated by our Popper dependency, which imports Popper into our JavaScript like so: + ```js import * as Popper from "@popperjs/core" ```