search

aurelia-ui-toolkits / aurelia-materialize-bridge

Materialize CSS components for Aurelia
http://aurelia-ui-toolkits.github.io/demo-materialize/
MIT License
156 stars 53 forks source link

Can't resolve md-colors-legacy.html and md-colors.html #559

Closed ApRoland closed 4 years ago

ApRoland commented 4 years ago

Hello!

After migration to the last bridge version i faced with the following issues in md-colors-legacy.html and md-colors.html:

ERROR in ./node_modules/aurelia-materialize-bridge/dist/native-modules/colors/md-colors-legacy.html
Module build failed (from ./node_modules/html-loader/index.js):
TypeError: Cannot read property '1' of undefined
    at optimizeBody (/node_modules/html-loader/node_modules/clean-css/lib/optimizer/level-1/optimize.js:429:82)
    at level1Optimize (/node_modules/html-loader/node_modules/clean-css/lib/optimizer/level-1/optimize.js:657:9)
    at optimize (/node_modules/html-loader/node_modules/clean-css/lib/clean.js:144:5)
    at /node_modules/html-loader/node_modules/clean-css/lib/clean.js:120:29
    at /node_modules/html-loader/node_modules/clean-css/lib/reader/read-sources.js:26:64
    at loadOriginalSources (/node_modules/html-loader/node_modules/clean-css/lib/reader/load-original-sources.js:26:5)
    at /node_modules/html-loader/node_modules/clean-css/lib/reader/read-sources.js:26:14
    at applySourceMaps (/node_modules/html-loader/node_modules/clean-css/lib/reader/apply-source-maps.js:34:5)
    at Object.callback (/node_modules/html-loader/node_modules/clean-css/lib/reader/read-sources.js:25:12)
    at doInlineImports (/node_modules/html-loader/node_modules/clean-css/lib/reader/read-sources.js:200:25)
    at inline (/node_modules/html-loader/node_modules/clean-css/lib/reader/read-sources.js:178:10)
    at fromStyles (/node_modules/html-loader/node_modules/clean-css/lib/reader/read-sources.js:151:5)
    at fromString (/node_modules/html-loader/node_modules/clean-css/lib/reader/read-sources.js:48:10)
    at doReadSources (/node_modules/html-loader/node_modules/clean-css/lib/reader/read-sources.js:33:12)
    at readSources (/node_modules/html-loader/node_modules/clean-css/lib/reader/read-sources.js:24:10)
    at /node_modules/html-loader/node_modules/clean-css/lib/clean.js:115:12
    at /node_modules/html-loader/node_modules/clean-css/lib/clean.js:135:34
    at minify (/node_modules/html-loader/node_modules/clean-css/lib/clean.js:114:35)
    at CleanCSS.minify (/node_modules/html-loader/node_modules/clean-css/lib/clean.js:77:12)
    at Object.options.minifyCSS (/node_modules/html-loader/node_modules/html-minifier/src/htmlminifier.js:667:50)
    at Object.chars (/node_modules/html-loader/node_modules/html-minifier/src/htmlminifier.js:1180:24)
    at /node_modules/html-loader/node_modules/html-minifier/src/htmlparser.js:230:19
    at String.replace (<anonymous>)
    at new HTMLParser (/node_modules/html-loader/node_modules/html-minifier/src/htmlparser.js:222:19)
    at minify (/node_modules/html-loader/node_modules/html-minifier/src/htmlminifier.js:966:3)
    at Object.exports.minify (/node_modules/html-loader/node_modules/html-minifier/src/htmlminifier.js:1326:16)
    at Object.module.exports (/node_modules/html-loader/index.js:128:26)
 @ ./node_modules/aurelia-materialize-bridge/dist/native-modules/colors/md-colors-legacy.js
 @ ./node_modules/aurelia-materialize-bridge/dist/native-modules/config-builder.js
 @ ./node_modules/aurelia-materialize-bridge/dist/native-modules/index.js
 @ ./app/main.js
 @ ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js
 @ multi aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry babel-polyfill aurelia-bootstrapper

