'Googlelabs dark mode toggle

I downloaded the source to use google dark toggle but it gives the errors seen below. When I use cdn it is ok but it does not work on localhost source. I do not understand the error I received; what does it mean?

dark-mode-toggle-playground.mjs:1 
Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.

dark-mode-toggle.mjs:1 
Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello Dark Mode</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="color-scheme" content="dark light">
    <meta name="theme-color" content="">
    <link rel="icon" content="">
    
    <link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">
    <link rel="stylesheet" href="light.css" media="(prefers-color-scheme: light)">
    <link rel="stylesheet" href="common.css">
    <script type="module" src="dark-mode-toggle-playground.mjs"></script>
    <script type="module" src="../src/dark-mode-toggle.mjs"></script>
  </head>
  <body>
    <main>
      <form id="content">
        <fieldset>
          <legend>Lorem ipsum</legend>
          <div>
            <select>
              <option>Lorem</option>
              <option>Ipsum</option>
            </select>
          </div>
          <div>
            <button type="button">Lorem</button>
          </div>
          <div>
            <input type="text" value="Lorem ipsum">
          </div>
          <div>
            <input type="search" value="Lorem ipsum">
          </div>
          <div>
            <label><input checked type="checkbox"> Lorem</label>
            <label><input type="checkbox"> Ipsum</label>
          </div>
          <div>
            <label><input checked name="foo" type="radio"> Lorem</label>
            <label><input name="foo" type="radio"> Ipsum</label>
          </div>
        </fieldset>
      </form>
      <p>
        Also see the <a href="unstyled.html">unstyled variant</a>
        that shows the out-of-the-box experience.
      </p>
      <p>
        Run <code>npm run build</code> and see the <a href="dist.html">built variant</a>
        that uses the minified version of the script in the <code>dist</code> folder.
      </p>
    </main>
    <aside>
      <dark-mode-toggle id="dark-mode-toggle-1"></dark-mode-toggle>
    </aside>
    <aside>
      <dark-mode-toggle id="dark-mode-toggle-2"></dark-mode-toggle>
    </aside>
    <aside>
      <dark-mode-toggle id="dark-mode-toggle-3" legend="Dark Mode" light="off" dark="on" remember="always"></dark-mode-toggle>
    </aside>
    <aside>
      <dark-mode-toggle id="dark-mode-toggle-4" legend="Theme Switcher" light="Light" dark="Dark" remember="Remember this" appearance="switch"></dark-mode-toggle>
    </aside>
  </body>
</html>

const doc = document;
const store = localStorage;
const PREFERS_COLOR_SCHEME = 'prefers-color-scheme';
const MEDIA = 'media';
const LIGHT = 'light';
const DARK = 'dark';
const MQ_DARK = `(${PREFERS_COLOR_SCHEME}:${DARK})`;
const MQ_LIGHT = `(${PREFERS_COLOR_SCHEME}:${LIGHT})`;
const LINK_REL_STYLESHEET = 'link[rel=stylesheet]';
const REMEMBER = 'remember';
const LEGEND = 'legend';
const TOGGLE = 'toggle';
const SWITCH = 'switch';
const APPEARANCE = 'appearance';
const PERMANENT = 'permanent';
const MODE = 'mode';
const COLOR_SCHEME_CHANGE = 'colorschemechange';
const PERMANENT_COLOR_SCHEME = 'permanentcolorscheme';
const ALL = 'all';
const NOT_ALL = 'not all';
const NAME = 'dark-mode-toggle';
const DEFAULT_URL = 'localhost/dark/demo/';

https://github.com/GoogleChromeLabs/dark-mode-toggle

htmljquery


Solution 1:[1]

Research work thanks to "Alvin Espárrago".thank you.

<IfModule mod_mime.c>
  AddType text/javascript js mjs
</IfModule>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kaan Demir

Related Questions