modern-and-legacy-config not save correct index.html - missing preload and polyfills #435

mjanos1 · 2019-05-04T14:58:26Z

Hi,

this issue is happen for my project and for clean instalation of webpack created by https://github.com/open-wc/open-wc/tree/master/packages/building-webpack

This happen very randomly, but almost everytime when run build on docker, and in some case when run build under win 10.

"build": "webpack --mode production",

When I try to debug this issue, html-webpack-plugin do correct changes for index.html, but it is not saved in dist/index.html.
What I can observe, modern-and-legacy-config.js randomly start build with legacy build createConfig(options, true) and then with modern build createConfig(options, false), in this case index.html was correctly build.
In modern-and-legacy-config.js is [createConfig(options, false), createConfig(options, true)]

project config:

webpack.config.js:

/* eslint-disable import/no-extraneous-dependencies */

const { resolve } = require('path');
const createDefaultConfig = require('@open-wc/building-webpack/modern-and-legacy-config');
const merge = require('webpack-merge');
const CopyPlugin = require('copy-webpack-plugin');

const defaultConfiguration = createDefaultConfig({
  indexHTML: resolve(__dirname, './src/index.html'),
  entry: resolve(__dirname, './src/index.js'),
});

const [defaultModernConfig, defaultLegacyConfig] = Array.isArray(defaultConfiguration)
  ? defaultConfiguration
  : [defaultConfiguration, defaultConfiguration];

const customConfig = {
  devServer: {
    contentBase: resolve(__dirname, 'dist'),
    historyApiFallback: true,
    https: true,
  },
  plugins: [
    new CopyPlugin([
//copy fonts and css to assets folder
    ]),
  ],
};


module.exports = [
  merge(defaultModernConfig, customConfig),
  merge(defaultLegacyConfig, customConfig),
];

src/index.html:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <meta name="Description" content="">
    <base href="/">
<!-- Import css files from assets folder -->
</head>
<body>
    <div id="auth"></div>
    <div id="breadcrumbs"></div>
    <div id="root"></div>
    <div id="splash">
        <div class="splash-logo-wrap">
            <svg>
<!-- SVG detail -->
           </svg>
        </div>
    </div>
</body>

</html>

output dist/index.html:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <meta name="Description" content="">
    <base href="/">
<!-- Import css files from assets folder -->
</head>
<body>
    <div id="auth"></div>
    <div id="breadcrumbs"></div>
    <div id="root"></div>
    <div id="splash">
        <div class="splash-logo-wrap">
            <svg>
<!-- SVG detail -->
           </svg>
        </div>
    </div>
</body>

Dockerfile

FROM node:8.15-alpine as builder

# Install build dependencies
RUN apk update && \
    apk add \
    git \
    python \
    make \
    g++ \
    sassc


# Set unsafe-perm to true to enable running install scripts when running as root
RUN npm config set unsafe-perm true

COPY . /app/

WORKDIR /app

# Install dependencies
RUN npm install

# Start over with a clean image
# Leaves behind build dependencies and SSH keys
FROM node:8.15-alpine as final

RUN apk update && \
    apk add bash

WORKDIR /app

# Copy app dependencies
COPY --from=builder /app/ .

build with node:12.0.0-alpine has same result

The text was updated successfully, but these errors were encountered:

LarsDenBakker · 2019-05-06T07:16:07Z

This looks to be a race condition of some kind. We need to investigate this. Have you tried this with rollup? Do you see the same issues there?

mjanos1 · 2019-05-06T19:52:06Z

@LarsDenBakker thanks for reply.
Initial rollup looks working, also under docker.
I will try to rework my project to rollup config, and let you know.

But is it possible to try fix webpack build?

LarsDenBakker · 2019-05-06T20:05:53Z

Indeed, we will look into fixing this. It seems to be a race condition within the webpack hook we use for copying over files.

LarsDenBakker · 2019-05-11T07:49:38Z

I am trying to debug this, but I can't reproduce it locally.

mjanos1 · 2019-05-13T06:13:56Z

Did you try it with docker?
Or was helpful https://polymer.slack.com/archives/CE6D9DN05/p1557560994221600 ?

tpluscode · 2019-05-24T04:45:03Z

Hey @LarsDenBakker, any luck with this. If you've got some pointers I'd gladly try help fix this. It's being a pain for us as we need to support IE11 for a client and cannot fulfil that requirement.

LarsDenBakker · 2019-05-24T06:07:22Z

I've tried reproducing it in different scenario's, but I haven't been able to yet. I still need to try out your gist, but I didn't have any time last weekend.