ERROR in ./node_modules/aurelia-materialize-bridge/dist/native-modules/colors/md-colors.html
Module build failed (from ./node_modules/html-loader/index.js):
TypeError: Cannot read property '1' of undefined
    at optimizeBody (/node_modules/html-loader/node_modules/clean-css/lib/optimizer/level-1/optimize.js:429:82)
    at level1Optimize (/node_modules/html-loader/node_modules/clean-css/lib/optimizer/level-1/optimize.js:657:9)
    at optimize (/node_modules/html-loader/node_modules/clean-css/lib/clean.js:144:5)
    at /node_modules/html-loader/node_modules/clean-css/lib/clean.js:120:29
    at /node_modules/html-loader/node_modules/clean-css/lib/reader/read-sources.js:26:64
    at loadOriginalSources (/node_modules/html-loader/node_modules/clean-css/lib/reader/load-original-sources.js:26:5)
    at /node_modules/html-loader/node_modules/clean-css/lib/reader/read-sources.js:26:14
    at applySourceMaps (/node_modules/html-loader/node_modules/clean-css/lib/reader/apply-source-maps.js:34:5)
    at Object.callback (/node_modules/html-loader/node_modules/clean-css/lib/reader/read-sources.js:25:12)
    at doInlineImports (/node_modules/html-loader/node_modules/clean-css/lib/reader/read-sources.js:200:25)
    at inline (/node_modules/html-loader/node_modules/clean-css/lib/reader/read-sources.js:178:10)
    at fromStyles (/node_modules/html-loader/node_modules/clean-css/lib/reader/read-sources.js:151:5)
    at fromString (/node_modules/html-loader/node_modules/clean-css/lib/reader/read-sources.js:48:10)
    at doReadSources (/node_modules/html-loader/node_modules/clean-css/lib/reader/read-sources.js:33:12)
    at readSources (/node_modules/html-loader/node_modules/clean-css/lib/reader/read-sources.js:24:10)
    at /node_modules/html-loader/node_modules/clean-css/lib/clean.js:115:12
    at /node_modules/html-loader/node_modules/clean-css/lib/clean.js:135:34
    at minify (/node_modules/html-loader/node_modules/clean-css/lib/clean.js:114:35)
    at CleanCSS.minify (/node_modules/html-loader/node_modules/clean-css/lib/clean.js:77:12)
    at Object.options.minifyCSS (/node_modules/html-loader/node_modules/html-minifier/src/htmlminifier.js:667:50)
    at Object.chars (/node_modules/html-loader/node_modules/html-minifier/src/htmlminifier.js:1180:24)
    at /node_modules/html-loader/node_modules/html-minifier/src/htmlparser.js:230:19
    at String.replace (<anonymous>)
    at new HTMLParser (/node_modules/html-loader/node_modules/html-minifier/src/htmlparser.js:222:19)
    at minify (/node_modules/html-loader/node_modules/html-minifier/src/htmlminifier.js:966:3)
    at Object.exports.minify (/node_modules/html-loader/node_modules/html-minifier/src/htmlminifier.js:1326:16)
    at Object.module.exports (/node_modules/html-loader/index.js:128:26)
 @ ./node_modules/aurelia-materialize-bridge/dist/native-modules/colors/md-colors.js
 @ ./node_modules/aurelia-materialize-bridge/dist/native-modules/config-builder.js
 @ ./node_modules/aurelia-materialize-bridge/dist/native-modules/index.js
 @ ./app/main.js
 @ ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js
 @ multi aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry babel-polyfill aurelia-bootstrapper

modules: "webpack": "^4.41.2", "webpack-cli": "^3.3.10", "html-loader": "^0.5.5", "css-loader": "^3.2.0", "aurelia-webpack-plugin": "^4.0.0", "sass-loader": "^8.0.0", "mini-css-extract-plugin": "^0.8.0", .. "aurelia-materialize-bridge": "^1.4.1", "aurelia-framework": "^1.3.1", "materialize-css": "^1.0.0",

I can not understand what is missing or what the error in my configuration. No any other errors in prod mode. Please take a look and help me if you have time.

MaximBalaganskiy commented 4 years ago

