Search code examples
angularjswebpackwebfontslaravel-elixir

gulp --production laravel elixir fails on webfonts


I'm using Laravel 5.3 elixir to mix the assets, my js app in angular generally. Webpack is behind it. Everything runs, files compile to single app.js , even my css is there. I use bootstrap to skin the app. But when I run gulp --production it fails because of parsing/uglyfing webfont.

Error: Unexpected token: operator (<)',
  fileName: '/home/user/www/laravel/89889688147bd7575d6327160d64e760.svg',
  lineNumber: 1,
  stack: 'Error\n    at new JS_Parse_Error (eval at <anonymous> (/home/arek/www/laravel/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1534:18)\n 

My gulpfile is easy:

const elixir = require('laravel-elixir');

elixir(mix => {
    mix.webpack('app.js')
    .browserSync({
        'proxy': 'http://localhost:8000'
    })
    ;
});

And inside my app.js I just import css of bootstrap (of course I use css loader for webpack).

import 'bootstrap/dist/css/bootstrap.css';

import angular from 'angular';
import uirouter from 'angular-ui-router';

import routing from './app.config';
import login from './features/login';

angular.module('app', [uirouter, login]).
config(routing);

Have you had simillar issue with new elixir, or with webpack? Maybe I'm missing some configuration?


Solution

  • It seems, that using paths inside css were the issue. https://github.com/webpack/webpack/issues/597 explained a lot. Now my asset loader(test var) looks like

    test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,

    instead of

    test: /\.(svg|woff|woff2|ttf|eot)$/,