Comments (4)
@khamiltonuk Thanks for filing this issue! It ended-up being brought-up over on focus-trap/focus-trap#173 and we had a discussion there.
Bringing that over to here now:
Webpack can be configured to work around this. The issue is you're wanting to use ESM as a modern module system, but still expecting to have old browser-compatible code inside those modules, and not wanting to transpile any third-party modules. Is that correct (just trying to understand the needs)?
It feels strange to have diverging targets in the same bundle: ES modules (which is technically ES6) and ES5 JS. But I admit I see the same issue in my bundles that reference focus-trap
if I set my Babel target to ie: "11"
(I end-up with the same issue with the arrow function @khamiltonuk pointed out earlier).
Looks like this is a problem for a lot of libraries, and Webpack is keeping its position on prioritizing module
over main
for 3 years now: webpack/webpack#5756 (still open)
A lot of packages seem to have solved this by adding a browser
entry to their package.json
(because Webpack's default order is mainFields: ['browser', 'module', 'main']
), which is something we could do with focus-trap
and tabbable
.
Apparently, this is the browser field spec, but it doesn't really get into specifics about the nature of the referenced files.
Still, given its name "browser", it feels like it should point to the UMD build.
Thoughts?
👉 I just tried this locally with tabbable's package.json having "browser: dist/index.umd.js" (with Webpack) and the resulting bundle that includes tabbable look nice. Webpack took the right UMD "path" for CJS and plopped the result right into the bundle:
}, function(module, exports, __webpack_require__) {
!function(exports) {
"use strict";
var candidateSelectors = [ "input", "select", "textarea", "a[href]", "button", "[tabindex]", "audio[controls]", "video[controls]", '[contenteditable]:not([contenteditable="false"])', "details>summary" ], candidateSelector = candidateSelectors.join(","), matches = "undefined" == typeof Element ? function() {} : Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
function tabbable(el, options) {
var regularTabbables = [], orderedTabbables = [];
return getCandidates(el, (options = options || {}).includeContainer, isNodeMatchingSelectorTabbable).forEach((function(candidate, i) {
var candidateTabindex = getTabindex(candidate);
0 === candidateTabindex ? regularTabbables.push(candidate) : orderedTabbables.push({
documentOrder: i,
tabIndex: candidateTabindex,
node: candidate
});
})), orderedTabbables.sort(sortOrderedTabbables).map((function(a) { // <- NO ARROW!
return a.node;
})).concat(regularTabbables);
}
...
exports.focusable = focusable, exports.isFocusable = isFocusable, exports.isTabbable = isTabbable,
exports.tabbable = tabbable, Object.defineProperty(exports, "__esModule", {
value: !0
});
}(exports);
Based on this, I believe the correct solution here is not to transpile ESM into ES5 while still keeping import/export statements that are part of the language syntax of ES6 (diverging targets for the same build), but rather to simply add the browser: ./dist/index.umd.js
entry to package.json.
from tabbable.
@all-contributors add @khamiltonuk for bug
from tabbable.
I've put up a pull request to add @khamiltonuk! 🎉
from tabbable.
OK, folks, this is hopefully finally fixed in [email protected]
. Please LMK if there's still an issue, and my apologies for the hiccup!
from tabbable.
Related Issues (20)
- element.matches not working in ie 11. HOT 5
- Scroll containers HOT 3
- isTabbableRadio doesn't properly escape query selectors HOT 4
- Use @testing-library/dom and Jest for tests HOT 3
- Add code coverage badge to the README HOT 5
- Restore actual browser testing with Cypress HOT 8
- support inert attribute HOT 13
- Exclude form elements in `:disabled` fieldset HOT 2
- Optimizing displayCheck: 'full' HOT 9
- Bug: isDisabledFromFieldset doesn't check the top-most disabled <fieldset> HOT 3
- Safari: Object passed in getCheckedRadio is not iterable, causing a for loop error HOT 2
- v5.3.0 breaks literally all of our usage of `tabbable` 😅 when called on a node not attached to the document HOT 40
- [MAJOR] isHidden should exclude detached nodes by default
- Firefox throws an error when checking disabled on non button element HOT 4
- IE support broken in v5.3.2+ HOT 1
- tabbable breaks when processing an element with a "scope" attribute HOT 6
- jest error Your focus-trap must have at least one container with at least one tabbable node in it at all times HOT 2
- Can't make it work testing with tabbable mocked HOT 7
- jsdom issue: 'slot):not([inert]' is not a valid selector HOT 7
- Remove nwsapi v2.2.2 override once bug is fixed
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tabbable.