Which version if the bridge did you use before? Seems that css optimization fails on these html files.

On Tue, Dec 3, 2019, 5:48 PM ApRoland notifications@github.com wrote:

Hello!

After migration to the last bridge version i faced with the following issues in md-colors-legacy.html and md-colors.html:

ERROR in ./node_modules/aurelia-materialize-bridge/dist/native-modules/colors/md-colors-legacy.html Module build failed (from ./node_modules/html-loader/index.js): TypeError: Cannot read property '1' of undefined at optimizeBody (/node_modules/html-loader/node_modules/clean-css/lib/optimizer/level-1/optimize.js:429:82) at level1Optimize (/node_modules/html-loader/node_modules/clean-css/lib/optimizer/level-1/optimize.js:657:9) at optimize (/node_modules/html-loader/node_modules/clean-css/lib/clean.js:144:5) at /node_modules/html-loader/node_modules/clean-css/lib/clean.js:120:29 at /node_modules/html-loader/node_modules/clean-css/lib/reader/read-sources.js:26:64 at loadOriginalSources (/node_modules/html-loader/node_modules/clean-css/lib/reader/load-original-sources.js:26:5) at /node_modules/html-loader/node_modules/clean-css/lib/reader/read-sources.js:26:14 at applySourceMaps (/node_modules/html-loader/node_modules/clean-css/lib/reader/apply-source-maps.js:34:5) at Object.callback (/node_modules/html-loader/node_modules/clean-css/lib/reader/read-sources.js:25:12) at doInlineImports (/node_modules/html-loader/node_modules/clean-css/lib/reader/read-sources.js:200:25) at inline (/node_modules/html-loader/node_modules/clean-css/lib/reader/read-sources.js:178:10) at fromStyles (/node_modules/html-loader/node_modules/clean-css/lib/reader/read-sources.js:151:5) at fromString (/node_modules/html-loader/node_modules/clean-css/lib/reader/read-sources.js:48:10) at doReadSources (/node_modules/html-loader/node_modules/clean-css/lib/reader/read-sources.js:33:12) at readSources (/node_modules/html-loader/node_modules/clean-css/lib/reader/read-sources.js:24:10) at /node_modules/html-loader/node_modules/clean-css/lib/clean.js:115:12 at /node_modules/html-loader/node_modules/clean-css/lib/clean.js:135:34 at minify (/node_modules/html-loader/node_modules/clean-css/lib/clean.js:114:35) at CleanCSS.minify (/node_modules/html-loader/node_modules/clean-css/lib/clean.js:77:12) at Object.options.minifyCSS (/node_modules/html-loader/node_modules/html-minifier/src/htmlminifier.js:667:50) at Object.chars (/node_modules/html-loader/node_modules/html-minifier/src/htmlminifier.js:1180:24) at /node_modules/html-loader/node_modules/html-minifier/src/htmlparser.js:230:19 at String.replace () at new HTMLParser (/node_modules/html-loader/node_modules/html-minifier/src/htmlparser.js:222:19) at minify (/node_modules/html-loader/node_modules/html-minifier/src/htmlminifier.js:966:3) at Object.exports.minify (/node_modules/html-loader/node_modules/html-minifier/src/htmlminifier.js:1326:16) at Object.module.exports (/node_modules/html-loader/index.js:128:26) @ ./node_modules/aurelia-materialize-bridge/dist/native-modules/colors/md-colors-legacy.js @ ./node_modules/aurelia-materialize-bridge/dist/native-modules/config-builder.js @ ./node_modules/aurelia-materialize-bridge/dist/native-modules/index.js @ ./app/main.js @ ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js @ multi aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry babel-polyfill aurelia-bootstrapper