LarsDenBakker · 2019-05-25T08:11:50Z

This is my output when I try your gist:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
  <meta name="Description" content="Put your description here.">

  <style>
    * {
      margin: 0;
      padding: 0;
      font-family: sans-serif;
    }

    body {
      background-color: #ededed;
    }
  </style>
  <title>issue-435</title>
<link rel="preload" href="main.0162c5c97bb253f7cacd.js" as="script"></head>
<body>
  <issue-435></issue-435>

  
<script src="polyfills/babel.js" nomodule></script><script>!function(){function n(n){return new Promise(function(e,o){var t=document.createElement("script");t.onerror=function(){o(new Error("Error loading "+n))},t.onload=function(){e()},t.src=n,t.setAttribute("defer",!0),document.head.appendChild(t)})}var e="noModule"in HTMLScriptElement.prototype?["main.0162c5c97bb253f7cacd.js"]:["legacy/main.1f7bd3bd3e1cd42ed465.js"],o=[];"URLSearchParams"in window||o.push(n("polyfills/url.js")),"attachShadow"in Element.prototype&&"getRootNode"in Element.prototype||o.push(n("polyfills/webcomponents.js")),o.length?Promise.all(o).then(function(){e.forEach(function(e){n(e)})}):e.forEach(function(e){n(e)})}();</script></body>

</html>

which is what I expect.

What version of node are you using? I see that it works correctly on node 8, 10 and 12 but not on node 11 :/

tpluscode · 2019-05-25T10:39:47Z

I currently have node 10 and I get this:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
  <meta name="Description" content="Put your description here.">

  <style>
    * {
      margin: 0;
      padding: 0;
      font-family: sans-serif;
    }

    body {
      background-color: #ededed;
    }
  </style>
  <title>issue-435</title>
</head>
<body>
  <issue-435></issue-435>

  
</body>

</html>

tpluscode · 2019-05-25T10:41:22Z

But it worked in 8 and 12 while it failed in 10 and 11❗️

LarsDenBakker · 2019-05-25T10:59:30Z

That's interesting, in a funky way. What OS are you on?

tpluscode · 2019-05-25T11:40:05Z

Mac Mojave

LarsDenBakker · 2019-05-30T07:00:58Z

I discovered a race condition, I'm wondering if it fixes your issue. Can you try with building-webpack 1.4.5?

LarsDenBakker · 2019-05-30T15:04:51Z

I found another issue when terser is in parallel mode. Fed up with it now so im going to rewrite it on the weekend

LarsDenBakker mentioned this issue Jun 2, 2019

feat: utils and webpack plugin for an index.html entrypoint #474

Merged

LarsDenBakker closed this as completed in #474 Jun 14, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

modern-and-legacy-config not save correct index.html - missing preload and polyfills #435

modern-and-legacy-config not save correct index.html - missing preload and polyfills #435

mjanos1 commented May 4, 2019

LarsDenBakker commented May 6, 2019

mjanos1 commented May 6, 2019

LarsDenBakker commented May 6, 2019

LarsDenBakker commented May 11, 2019

mjanos1 commented May 13, 2019

tpluscode commented May 24, 2019

LarsDenBakker commented May 24, 2019

LarsDenBakker commented May 25, 2019 •

edited

Loading

tpluscode commented May 25, 2019

tpluscode commented May 25, 2019 •

edited

Loading

LarsDenBakker commented May 25, 2019

tpluscode commented May 25, 2019

LarsDenBakker commented May 30, 2019

LarsDenBakker commented May 30, 2019

modern-and-legacy-config not save correct index.html - missing preload and polyfills #435

modern-and-legacy-config not save correct index.html - missing preload and polyfills #435

Comments

mjanos1 commented May 4, 2019

LarsDenBakker commented May 6, 2019

mjanos1 commented May 6, 2019

LarsDenBakker commented May 6, 2019

LarsDenBakker commented May 11, 2019

mjanos1 commented May 13, 2019

tpluscode commented May 24, 2019

LarsDenBakker commented May 24, 2019

LarsDenBakker commented May 25, 2019 • edited Loading

tpluscode commented May 25, 2019

tpluscode commented May 25, 2019 • edited Loading

LarsDenBakker commented May 25, 2019

tpluscode commented May 25, 2019

LarsDenBakker commented May 30, 2019

LarsDenBakker commented May 30, 2019

LarsDenBakker commented May 25, 2019 •

edited

Loading

tpluscode commented May 25, 2019 •

edited

Loading