Mithril.js

Common errors

• TypeError: Cannot read properties of undefined (reading 'someProperty')

  cause Attempting to access a property on an `undefined` or `null` object within a view function, often due to asynchronous data loading not yet completing or typos in data paths.
  fix Implement defensive checks (e.g., `data && data.someProperty`), use optional chaining (`data?.someProperty`), or ensure data is available before rendering the affected part of the view.

• ReferenceError: m is not defined (or similar import errors like 'm is not a function')

  cause Incorrect module import syntax (e.g., using `require` in an ESM file, or incorrect named/default import) or trying to use Mithril before it's loaded.
  fix Ensure you are using the correct import syntax for your module environment (ESM: `import m from 'mithril'`, CJS: `const m = require('mithril')`). Verify that your build tools are correctly transpiling or bundling modules.

• Uncaught (in promise) TypeError: Failed to fetch

  cause This error typically originates from `m.request` due to network issues, incorrect URL, or server-side CORS policies blocking the request. It can also appear if the promise rejection from `m.request` is not caught.
  fix Check your network connection and the request URL. Verify server-side CORS headers are correctly configured (`Access-Control-Allow-Origin`, etc.). Ensure you have a `.catch()` block on your `m.request` promises to handle network and HTTP errors.

Warnings

• breaking Direct assignment to `vnode.state` is no longer supported. In Mithril.js v2.x and later, `vnode.state` is an object, and properties should be assigned to it (e.g., `vnode.state.propertyName = value`) rather than reassigning `vnode.state` itself.
  Fix: Refactor `vnode.state = newValue` to `vnode.state.propertyName = newValue` and access state as `vnode.state.propertyName`.
• breaking The `m.withAttr` utility function has been removed in Mithril.js v2.x. This function was previously used for convenient event handler parameter extraction.
  Fix: Replace `m.withAttr('attributeName', handler)` with a manual event handler that accesses `e.target.attributeName`. For example, `(e) => handler(e.target.value)` for input fields.
• breaking The behavior of `m.request` for error handling has changed significantly in v2.x. If an `extract` callback is provided, `m.request` will no longer automatically reject the Promise for non-2xx/304 HTTP status codes (e.g., 4xx or 5xx server errors). Additionally, default `Content-Type` for JSON bodies might trigger unexpected CORS preflights.
  Fix: Applications must now explicitly handle server errors within the `extract` callback or the `.then()` chain. If encountering CORS issues, explicitly set `headers: {"Content-Type": "text/plain"}` in `m.request` options.
• breaking `m.redraw()` is always asynchronous in Mithril.js v2.x. The synchronous redraw behavior that was available in earlier versions (e.g., passing a truthy value to `m.redraw()`) has been removed.
  Fix: Ensure that your application logic accounts for redraws happening on the next animation frame. If immediate DOM updates are critical, reconsider your architectural approach or use synchronous DOM manipulation sparingly outside of Mithril's VDOM flow, understanding the risks.
• gotcha Mithril.js's auto-redraw system does not trigger for external asynchronous events such as `setTimeout`, `setInterval`, raw Promises (not managed by `m.request`), or event handlers from third-party libraries (e.g., WebSockets).
  Fix: After any state changes resulting from these external events, you must explicitly call `m.redraw()` to signal Mithril.js to re-render the UI.
• security A prototype pollution vulnerability was identified and fixed in `m.parseQueryString`. Attackers could potentially manipulate object prototypes via crafted query strings.
  Fix: Upgrade to Mithril.js version 2.0.3 or higher to patch this vulnerability.

Install

• npm install mithril npm
• yarn add mithril yarn
• pnpm add mithril pnpm

Imports

• m
  wrong:

  const m = require('mithril')

  correct:

  import m from 'mithril'

  For ESM projects, `m` is the default export. Use named imports for specific sub-modules in ESM. In CommonJS, `require('mithril')` is standard.
• mount
  wrong:

  import { mount } from 'mithril'

  correct:

  import m from 'mithril'; m.mount(document.body, Component)

  Most core functionalities like `mount`, `route`, `request` are properties of the default `m` object. While some are re-exported as named exports, accessing them via `m.<method>` is the idiomatic and most compatible approach across module types.
• route
  wrong:

  const route = require('mithril').route

  correct:

  import m from 'mithril'; m.route(document.body, '/', routes)

  Accessing routing utilities through the `m` object ensures consistent behavior, especially when dealing with auto-redraw. The CommonJS `require` pattern for sub-modules can work but is less common for `route` than importing the main `m` object.
• Component Type

  import m, { Vnode } from 'mithril'; function MyComponent(vnode: Vnode) { /* ... */ }

  Mithril ships with TypeScript definitions. `Vnode` is a common type to import for component definitions.

Quickstart

This quickstart demonstrates a basic Mithril.js component with local state and event handling, then mounts it to the document body. It highlights how to define components, manage state, and render dynamic content.

import m from 'mithril';

interface MyComponentAttrs {
  name: string;
}

const MyComponent = {
  count: 0, // Component local state
  oninit: function(vnode: m.Vnode<MyComponentAttrs>) {
    // Initialize state, cannot assign directly to vnode.state in v2+
    vnode.state.count = 0;
  },
  view: function(vnode: m.Vnode<MyComponentAttrs>) {
    return m('div', [
      m('h1', `Hello, ${vnode.attrs.name}! Current count: ${vnode.state.count}`),
      m('button', {
        onclick: () => {
          vnode.state.count++;
        }
      }, 'Increment'),
      m('p', 'Click the button to increment the counter.')
    ]);
  }
};

m.mount(document.body, { view: () => m(MyComponent, { name: 'Mithril' }) });

// To demonstrate routing (requires an element to mount routes to, e.g., <div id="app"></div>)
// const homeRoute = { view: () => m('h2', 'Welcome Home!') };
// const aboutRoute = { view: () => m('h2', 'About Us') };
// m.route(document.getElementById('app') || document.body, '/home', {
//   '/home': homeRoute,
//   '/about': aboutRoute
// });