[bug] $(document).ready() on development env

[jmarceli]

Hi.
When hot reloading is enabled ready event is triggered before CSS styles are applied. I run into this issue when I've tried to determine active media query based on current CSS style. It works in production/release but doesn't work with webpack.

The only workaround which I manage to came up with is defining 'process.env' variable in the webpack.config.js file and based on its value switching $(document).ready() to $(window).load().

Here is the code:
assets/build/webpack.config.js

    new webpack.DefinePlugin({
      WEBPACK_PUBLIC_PATH: (argv.watch === true) ? JSON.stringify(path.join(config.publicPath, dist)) : false,
      'process.env': argv.release ? "'production'" : "'development'"
    })

assets/scripts/main.js

// Load Events
if (process.env === 'production') {
  $(document).ready(() => new Router(routes).loadEvents());
} else {
  $(window).load(() => new Router(routes).loadEvents());
}

Please tell me if there is any cleaner solution.

As a side note: I think that some kind of process.env variable might be useful in other cases too. Maybe it is a good idea to provide it by default?

[QWp6t]

Looks like you're using alpha 1. This might have been resolved in alpha 2 or in the master branch. Feel free to post here if it's still a problem in the newer releases, and we can revisit this issue.

[jmarceli]

Hi, I've adapted code from alpha 3 which is:

document.addEventListener('DOMContentLoaded', () => new Router(routes).loadEvents());

And bug still remains.

[QWp6t]

Okay, I'll look into it.

In the meantime, you can use module.hot instead of process.env.

https://webpack.github.io/docs/hot-module-replacement.html

[jmarceli]

One more detail regarding this issue. The function which has inconsistent behaviour looks as follow:

  getBreakpointName() {
    const breakpoint = window.getComputedStyle(
      document.getElementById('test'), ':before'
      ).getPropertyValue('content').replace(/\"/g, '');
    return breakpoint;
  }

So I basically returns the content of selected DOM element :before pseudo selector.

[retlehs]

closed by #1751