ERROR in ./node_modules/aurelia-materialize-bridge/dist/native-modules/colors/md-colors.html Module build failed (from ./node_modules/html-loader/index.js): TypeError: Cannot read property '1' of undefined at optimizeBody (/node_modules/html-loader/node_modules/clean-css/lib/optimizer/level-1/optimize.js:429:82) at level1Optimize (/node_modules/html-loader/node_modules/clean-css/lib/optimizer/level-1/optimize.js:657:9) at optimize (/node_modules/html-loader/node_modules/clean-css/lib/clean.js:144:5) at /node_modules/html-loader/node_modules/clean-css/lib/clean.js:120:29 at /node_modules/html-loader/node_modules/clean-css/lib/reader/read-sources.js:26:64 at loadOriginalSources (/node_modules/html-loader/node_modules/clean-css/lib/reader/load-original-sources.js:26:5) at /node_modules/html-loader/node_modules/clean-css/lib/reader/read-sources.js:26:14 at applySourceMaps (/node_modules/html-loader/node_modules/clean-css/lib/reader/apply-source-maps.js:34:5) at Object.callback (/node_modules/html-loader/node_modules/clean-css/lib/reader/read-sources.js:25:12) at doInlineImports (/node_modules/html-loader/node_modules/clean-css/lib/reader/read-sources.js:200:25) at inline (/node_modules/html-loader/node_modules/clean-css/lib/reader/read-sources.js:178:10) at fromStyles (/node_modules/html-loader/node_modules/clean-css/lib/reader/read-sources.js:151:5) at fromString (/node_modules/html-loader/node_modules/clean-css/lib/reader/read-sources.js:48:10) at doReadSources (/node_modules/html-loader/node_modules/clean-css/lib/reader/read-sources.js:33:12) at readSources (/node_modules/html-loader/node_modules/clean-css/lib/reader/read-sources.js:24:10) at /node_modules/html-loader/node_modules/clean-css/lib/clean.js:115:12 at /node_modules/html-loader/node_modules/clean-css/lib/clean.js:135:34 at minify (/node_modules/html-loader/node_modules/clean-css/lib/clean.js:114:35) at CleanCSS.minify (/node_modules/html-loader/node_modules/clean-css/lib/clean.js:77:12) at Object.options.minifyCSS (/node_modules/html-loader/node_modules/html-minifier/src/htmlminifier.js:667:50) at Object.chars (/node_modules/html-loader/node_modules/html-minifier/src/htmlminifier.js:1180:24) at /node_modules/html-loader/node_modules/html-minifier/src/htmlparser.js:230:19 at String.replace () at new HTMLParser (/node_modules/html-loader/node_modules/html-minifier/src/htmlparser.js:222:19) at minify (/node_modules/html-loader/node_modules/html-minifier/src/htmlminifier.js:966:3) at Object.exports.minify (/node_modules/html-loader/node_modules/html-minifier/src/htmlminifier.js:1326:16) at Object.module.exports (/node_modules/html-loader/index.js:128:26) @ ./node_modules/aurelia-materialize-bridge/dist/native-modules/colors/md-colors.js @ ./node_modules/aurelia-materialize-bridge/dist/native-modules/config-builder.js @ ./node_modules/aurelia-materialize-bridge/dist/native-modules/index.js @ ./app/main.js @ ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js @ multi aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry babel-polyfill aurelia-bootstrapper

modules: "webpack": "^4.41.2", "webpack-cli": "^3.3.10", "html-loader": "^0.5.5", "css-loader": "^3.2.0", "aurelia-webpack-plugin": "^4.0.0", "sass-loader": "^8.0.0", "mini-css-extract-plugin": "^0.8.0", .. "aurelia-materialize-bridge": "^1.4.1", "aurelia-framework": "^1.3.1", "materialize-css": "^1.0.0",

I can not understand what is missing or what the error in my configuration. No any other errors in prod mode. Please take a look and help me if you have time.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/aurelia-ui-toolkits/aurelia-materialize-bridge/issues/559?email_source=notifications&email_token=AA4KNPHGHVXKD6QXA3ENGALQWX6KJA5CNFSM4JUS5DU2YY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4H5SCNWA, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA4KNPE6L2NEVESL2OGQSOLQWX6KJANCNFSM4JUS5DUQ .

ApRoland commented 4 years ago

