The output of the command running in functional tests should not be sent to the test runner output.

Webpack-encore configuread like many other nodejs build tools - by writing code. But this looks so strange in Symfony's ecosystem. We don't write $routeCollection->add(new Route('/about')) usually). We are using configuration by yml/xml.

Why not create semantic configuration like in https://github.com/romanschejbal/gassetic or even just reuse Gassetic? See also romanschejbal/gassetic#62 for alternative integration of Gassetic with Symfony.

Hello guys, I am totally new to encore and yarn. I follow the doc in symfony.com to begin managing assets with encore. However, there are something I am not sure when I deploy to a production server, like: should I run yarn install --production? how can I compress js file? A documentation or a guild about doploying in production in detail will be nice to us newbies

I'm trying to figure it out how to setup aliases and everything from this webpack config for loading quilljs editor. maybe you guys have an idea or something.

Var path = require ('path');

Module.exports = {
  Entry: "./app.js",
  Output: {
    Path: __dirname + "/dist",
    Filename: "bundle.js"
  }
  Resolve: {
    Alias: {
      'Parchment': path.resolve(__ dirname, 'node_modules/parchment/src/parchment.ts'),
      'Quill $': path.resolve(__ dirname, 'node_modules/quill/quill.js'),
    }
    Extensions: ['.js', '.ts', '.svg']
  }
  Module: {
    Rules: [{
      Test: /\.js$/,
      Use: [{
        Loader: 'babel-loader',
        Options: {
          Presets: ['es2015']
        }
      }],
    }, {
      Test: /\.ts$/,
      Use: [{
        Loader: 'ts-loader',
        Options: {
          CompilerOptions: {
            Declaration: false,
            Target: 'es5',
            Module: 'commonjs'
          }
          TranspileOnly: true
        }
      }]
    }, {
      Test: /\.svg$/,
      Use: [{
        Loader: 'html-loader',
        Options: {
          Minimize: true
        }
      }]
    }]
  }
}

Hi Guys,

Comma missed in the latest tag of index.js at line 360. Encore was not running.

Please do the changes at.
enableTypeScriptLoader(callback) {
webpackConfig.enableTypeScriptLoader(callback);
}

