preact debug mode with ES6 imports

[damianobarbati]

The docs are showing require usage but what's the correct way to import this with ES6 and only in development?

The following is indeed not working: proptypes validation is enabled after components are mounted thus those are not validated.

if (module.hot) {
    module.hot.accept();
    import('preact/debug');
}

The following on top of index.js mean including also in production the debug logic.

import 'preact/debug'; //eslint-disable-line

Any help?
My hint: preact/debug should export a function, this allows the developer to import it and run it only if NODE_ENV=development and tree-shake it away in production.

PS: great work guys!

[sventschui]

The problem about es6 imports in this case is that they are static. One might not make them conditional by design. The dynamic import you mentioned makes this possible, but adds the preact options too late and thus some things might not work.

As far as I know there should not be any drawback on using a require together with es6 imports. As far as I know when using if (process.env.NODE_ENV==='development') { require('preact/debug'); } the statement will be dead-code-eliminated during uglify and thus not end up in your prod bundle at all, or does it in your case? Is there any particular reason why you'd want it to be es6?

If you really want this and you are using webpack you could use the null-loader for your production build

[jeremy-coleman]

That syntax isnt es6 import, its dynamic import whose sole purpose is to delay loading. Import thing and export thing is the es module syntax , but im not sure that really means anything if you use webpack. The output generated isnt anything close to es module, i would argue closer to amd than anything. Basically,Just use what works bc it doesnt matter

[marvinhagemeister]

Closing, @sventschui and @jeremy-coleman summed up the situation perfectly 👍

[damianobarbati]

I understand, but can't preact/debug handle the logic just as prop-types does? Relieving the developer from manually doing that?

https://github.com/facebook/prop-types/blob/master/index.js#L8