The old bridge 0.34.3 I used before. I use the following loaders in webpack conf:

        {
          test: /\.js$/i, loader: 'babel-loader', exclude: nodeModulesDir,
        },
        // HTML:
        {test: /\.html$/i, use: 'html-loader'},
        // JSON:
        {test: /\.json$/i, loader: 'json-loader'},
        // Styles:
        {
          test: /\.css$/i,
          issuer: [{not: [{test: /\.html$/i}]}],
          use: env.extractCss ? [MiniCssExtractPlugin.loader, ...cssRules] : ['style-loader', ...cssRules],
        },
        {
          test: /\.(scss|sass)$/i,
          issuer: [{not: [{test: /\.html$/i}]}],
          use: env.extractCss ? [MiniCssExtractPlugin.loader, ...sassRules] : ['style-loader', ...sassRules]
        },
        {
          test: /\.css$/i,
          issuer: [{test: /\.html$/i}],
          use: cssRules,
        },
        {
          test: /\.(scss|sass)$/i,
          issuer: [{test: /\.html$/i}],
          use: sassRules
        },

where 

const cssRules = [
  {
    loader: 'css-loader',
    options: {
      sourceMap: true
    }
  },
  {
    loader: 'postcss-loader',
    options: {
      sourceMap: true,
      plugins: () => [require('autoprefixer')({ browsers: ['> 1%', 'last 2 versions', 'not ie < 11'] })]
    }
  }
];

const sassRules = cssRules.concat([
  {
    loader: 'sass-loader',
    options: {
      sourceMap: true
    }
  },
  {
    loader: 'sass-resources-loader',
    options: {
      resources: [
        './styles/_variables.scss',
        './styles/_mixins.scss',
        './styles/animation.scss',
      ]
    }
  }
]);

No issues in dev mode, only in prod.

MaximBalaganskiy commented 4 years ago

Post the whole config please. As I said, it's html loader optimization which most likely cannot handle bindings in html style tags

On Tue, Dec 3, 2019, 6:37 PM ApRoland notifications@github.com wrote:

The old bridge 0.34.3 I used before. I use the following loaders in webpack conf:

    {
      test: /\.js$/i, loader: 'babel-loader', exclude: nodeModulesDir,
    },
    // HTML:
    {test: /\.html$/i, use: 'html-loader'},
    // JSON:
    {test: /\.json$/i, loader: 'json-loader'},
    // Styles:
    {
      test: /\.css$/i,
      issuer: [{not: [{test: /\.html$/i}]}],
      use: env.extractCss ? [MiniCssExtractPlugin.loader, ...cssRules] : ['style-loader', ...cssRules],
    },
    {
      test: /\.(scss|sass)$/i,
      issuer: [{not: [{test: /\.html$/i}]}],
      use: env.extractCss ? [MiniCssExtractPlugin.loader, ...sassRules] : ['style-loader', ...sassRules]
    },
    {
      test: /\.css$/i,
      issuer: [{test: /\.html$/i}],
      use: cssRules,
    },
    {
      test: /\.(scss|sass)$/i,
      issuer: [{test: /\.html$/i}],
      use: sassRules
    },

where

const cssRules = [ { loader: 'css-loader', options: { sourceMap: true } }, { loader: 'postcss-loader', options: { sourceMap: true, plugins: () => [require('autoprefixer')({ browsers: ['> 1%', 'last 2 versions', 'not ie < 11'] })] } } ];

const sassRules = cssRules.concat([ { loader: 'sass-loader', options: { sourceMap: true } }, { loader: 'sass-resources-loader', options: { resources: [ './styles/_variables.scss', './styles/_mixins.scss', './styles/animation.scss', ] } } ]);

No issues in dev mode, only in prod.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/aurelia-ui-toolkits/aurelia-materialize-bridge/issues/559?email_source=notifications&email_token=AA4KNPCQOJKTRR24IZQXHFLQWYECPA5CNFSM4JUS5DU2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEFYMT2A#issuecomment-561039848, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA4KNPAC4QKRMG46CX3WGWDQWYECPANCNFSM4JUS5DUQ .

ApRoland commented 4 years ago

