search

globalizejs / globalize

A JavaScript library for internationalization and localization that leverages the official Unicode CLDR JSON data
https://globalizejs.com
MIT License
4.8k stars 603 forks source link

updated app-npm-webpack example to support latest v3 version of webpack #812

Closed ambrons closed 6 years ago

ambrons commented 6 years ago

WIP: Without reordering the chunks the application produces the following error after production compile:

vendor.91c6138784dc3c8e7c09.js:1 Uncaught TypeError: Cannot read property 'call' of undefined
    at t (vendor.91c6138784dc3c8e7c09.js:1)
    at Object.9 (app.91c6138784dc3c8e7c09.js:1)
    at t (vendor.91c6138784dc3c8e7c09.js:1)
    at window.webpackJsonp (vendor.91c6138784dc3c8e7c09.js:1)
    at app.91c6138784dc3c8e7c09.js:1

That's with the order of the script injects done this way: ./dist/index.html

<script type="text/javascript" src="vendor.91c6138784dc3c8e7c09.js"></script>
<script type="text/javascript" src="app.91c6138784dc3c8e7c09.js"></script>
<script type="text/javascript" src="i18n/de.91c6138784dc3c8e7c09.js"></script>
<script type="text/javascript" src="i18n/pt.91c6138784dc3c8e7c09.js"></script>
<script type="text/javascript" src="i18n/ar.91c6138784dc3c8e7c09.js"></script>
<script type="text/javascript" src="i18n/zh.91c6138784dc3c8e7c09.js"></script>
<script type="text/javascript" src="i18n/en.91c6138784dc3c8e7c09.js"></script>
<script type="text/javascript" src="i18n/ru.91c6138784dc3c8e7c09.js"></script>
<script type="text/javascript" src="i18n/es.91c6138784dc3c8e7c09.js"></script>

However if you move app.*.js to the end all works as it should.

<script type="text/javascript" src="vendor.91c6138784dc3c8e7c09.js"></script>
<script type="text/javascript" src="i18n/de.91c6138784dc3c8e7c09.js"></script>
<script type="text/javascript" src="i18n/pt.91c6138784dc3c8e7c09.js"></script>
<script type="text/javascript" src="i18n/ar.91c6138784dc3c8e7c09.js"></script>
<script type="text/javascript" src="i18n/zh.91c6138784dc3c8e7c09.js"></script>
<script type="text/javascript" src="i18n/en.91c6138784dc3c8e7c09.js"></script>
<script type="text/javascript" src="i18n/ru.91c6138784dc3c8e7c09.js"></script>
<script type="text/javascript" src="i18n/es.91c6138784dc3c8e7c09.js"></script>
<script type="text/javascript" src="app.91c6138784dc3c8e7c09.js"></script>

screen shot 2018-03-15 at 12 50 02 pm

This was done in an effort to fix the same issue in my product after upgrading to webpack v3.x. Which has the same issue.

I looked at the back and forth in https://github.com/globalizejs/globalize/pull/794 And there's a few changes in there and a lot of overlap with what was done there.

jsf-clabot commented 6 years ago

CLA assistant check
All committers have signed the CLA.

ambrons commented 6 years ago

I failed to mention in my initial post that I'm speculating that the reason the i18n comes after the app is that the plugin isn't able to determine that app depends on i18n as they're optional depending on which one you select and only via the vendor package, which the app has a direct dependency on.

ambrons commented 6 years ago

Reading over this it seems like a common problem and perhaps should just be baked into the plugin since it dictates that chunks must be used and what it's named already https://github.com/jantimon/html-webpack-plugin/issues/481

rxaviers commented 6 years ago

Merged thanks

rxaviers commented 6 years ago

I also did a few additional improvements 73d1d93b436979709413e190596964ac364df1d3