Circular dependency introduced with DangerouslySetHTML

[pragmaticivan]

Some tests started failing after we updated to use the latest version of metal.js

> [email protected] test /Users/pragmaticivan/Code/metal/magnet-plugin-metal
> mocha --compilers js:babel-core/register test/setup/node.js test/unit/**/*.js

/Users/pragmaticivan/Code/metal/magnet-plugin-metal/node_modules/metal-jsx/lib/DangerouslySetHTML.js:21
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
                                                                                                          ^

TypeError: Super expression must either be null or a function, not undefined
    at _inherits (/Users/pragmaticivan/Code/metal/magnet-plugin-metal/node_modules/metal-jsx/lib/DangerouslySetHTML.js:21:113)
    at /Users/pragmaticivan/Code/metal/magnet-plugin-metal/node_modules/metal-jsx/lib/DangerouslySetHTML.js:28:2
    at Object.<anonymous> (/Users/pragmaticivan/Code/metal/magnet-plugin-metal/node_modules/metal-jsx/lib/DangerouslySetHTML.js:59:2)
    at Module._compile (module.js:569:30)
    at Module._extensions..js (module.js:580:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/pragmaticivan/Code/metal/magnet-plugin-metal/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/pragmaticivan/Code/metal/magnet-plugin-metal/node_modules/metal-jsx/lib/JSXComponent.js:20:27)
    at Module._compile (module.js:569:30)
    at Module._extensions..js (module.js:580:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/pragmaticivan/Code/metal/magnet-plugin-metal/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/pragmaticivan/Code/metal/magnet-plugin-metal/test/unit/index.js:5:1)
    at Module._compile (module.js:569:30)
    at loader (/Users/pragmaticivan/Code/metal/magnet-plugin-metal/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/pragmaticivan/Code/metal/magnet-plugin-metal/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at /Users/pragmaticivan/Code/metal/magnet-plugin-metal/node_modules/mocha/lib/mocha.js:230:27
    at Array.forEach (native)
    at Mocha.loadFiles (/Users/pragmaticivan/Code/metal/magnet-plugin-metal/node_modules/mocha/lib/mocha.js:227:14)
    at Mocha.run (/Users/pragmaticivan/Code/metal/magnet-plugin-metal/node_modules/mocha/lib/mocha.js:495:10)
    at Object.<anonymous> (/Users/pragmaticivan/Code/metal/magnet-plugin-metal/node_modules/mocha/bin/_mocha:469:18)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Function.Module.runMain (module.js:605:10)
    at startup (bootstrap_node.js:158:16)
    at bootstrap_node.js:575:3

So I was investigating and found a circular dependency where DangerouslySetHTML imports JSXComponent (https://github.com/metal/metal.js/blob/master/packages/metal-jsx/src/DangerouslySetHTML.js#L3)

But JSXComponent also imports DangerouslySetHTML in order to export that class on the main export. (https://github.com/metal/metal.js/blob/master/packages/metal-jsx/src/JSXComponent.js#L7)

Found some related questions and looks like babel doesn't handle that case very well if you don't guarantee that the main one file comes first.
babel/babel#1150

I also removed that manually on the build files and it started working again.

Hope that helps to investigate.

cc @bryceosterhaus

[pragmaticivan]

As a solution, maybe we could follow the same pattern used in other projects introducing a file all/jsx.js.

[pragmaticivan]

Just sent a PR, that may solve the issue and follow the current pattern from other packages inside this project. I tested locally with npm link and it's working.

[bryceosterhaus]

Thanks @pragmaticivan, this issue was my bad