javascripthtmlreactjsonsen-ui

Why are HTML attributes set differently into the DOM?

After digging several hours we decided to come up with a question on SO, hoping that someone else could help regarding the following problem.

  1. For one of our web applications, we used the Onsen UI js framework with its React support library
  2. When we try to render the application on our dev environments everything seems to work properly, but when we try it on our staging environment some components behave differently

  3. What we found so far: it seems that on our staging environment, some HTML attributes are set differently into the DOM:

    |----------------|---------------|--------------|
| HTML attribute |    DEV ENV    | STAGING ENV  |
|----------------|---------------|--------------|
| fixed-content  | fixed-content | fixedcontent |
|----------------|---------------|--------------|
| active-index   | active-index  |     index    |
|----------------|---------------|--------------|

Because of this, the Onsen framework cannot find the attributes on the HTML Elements and behaves differently regardless that:

  1. We use the same browser (checked with Chrome, Edge, Firefox)
  2. We have the same JS code loaded on both envs

What differences are between envs:

  1. The JS files are stored locally on our dev machines and on S3 for our staging env.
  2. We use an encrypted connection on our staging env
  3. The Accept-Encoding header is gzip, deflate on local and gzip, deflate, br on staging
  4. Maybe something else to look for?

Does anybody know what the hell is happening here?

Solution

  • We actually found the problem and the solution is quite simple even though it took us hours to find it.

    On our staging/production environments, we use the babel plugin transform-react-remove-prop-types to strip the React prop types.

    Unfortunately, the Onsen UI React support library relies on its components' defined prop types, so when they were stripped the library started to behave differently.

    What we did:

    1. We updated the babel plugin to version 0.3.3 in order to be able to use the ignoreFilenames option

    2. We skipped the file which holds the code of the Onsen UI React library

      if (cli.production) {
    config.babel.plugins.push([
        'transform-react-remove-prop-types',
        {
            ignoreFilenames: ['projectleader']
        }
    ]);
}