I don’t understand exactly what kind of optimization is it.. use the last version of html-loader like in https://github.com/aurelia-ui-toolkits/demo-materialize the whole config (nothing interesting i think):

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const { AureliaPlugin, ModuleDependenciesPlugin } = require('aurelia-webpack-plugin');
const { getHash } = require('./webpack/file-hash');
const webpack = require('webpack');

// config helpers:
const ensureArray = (config) => config && (Array.isArray(config) ? config : [config]) || [];
const when = (condition, config, negativeConfig) =>
  condition ? ensureArray(config) : ensureArray(negativeConfig);

// primary config:
const title = 'S';

const rootDir = path.resolve(__dirname);
const outDir = path.resolve(__dirname, 'target/dist');
const srcDir = path.resolve(__dirname, 'app');
const stylesDir = path.resolve(__dirname, 'styles');
const testDir = path.resolve(__dirname, 'test');
const localesDir = path.resolve(__dirname, 'locales');
const configDir = path.resolve(__dirname, 'config');
const nodeModulesDir = path.resolve(__dirname, 'node_modules');

const baseUrl = '/';
const serverPath = "/s/";
const assetsPath = "/s/assets/";

const proxyPort = 8999;
const devServerPort = 9000;
const backendUrl = `http://localhost:${proxyPort}`;

const cssRules = [
  {
    loader: 'css-loader',
    options: {
      sourceMap: true
    }
  },
  {
    loader: 'postcss-loader',
    options: {
      sourceMap: true,
      plugins: () => [require('autoprefixer')({ browsers: ['> 1%', 'last 2 versions', 'not ie < 11'] })]
    }
  }
];

const sassRules = cssRules.concat([
  {
    loader: 'sass-loader',
    options: {
      sourceMap: true
    }
  },
  {
    loader: 'sass-resources-loader',
    options: {
      resources: [
        './styles/_variables.scss',
        './styles/_mixins.scss',
        './styles/animation.scss',
      ]
    }
  }
]);

