diff --git a/app/templates/header.js b/app/templates/header.js index edd39d7a..b1c38a6e 100644 --- a/app/templates/header.js +++ b/app/templates/header.js @@ -1,5 +1,16 @@ const html = require('choo/html'); const assets = require('../../common/assets'); +/* + The current weback config uses package.json to generate + version.json for /__version__ meaning `require` returns the + string 'version.json' in the frontend context but the json + on the server. + + We want `version` to be constant at build time so this file + has a custom loader (/build/version_loader.js) just to replace + string with the value from package.json. 🤢 +*/ +const version = require('../../package.json').version || 'VERSION'; module.exports = function(state) { return html`
@@ -14,8 +25,9 @@ module.exports = function(state) {
${state.translate('siteSubtitle')}
- ${state.translate( - 'siteFeedback' - )} + ${state.translate('siteFeedback')}
`; }; diff --git a/build/version_loader.js b/build/version_loader.js new file mode 100644 index 00000000..78a2c019 --- /dev/null +++ b/build/version_loader.js @@ -0,0 +1,5 @@ +const version = require('../package.json').version; + +module.exports = function(source) { + return source.replace('VERSION', version); +}; diff --git a/webpack.config.js b/webpack.config.js index dbcf5f6e..6feb300b 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -4,6 +4,12 @@ const CopyPlugin = require('copy-webpack-plugin'); const ManifestPlugin = require('webpack-manifest-plugin'); const IS_DEV = process.env.NODE_ENV === 'development'; +const regularJSOptions = { + babelrc: false, + presets: [['env', { modules: false }], 'stage-2'], + plugins: ['yo-yoify'] +}; + module.exports = { entry: { vendor: ['babel-polyfill', 'fluent'], @@ -31,6 +37,16 @@ module.exports = { } ] }, + { + include: require.resolve('./app/templates/header'), + use: [ + { + loader: 'babel-loader', + options: regularJSOptions + }, + './build/version_loader' + ] + }, { include: [path.dirname(require.resolve('fluent'))], use: [ @@ -55,11 +71,7 @@ module.exports = { path.resolve(__dirname, 'node_modules/fluent-intl-polyfill'), path.resolve(__dirname, 'node_modules/intl-pluralrules') ], - options: { - babelrc: false, - presets: [['env', { modules: false }], 'stage-2'], - plugins: ['yo-yoify'] - } + options: regularJSOptions }, { include: [path.resolve(__dirname, 'node_modules')],