Getting error message SyntaxError: Unexpected identifier
enableVueLoader(vueLoaderOptionsCallback = () => {}) {

Another question asked on Symfony Slack (@jderusse asked it):

regarding the new Encore component and asset versioning (http://symfony.com/doc/current/frontend/encore/versioning.html) what is the simplest strategy to avoid 404 during a deployment (1) user gets http page pointing to asset version A, 2) a new version B of the app is deployed, 3) user ask for asset A which no longer exists)
Why not using a "queryString" strategy like describe in http://symfony.com/doc/current/frontend/custom_version_strategy.html

I'm trying to attach dependencies and group them into the createSharedEntry method: the result is:

Uncaught ReferenceError: webpackJsonp is not defined
At app.js: 1

In app.js:

webpackJsonp([2],[
/* 0 */,
/* 1 */
/***/ (function(module, exports, __webpack_require__) {

var $ = __webpack_require__(0);

$(document).ready(function () {
    alert('trying');
});

/***/ })

My package.json:

{
  "dependencies": {},
  "devDependencies": {
    "@symfony/webpack-encore": "^0.7.2",
    "jquery": "^3.2.1"
  },
  "scripts": {
    "dev": "./node_modules/.bin/encore dev",
    "watch": "./node_modules/.bin/encore dev --watch",
    "prod": "./node_modules/.bin/encore production"
  }
}

My webpack.config.js:

// webpack.config.js
var Encore = require('@symfony/webpack-encore');

Encore
// directory where all compiled assets will be stored
    .setOutputPath('web/build/')

    // what's the public path to this directory (relative to your project's document root dir)
    .setPublicPath('/build')

    // empty the outputPath dir before each build
    .cleanupOutputBeforeBuild()

    // will output as web/build/app.js
    .addEntry('app', './web/assets/js/main.js')

    // will output as web/build/global.css
    .addStyleEntry('global', './web/assets/css/global.scss')

    .createSharedEntry('vendor', ['jquery'])

    // allow sass/scss files to be processed
    .enableSassLoader()

    // allow legacy applications to use $/jQuery as a global variable
    .autoProvidejQuery()

    .enableSourceMaps(!Encore.isProduction())

    // create hashed filenames (e.g. app.abc123.css)
    // .enableVersioning()
;

// export the final configuration
module.exports = Encore.getWebpackConfig();

If I remove the createSharedEntry method from the error and compile again, the error disappears and the app.js starts like this:

/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}

When I include semantic or bootstrap in my main.js I end up with a 404 not found error for the fonts

Apparently, the output path of fonts go to the root of my web server like this

http://localhost/build/fonts/icons.woff2

I need to define a resolve alias see
https://webpack.js.org/configuration/resolve/

To use the following plugin
https://github.com/RobinHerbots/Inputmask#selecting-the-dependencylib

How can i do this?

I have problem with providing jQuery as var to global scope for legacy js code.

main.js

var $ = require('jquery');
window.$ = window.jQuery = $;

webpack-config.js

var Encore = require('@symfony/webpack-encore');

Encore
    // directory where all compiled assets will be stored
    .setOutputPath('mainsites/build/')

    // what's the public path to this directory (relative to your project's document root dir)
    .setPublicPath('/build')

    // empty the outputPath dir before each build
    .cleanupOutputBeforeBuild()

    // will output as web/build/app.js
    .addEntry('app', './assets/js/main.js')

    // allow legacy applications to use $/jQuery as a global variable
    .autoProvidejQuery()

    .enableSourceMaps(!Encore.isProduction())

    // create hashed filenames (e.g. app.abc123.css)
    .enableVersioning()
;

// export the final configuration
module.exports = Encore.getWebpackConfig();

package.js

{
  "name": "schoolm",
  "version": "0.0.1",
  "license": "UNLICENSED",
  "private": true,
  "dependencies": {
    "jquery": "^2.1.4",
  },
  "devDependencies": {
    "@symfony/webpack-encore": "github:symfony/webpack-encore"
  }
}

html

<?php
$webpackConfig = json_decode(file_get_contents(__DIR__ . '/../mainsites/build/manifest.json'), true);
?>
<script src="<?php echo $webpackConfig['build/app.js']; ?>"></script>

chrome console

> jQuery
VM117:1 Uncaught ReferenceError: jQuery is not defined
    at <anonymous>:1:1
(anonymous) @ VM117:1
> $
function ( selector, context ) {
		// The jQuery object is actually just the init constructor 'enhanced'
		// Need init if jQuery is called (just allow error to be thrown if not included)
		return new jQuery.…

Consider the following part of the documentation:

http://symfony.com/doc/current/frontend/encore/simple-example.html#requiring-css-files-from-javascript

If we have a chain of requirements (i.e maybe including 3rd-parties) and some of the link in this chain requires a stylesheet - the stylesheet would be created, but we cannot know it until investigated the whole chain of requirements (or find out that app.css was generated occasionally).

To resolve this some kind of asset_exist function could be introduced to check, whether the app.css file was generated and include it.

<link rel="stylesheet" href="{{ asset('build/global.css') }}">
+ {% if asset_exist('build/app.css') %}
+   <link rel="stylesheet" href="{{ asset('build/app.css') }}">
+ {% endif %}

This would allow to include this snippet unconditionally and when the file appears - it will work automatically

I'm know that this can be reported to Asset or TwigBridge component, but since I'm referencing the Encore documentation, I post it here first, maybe another solution would be suggested.

If I need a dependency the system warns me of the error and tells me what to do:

To install them, you can run: npm install --save font-awesome

If I run: npm install --save font-awesome and I need to compile again with Encore:

- ./node_modules/.bin/encore dev
- No such file or directory: ./node_modules/.bin/encore

Currently, we default a browser list config for babel-preset-env. I'm not sure if it's possible yet (babel/babel-preset-env#161), but it would be great if we allowed this to be configured via the browserslist config key in package.json (https://github.com/ai/browserslist).

I'm trying to fix an issue with the Symfony Demo app (symfony/demo#590) which requires to override the value of a Sass variable defined in one of our dependencies.

The original assets/app.scss file that works starts like this:

@import "~bootswatch/flatly/variables";
@import "~bootstrap-sass/assets/stylesheets/bootstrap";
@import "~bootswatch/flatly/bootswatch";
@import "~font-awesome/scss/font-awesome.scss";
// ...

I need to override this variable which is defined in ~bootswatch/flatly/bootswatch:

$web-font-path: "https://fonts.googleapis.com/css?family=Lato:400,700,400italic" !default;

The fix that I'm trying to apply is defining the variable before importing the file using it:

$web-font-path: '';

@import "~bootswatch/flatly/variables";
@import "~bootstrap-sass/assets/stylesheets/bootstrap";
@import "~bootswatch/flatly/bootswatch";
@import "~font-awesome/scss/font-awesome.scss";
// ...

But I see this confusing error message:

$ ./node_modules/.bin/encore dev

Running webpack ...

 ERROR  Failed to compile with 1 errors

This dependency was not found:

* -!../../node_modules/css-loader/index.js!./ in ./~/css-loader!./~/resolve-url-loader!./~/
sass-loader/lib/loader.js?{"sourceMap":true}!./assets/scss/app.scss

To install it, you can run: npm install --save -!../../node_modules/css-loader/index.js!./
    + 190 hidden modules

• Webpack 3
• For usage with next LTS version of node (8); which now include a lock file similar to yarn
• sync additional dependencies ( probably need to wait until some been updated to work with Webpack 3 )

Hi.
I've 2 different images with same name:

assets/images/some.png
assets/another_images/some.png

In scss file i use both. File-loader copy only first image and skips second.
I have to rewrite the rule in config-generator.js to:

{
                test: /\.(png|jpg|jpeg|gif|ico|svg)$/,
                loader: 'file-loader',
                options: {
                    name: `images/[name]_[md5:hash:hex:3]${this.webpackConfig.useVersioning ? '.[hash]' : ''}.[ext]`,
                    publicPath: this.webpackConfig.getRealPublicPath()
                }
            }

But is this a right way ?
Second question: how can i overwrite that rule in webpack.config.js ?

  "build/images\\icon-view.png": "/build/images/icon-view.png",
  "build/images\\logo-big-white.png": "/build/images/logo-big-white.png",

with that files JsonManifestVersionStrategy does not work correct

When an error is thrown inside WebpackConfig.js, it falls outside of the try-catch used inside of getWebpackConfig() (

To reproduce, in any JavaScript file:

require('./foo.json');

As there is no loader configured for .json files, you'll get an error:

This relative module was not found:

• ./foo.json in ./app/Resources/assets/js/app.js

This makes it appear that the file wasn't found. The bug is actually inside of friendly-errors-webpack-plugin: geowarin/friendly-errors-webpack-plugin#32

https://github.com/symfony/recipes

The friendly-errors-webpack-plugin has a built-in transformer/formatter for when a module is missing. To see the behavior, try (in any JavaScript file):

require('foo'); // foo is not a module that is installed

The error is:

This dependency was not found:

• foo in ./app/Resources/assets/js/app.js
  To install it, you can run: npm install --save foo

The problem is the npm install part... which should be yarn add to avoid confusion with our users. There is an issue about this: geowarin/friendly-errors-webpack-plugin#33

Hi,
I'm trying to use webpack-encore in my Symfony3 project with this doc but when I execute:
./node_modules/.bin/encore dev-server

I'm getting this error:

path.js:7
    throw new TypeError('Path must be a string. Received ' + inspect(path));
    ^

TypeError: Path must be a string. Received undefined
    at assertPath (path.js:7:11)
    at Object.join (path.js:1211:7)
    at find (/Users/xxx/Sites/tp/node_modules/babel-loader/lib/resolve-rc.js:11:21)
    at module.exports (/Users/xxx/Sites/tp/node_modules/@symfony/webpack-encore/lib/config/parse-runtime.js:64:47)
    at Object.<anonymous> (/Users/xxx/Sites/xxx/tp-trepia/node_modules/@symfony/webpack-encore/bin/encore.js:18:23)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)

My config:
macOS Sierra 10.12.5
node -v -> v6.11.0
npm -v -> 3.10.10

Looking on google, some people advise to downgrade to node v5 but the same error appears.

Thanx

Hello Symfonyians,
is there any plans to add service workers + sw precache support ? it would be very handy feature

In getContentBase(webpackConfig) some validation is done against outputPath and publicPath.

I think this validation is checking too much and restricting use cases possible. Could we relax this to be a warning and not error?

My use case is:
Project with custom publishing strategy. Webpack is compiling into intermediate path which is then "published" to real publicPath. As consequence I am facing the error thrown in line 52

I think the validation should not be affected by outputPath since this can (or shall we allow it?) be anything.

I have found some other issue #59 and its PR #66 that might be related to same problem.

Does all this makes sense?

I start the Encore ./node_modules/.bin/encore dev and get this error:

/home/kribeetko/PhpstormProjects/ESUNZ/node_modules/@symfony/webpack-encore/index.js:378
enableVueLoader(vueLoaderOptionsCallback = () => {}) {
^^^^^^^^^^^^^^^
SyntaxError: Unexpected identifier
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object. (/home/kribeetko/PhpstormProjects/ESUNZ/webpack.config.js:1:76)

My webpack.config.js:

let Encore = require("@symfony/webpack-encore");

Encore
    .setOutputPath('web/build/')
    .setPublicPath('/build')
    .cleanupOutputBeforeBuild()
    .addEntry('scripts', './assets/app.js')
    .addStyleEntry('styles', './assets/app.scss')
    .enableVersioning()
    .enableSassLoader({
        resolve_url_loader: false
    })
    .enablePostCssLoader()
    .autoProvidejQuery()
    .autoProvideVariables({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
    })
    .configureBabel(function(babelConfig) {
        babelConfig.presets.push('es2017');
    })
    .enableSourceMaps(!Encore.isProduction());

module.exports = Encore.getWebpackConfig();

Hi,

I'm trying to get encore dev-server to work inside a docker container.

I noticed at first that it listens only on the container's loopback interface ('localhost'), which was OK, because I could use --host 0.0.0.0 to get it to listen on the proper network interface...

But when I do this the manifest.json ends up using http://0.0.0.0:8080/.... as it's url prefix, and this stops the assets from loading.

I tried the --public ... flag to set a hostname for the public URL, but that doesn't seem to affect manifest generation.

How can I do this?

Thanks.

I can't find how javascript is being minified in production or what additional options we can give it (e.g. stripping special comments).

Hello,
watch option doesn't work with docker machine and nfs.
cf : http://andrewhfarmer.com/webpack-watch-in-vagrant-docker/

How can I add this config

watchOptions: { poll: true }
Thank

I tried to follow the instructions on Symfony blog, but I'm getting the following error:

garak@xps:~/sf/garak3$ ./node_modules/.bin/encore dev
Running webpack ...

/home/garak/sf/garak3/node_modules/@symfony/webpack-encore/index.js:140
    enableVersioning(enabled = true) {
                             ^

SyntaxError: Unexpected token =
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:374:25)
    at Object.Module._extensions..js (module.js:417:10)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/home/garak/sf/garak3/webpack.config.js:1:76)
    at Module._compile (module.js:410:26)
    at Object.Module._extensions..js (module.js:417:10)

I'm trying to use the "foundation-datepicker" package and getting "TypeError: $ is undefined".

app/Resources/js/app.js:

require('foundation-sites');
require('foundation-datepicker/js/foundation-datepicker.js');
[...]

.autoProvidejQuery() is enabled in webpack.config.js. .autoProvidejQuery() works with other jQuery-dependant packages, but when I add this one, it gives the error.

Could it be something in the package? According to the browser profiler, the guilty lines in foundation-datepicker.js are:

! function($) {

[...]

$.fn.fdatepicker = function(option) {

[...]

What should I do? Sorry if this is not very webpack-encore specific.

This should be easily possible for React and Vue.js (at least). It's not currently possible with CSS, because we're using ExtractTextWebpackPlugin all the time.

See #31. It's currently illegal to install Encore globally. We should do our best to give a clear error when this happens.

When trying to use foundation I ran in to problem where I have to add custom include paths.
Adding them as options is not working as only resolve_url_loader is a valid option.

I tried to follow the instructions on Symfony blog, but when i tried to build:

C:\projects\webpack-encore>encore dev
Running webpack ...

C:\projects\webpack-encore\node_modules\@symfony\webpack-encore\index.js:11
    throw new Error('Are you trying to require index.js directly?');
    ^

Error: Are you trying to require index.js directly?
    at Object.<anonymous> (C:\projects\webpack-encore\node_modules\@symfony\webpack-encore\index.js:11:11)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (C:\projects\webpack-encore\webpack.config.js:2:14)
    at Module._compile (module.js:570:32)

what am I doing wrong?

How can i include js files based on variable for example language.

Should i add a entry for each language?

According to this section we can improve significantly the compilation speed by setting transpileOnly = true, though this require using another plugin for the type checking which does it in a separate process.

Until now I have been using fork-ts-checker-webpack-plugin. I was planning to make a PR for adding it.

Today I also found ts-checker-webpack-plugin but plugin doesn't seem to be as healthy as the other one, still exists to solve some issues with the previous.

Could we discuss to bring ideas to the table?

thanks in advance.

Webpacks supports 3 different kinds of exports for its config:

• a config object, which is what Encore generates
• an array of config objects, which will then be similar to running webpack multiple times (once per config) but in a single run. This is handy when you want to isolate different shared entries entirely for instance.
• a promise resolving to one of the previous format (handy to allow building the config asynchronously if you need to load it from elsewhere)

Encore does not need to do anything special to support promises. People needing this could simply use Encore inside their promise.

However, Encore currently cannot be used for the array case (at least not without accessing internal APIs). This is because the public API of Encore is currently built around a stateful singleton.
Note that all internal APIs are ready for that though, as they rely on a non-singleton WebpackConfig object.

When following the first example in documentation you will end up with this error on windows

Error: Cannot determine how to prefix the keys in manifest.json. Call Encore.setManifestKeyPrefix() to choose what path (e.g. build/) to use when building your manifest keys. This is caused by setOutpu
tPath() and setPublicPath() containing paths that don't seem compatible.

This is reproduce able by creating an empty directory and following:

1. execute $ yarn add @symfony/webpack-encore --dev
2. create webpack.config.js file with contents found on http://symfony.com/doc/current/frontend/encore/simple-example.html
3. creating assets/js/main.js & assets/css/global.scss
4. execute ./node_modules/.bin/encore dev

A question by @jrobeson on Symfony Slack:

So, with the manifest file approach for versioning, how are static assets handled? like referenced images that aren't in CSS.

I was previously using the hashed-asset-bundle, but you can't use the new manifest versioning with it.

On Symfony Slack some people are concerned about Encore and bundles' assets. The issue is that Encore expects all assets to be stored in the same location. What about in-app bundles then? And what about third-party bundles?

In-app bundles is a minor issue because Symfony 4 (released on November 2017) will remove them ... but third-party bundles will still exist.

As this package is used as a library by others, we have no guarantee that they will install dependencies being exactly the same than our locked deps.
So it would be great to have some CI job resolving deps separately from the lock.

We need to figure out what the Node.js best practices around that are, and apply them on our CI.

From README.

HappyPack makes webpack builds faster by allowing you to transform multiple files in parallel.

Would be nice if we bring ideas on how to integrate best this, since it changes the way the loaders are declared. And also is good to get agreement on degree of integration.

Some points:

• When happypack is enable. All loaders will use it? or do we want to use it for some loaders instead?
• The same apply to happypack configuration options. Ex. Same amount of threads for all loaders?
• All of the previous influences on how many plugin instances will be added to configuration.

Some resources for reading
https://github.com/amireh/happypack/tree/master/examples

My five cents goes for a per loader configuration. Every loader can use it or not when enabled. this will add as many plugin instances as loaders we use, but in my opinion provides flexibility on loaders usage.

thanks in advance.

HI!
// todo - options here should be configurable
new webpack.optimize.UglifyJsPlugin({
sourceMap: this.webpackConfig.useSourceMaps
})

Can you make it optional/configurable? I have an error:
app.b452c69496e2c9f0cbd2.js from UglifyJs

I don't know if it's a issue related with encore or webpack，I am new to both.

this error occurs after I add

    .addEntry('for-ie', 'respond.js')

to webpack.config.js

there is no problem when I add some other other libs like html5shiv.

Is there a ways to controll order of compilation for entries?

I am facing this problem: "Error: Bootstrap tooltips require Tether (http://github.hubspot.com/tether/)"

My sharedEntry is declared as follows:

.createSharedEntry('js/vendor', ['jquery', 'jquery-ui', 'jquery-match-height',
        'jquery-smooth-scroll', 'tether', 'bootstrap/dist/js/bootstrap',
        'multiselect', 'swiper', 'footable/compiled/footable'
    ])

is clear that webpack is not including/compiling libraries in proper order.

Current solution is to include library in separate script tag before bootstrap. But this is not the desired solution.

Any ideas on how to overcome this?