Skip to content

Website: dark mode not working in Firefox #503

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Jump to bottom
Closed
knowler opened this issue Apr 5, 2019 · 2 comments
Closed

Website: dark mode not working in Firefox #503

knowler opened this issue Apr 5, 2019 · 2 comments
Labels
🐛 type/bug This is a problem

Comments

@knowler
Copy link

knowler commented Apr 5, 2019 •
edited
Loading

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
@johno johno added the 🐛 type/bug This is a problem label Apr 5, 2019
@macklinu
Copy link
Contributor

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

image

Unable to confirm locally due to #542.

@johno
Copy link
Member

johno commented Apr 18, 2019

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

@johno johno closed this as completed Apr 18, 2019
# for free to join this conversation on GitHub. Already have an account? # to comment
Assignees
No one assigned
Labels
🐛 type/bug This is a problem
Milestone
No milestone
Development

No branches or pull requests
3 participants
@johno @macklinu @knowler