module.exports = (env, options) => {
  env = env || {
    extractCss: false,
    devServer: false,
    coverage: false
  };

  console.log('Env: ' + JSON.stringify(env, null, ' '));
  console.log('Options: ' + JSON.stringify(options, null, ' '));
  console.log(`Build mode: ${options.mode}`);

  const production = options.mode === 'production';
  const devServer = env.devServer;

  return {
    resolve: {
      extensions: ['.tsx', '.ts', '.js'],
      modules: [srcDir, nodeModulesDir],
      alias: {
        '/app': srcDir,
        '/test': testDir,
        '/styles': stylesDir
      }
    },
    devtool: production ? 'source-map' : 'cheap-module-eval-source-map',
    entry: {
      app: ['babel-polyfill', 'aurelia-bootstrapper'],
    },
    output: {
      path: outDir,
      publicPath: production ? assetsPath : baseUrl,
      filename: production ? '[name].[contenthash].bundle.js' : '[name].bundle.js',
      sourceMapFilename: production ? '[name].[contenthash].bundle.map' : '[name].bundle.map',
      chunkFilename: production ? '[name].[contenthash].chunk.js' : '[name].chunk.js',
    },
    devServer: {
      proxy: {
        [`${serverPath}**`]: {
          target: backendUrl,
          changeOrigin: true,
          secure: false,
          logLevel: 'debug',
          headers: {
            'X-Forwarded-Host': `localhost:${devServerPort}`,
            'X-Forwarded-Proto': 'http'
          }
        }
      },
      host: '0.0.0.0',
      disableHostCheck: true,
      port: devServerPort,
      noInfo: true,
      compress: true,
      contentBase: outDir,
      historyApiFallback: true
    },
    module: {
      rules: [
        // Assets: images, fonts etc
        {test: /\.(png|gif|jpg|cur)$/i, loader: 'url-loader', options: {limit: 8192}},
        {
          test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/i,
          loader: 'url-loader',
          options: {limit: 10000, mimetype: 'application/font-woff2'}
        },
        {
          test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/i,
          loader: 'url-loader',
          options: {limit: 10000, mimetype: 'application/font-woff'}
        },
        {test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'file-loader'},
        // JavaScript:
        {
          test: /\.js$/i, loader: 'babel-loader', exclude: nodeModulesDir,
          options: env.coverage ? {sourceMap: 'inline', plugins: ['istanbul']} : {},
        },
        {
          test: /\.ts?$/, use: 'ts-loader', exclude: nodeModulesDir,
        },
        // HTML:
        {test: /\.html$/i, use: 'html-loader'},
        // JSON:
        {test: /\.json$/i, loader: 'json-loader'},
        // Styles:
        {
          test: /\.css$/i,
          issuer: [{not: [{test: /\.html$/i}]}],
          use: env.extractCss ? [MiniCssExtractPlugin.loader, ...cssRules] : ['style-loader', ...cssRules],
        },
        {
          test: /\.(scss|sass)$/i,
          issuer: [{not: [{test: /\.html$/i}]}],
          use: env.extractCss ? [MiniCssExtractPlugin.loader, ...sassRules] : ['style-loader', ...sassRules]
        },
        {
          test: /\.css$/i,
          issuer: [{test: /\.html$/i}],
          use: cssRules,
        },
        {
          test: /\.(scss|sass)$/i,
          issuer: [{test: /\.html$/i}],
          use: sassRules
        },
      ]
    },
    optimization: {
      splitChunks: {
        cacheGroups: {
          commons: {
            test: /[\\/]node_modules[\\/]/,
            name: "vendor",
            chunks: "all"
          }
        }
      }
    },
    plugins: [
      new AureliaPlugin({
//      includeAll: "app"
      }),
      new ModuleDependenciesPlugin({
        'aurelia-ui-virtualization': [
          './virtual-repeat',
          './infinite-scroll-next'
        ],
        'aurelia-plugins-google-recaptcha': [
          './aurelia-plugins-google-recaptcha-element'
        ]
      }),
      new webpack.ProvidePlugin({
        'Promise': 'bluebird',
        '$': 'jquery',
        'jQuery': 'jquery',
        'window.jQuery': 'jquery',
        '_': 'lodash'
      }),
      new HtmlWebpackPlugin({
        template: 'index.ejs',
        minify: production ? {
          removeComments: true,
          collapseWhitespace: true
        } : undefined,
        metadata: {
          title, devServer, baseUrl
        },
      }),
      new CopyWebpackPlugin([
        {from: path.resolve(rootDir, 'images/favicon.ico'), to: path.resolve(outDir, 'favicon.ico')},
        {from: path.resolve(rootDir, 'images'), to: path.resolve(outDir, 'images')},
        {from: path.resolve(rootDir, 'locales'), to: path.resolve(outDir, 'locales')},
        {from: path.resolve(rootDir, 'config'), to: path.resolve(outDir, 'config')}
      ]),
      new webpack.DefinePlugin({
        BUILD_PUBLIC_PATH: JSON.stringify(production ? assetsPath : baseUrl),
        BUILD_PRODUCTION: production,
        BUILD_DEVELOPMENT: !production,
        BUILD_SERVER_PATH: JSON.stringify(serverPath),
        BUILD_LOCALES_HASH: JSON.stringify(getHash(localesDir)),
        BUILD_CONFIG_HASH: JSON.stringify(getHash(configDir))
      }),
      ...when(env.extractCss, new MiniCssExtractPlugin({
        filename: production ? '[name].[contenthash].css' : '[name].css',
        chunkFilename: production ? '[id].[contenthash].chunk.css' : '[id].chunk.css'
      })),
      // ...when(production, [
      //   new webpack.LoaderOptionsPlugin({
      //     minimize: true
      //   }),
      //   new CompressionPlugin()
      // ])
    ]
  }
}
MaximBalaganskiy commented 4 years ago

You must be running webpack with --optimize-minimize option. This enables html minification which cannot handle bindings in style tags.

MaximBalaganskiy commented 4 years ago

You can either use: { loader: "html-loader", options: { minifyCSS: false } } to disable CSS minification. Or build a more fancy minifyCSS function to handle those bindings.

ApRoland commented 4 years ago

Thanks a lot. I don't use option --optimize-minimize explicitly but yes minifyCSS: false helped to get prod build without errors.