mithril requires 'mithril' to be imported

Question

I am writing a simple Mithril component, given below is the code

var m = require("mithril")

var MyComponent = {
    view() {
        return <button>Hello world!</button>;
    }
};

export default MyComponent;

My problem is that in this scenario I am not using m as required, however when I remove this the app does not run, I get the following error

Uncaught ReferenceError: m is not defined(…)

'babel-loader' { "presets": [ "es2015" ], "plugins": [ [ "transform-react-jsx", { "pragma": "m" } ] ] } — tmp dev, Apr 26 '17 at 03:50

score 9 · Answer 1 · answered Apr 26 '17 at 16:41

It complains when you remove the m = require("mithril") line because when the JSX is transformed it becomes invocations of m().

var m = require("mithril")

var MyComponent = {
    view() {
        return <button>Hello world!</button>;
    }
};

export default MyComponent;

becomes

var m = require("mithril");

var MyComponent = {
    view: function view() {
        return m(
            "button",
            null,
            "Hello world!"
        );
    }
};

exports.default = MyComponent;

You can see the JSX transform live on the babel REPL

mithril requires 'mithril' to be imported

1 Answers1