Website: dark mode not working in Firefox

[knowler]

Website: dark mode not working in Firefox

Dark mode isn’t working in Firefox. Also, if this helps, the implementation of dark mode on https://styled-system.com and https://jxnblk.com/blog/ does work in Firefox.

Your environment

https://mybrowser.fyi/report/5ca793c4929f1c0014086d0d

Browser console error message:

11:42:00.950 SyntaxError: invalid regular expression flag s[Learn More] tag.js:32:14
    <anonymous> tag.js:32
    Webpack 18
    d
    <anonymous>
    d
    <anonymous>
    d
    <anonymous>
    d
    <anonymous>
    d
    <anonymous>
    d
    <anonymous>
    d
    <anonymous>
    d
    t
    n
    <anonymous>

I don’t actually think that error has anything to do with dark mode not working. I cloned the repo and ran the docs, with the dark mode addition and at the previous commit without, but both have the same error. Here's the extended debug from running the docs in development:

extended debug output

``` SyntaxError: invalid regular expression flag s ../packages/remark-mdx/tag.js/< /Users/knowler/code/github/mdx/packages/remark-mdx/tag.js:32 29 | 30 | exports.openCloseTag = new RegExp('^(?:' + openTag + '|' + closeTag + ')') 31 | > 32 | exports.tag = new RegExp( 33 | '^(?:' + 34 | openTag + 35 | '|' + ../packages/remark-mdx/tag.js http://localhost:8000/commons.js:178627:29 __webpack_require__ /Users/knowler/code/github/mdx/docs/webpack/bootstrap:723 720 | }; 721 | 722 | // Execute the module function > 723 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); 724 | 725 | // Flag the module as loaded 726 | module.l = true; fn /Users/knowler/code/github/mdx/docs/webpack/bootstrap:100 97 | ); 98 | hotCurrentParents = []; 99 | } > 100 | return __webpack_require__(request); 101 | }; 102 | var ObjectFactory = function ObjectFactory(name) { 103 | return { ../packages/remark-mdx/block.js/< /Users/knowler/code/github/mdx/packages/remark-mdx/block.js:6 3 | // 4 | // MIT License https://github.com/remarkjs/remark/blob/master/license 5 | > 6 | const {openCloseTag} = require('./tag') 7 | 8 | module.exports = blockHtml 9 | ../packages/remark-mdx/block.js http://localhost:8000/commons.js:178135:29 __webpack_require__ /Users/knowler/code/github/mdx/docs/webpack/bootstrap:723 720 | }; 721 | 722 | // Execute the module function > 723 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); 724 | 725 | // Flag the module as loaded 726 | module.l = true; fn /Users/knowler/code/github/mdx/docs/webpack/bootstrap:100 97 | ); 98 | hotCurrentParents = []; 99 | } > 100 | return __webpack_require__(request); 101 | }; 102 | var ObjectFactory = function ObjectFactory(name) { 103 | return { ../packages/remark-mdx/index.js/< /Users/knowler/code/github/mdx/packages/remark-mdx/index.js:3 1 | const isAlphabetical = require('is-alphabetical') 2 | const extractImportsAndExports = require('./extract-imports-and-exports') > 3 | const block = require('./block') 4 | const {tag} = require('./tag') 5 | 6 | const IMPORT_REGEX = /^import/ ../packages/remark-mdx/index.js http://localhost:8000/commons.js:178454:29 __webpack_require__ /Users/knowler/code/github/mdx/docs/webpack/bootstrap:723 720 | }; 721 | 722 | // Execute the module function > 723 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); 724 | 725 | // Flag the module as loaded 726 | module.l = true; fn /Users/knowler/code/github/mdx/docs/webpack/bootstrap:100 97 | ); 98 | hotCurrentParents = []; 99 | } > 100 | return __webpack_require__(request); 101 | }; 102 | var ObjectFactory = function ObjectFactory(name) { 103 | return { ../packages/mdx/index.js/< /Users/knowler/code/github/mdx/packages/mdx/index.js:3 1 | const unified = require('unified') 2 | const toMDAST = require('remark-parse') > 3 | const remarkMdx = require('remark-mdx') 4 | const squeeze = require('remark-squeeze-paragraphs') 5 | const visit = require('unist-util-visit') 6 | const raw = require('hast-util-raw') ../packages/mdx/index.js http://localhost:8000/commons.js:176150:29 __webpack_require__ /Users/knowler/code/github/mdx/docs/webpack/bootstrap:723 720 | }; 721 | 722 | // Execute the module function > 723 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); 724 | 725 | // Flag the module as loaded 726 | module.l = true; fn /Users/knowler/code/github/mdx/docs/webpack/bootstrap:100 97 | ); 98 | hotCurrentParents = []; 99 | } > 100 | return __webpack_require__(request); 101 | }; 102 | var ObjectFactory = function ObjectFactory(name) { 103 | return { __webpack_require__ /Users/knowler/code/github/mdx/docs/webpack/bootstrap:723 720 | }; 721 | 722 | // Execute the module function > 723 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); 724 | 725 | // Flag the module as loaded 726 | module.l = true; fn /Users/knowler/code/github/mdx/docs/webpack/bootstrap:100 97 | ); 98 | hotCurrentParents = []; 99 | } > 100 | return __webpack_require__(request); 101 | }; 102 | var ObjectFactory = function ObjectFactory(name) { 103 | return { __webpack_require__ /Users/knowler/code/github/mdx/docs/webpack/bootstrap:723 720 | }; 721 | 722 | // Execute the module function > 723 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); 724 | 725 | // Flag the module as loaded 726 | module.l = true; fn /Users/knowler/code/github/mdx/docs/webpack/bootstrap:100 97 | ); 98 | hotCurrentParents = []; 99 | } > 100 | return __webpack_require__(request); 101 | }; 102 | var ObjectFactory = function ObjectFactory(name) { 103 | return { __webpack_require__ /Users/knowler/code/github/mdx/docs/webpack/bootstrap:723 720 | }; 721 | 722 | // Execute the module function > 723 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); 724 | 725 | // Flag the module as loaded 726 | module.l = true; fn /Users/knowler/code/github/mdx/docs/webpack/bootstrap:100 97 | ); 98 | hotCurrentParents = []; 99 | } > 100 | return __webpack_require__(request); 101 | }; 102 | var ObjectFactory = function ObjectFactory(name) { 103 | return { __webpack_require__ /Users/knowler/code/github/mdx/docs/webpack/bootstrap:723 720 | }; 721 | 722 | // Execute the module function > 723 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); 724 | 725 | // Flag the module as loaded 726 | module.l = true; fn /Users/knowler/code/github/mdx/docs/webpack/bootstrap:100 97 | ); 98 | hotCurrentParents = []; 99 | } > 100 | return __webpack_require__(request); 101 | }; 102 | var ObjectFactory = function ObjectFactory(name) { 103 | return { ./gatsby-browser.js /Users/knowler/code/github/mdx/docs/gatsby-browser.js:1 > 1 | export {wrapRootElement} from './src' 2 | __webpack_require__ /Users/knowler/code/github/mdx/docs/webpack/bootstrap:723 720 | }; 721 | 722 | // Execute the module function > 723 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); 724 | 725 | // Flag the module as loaded 726 | module.l = true; fn /Users/knowler/code/github/mdx/docs/webpack/bootstrap:100 97 | ); 98 | hotCurrentParents = []; 99 | } > 100 | return __webpack_require__(request); 101 | }; 102 | var ObjectFactory = function ObjectFactory(name) { 103 | return { ./.cache/api-runner-browser-plugins.js /Users/knowler/code/github/mdx/docs/.cache/api-runner-browser-plugins.js:8 5 | plugin: require('/Users/knowler/code/github/mdx/node_modules/gatsby-mdx/gatsby-browser.js'), 6 | options: {"plugins":[],"extensions":[".mdx",".md"],"remarkPlugins":[null,null]}, 7 | },{ > 8 | plugin: require('/Users/knowler/code/github/mdx/docs/gatsby-browser.js'), 9 | options: {"plugins":[]}, 10 | }] 11 | __webpack_require__ /Users/knowler/code/github/mdx/docs/webpack/bootstrap:723 720 | }; 721 | 722 | // Execute the module function > 723 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); 724 | 725 | // Flag the module as loaded 726 | module.l = true; fn /Users/knowler/code/github/mdx/docs/webpack/bootstrap:100 97 | ); 98 | hotCurrentParents = []; 99 | } > 100 | return __webpack_require__(request); 101 | }; 102 | var ObjectFactory = function ObjectFactory(name) { 103 | return { ./.cache/api-runner-browser.js/< /Users/knowler/code/github/mdx/docs/.cache/api-runner-browser.js:1 > 1 | const plugins = require(`./api-runner-browser-plugins`) 2 | const { 3 | getResourcesForPathname, 4 | getResourcesForPathnameSync, ./.cache/api-runner-browser.js http://localhost:8000/commons.js:178878:29 __webpack_require__ /Users/knowler/code/github/mdx/docs/webpack/bootstrap:723 720 | }; 721 | 722 | // Execute the module function > 723 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); 724 | 725 | // Flag the module as loaded 726 | module.l = true; fn /Users/knowler/code/github/mdx/docs/webpack/bootstrap:100 97 | ); 98 | hotCurrentParents = []; 99 | } > 100 | return __webpack_require__(request); 101 | }; 102 | var ObjectFactory = function ObjectFactory(name) { 103 | return { __webpack_require__ /Users/knowler/code/github/mdx/docs/webpack/bootstrap:723 720 | }; 721 | 722 | // Execute the module function > 723 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); 724 | 725 | // Flag the module as loaded 726 | module.l = true; fn /Users/knowler/code/github/mdx/docs/webpack/bootstrap:100 97 | ); 98 | hotCurrentParents = []; 99 | } > 100 | return __webpack_require__(request); 101 | }; 102 | var ObjectFactory = function ObjectFactory(name) { 103 | return { 0 http://localhost:8000/commons.js:189725:18 __webpack_require__ /Users/knowler/code/github/mdx/docs/webpack/bootstrap:723 720 | }; 721 | 722 | // Execute the module function > 723 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); 724 | 725 | // Flag the module as loaded 726 | module.l = true; (anonymous function) /Users/knowler/code/github/mdx/docs/webpack/bootstrap:790 787 | 788 | 789 | // Load entry module and return exports > 790 | return hotCreateRequire(0)(__webpack_require__.s = 0); 791 | (anonymous function) http://localhost:8000/commons.js:1:11 ```

[macklinu]

I cannot reproduce this in prod at https://mdxjs.com in Firefox 65:

Unable to confirm locally due to #542.

[johno]

Working on a fix for #542 @macklinu! The fix for this issue was #532 (didn't realize it also fixed this).