How to add alias and externals in encore

[tristanbes]

Hello,

Since webpack is obscure to me, I'm giving encore a chance but i'm strugling with how to add an alias and externals entries

    resolve: {
      extensions: ['.js', '.json', '.vue'],
      alias: {
        Translator: 'node_modules/bazinga-translator/js',
      },
    },
    externals: {
      vue: 'Vue',
      vuex: 'Vuex',
      google: 'google',
      leaflet: 'L',
      markerclustererplus: 'MarkerClusterer',
      routing: 'Routing',
      app: 'app',
      translator: 'Translator',
    },

I tried ctrl+f in encore API but didn't found it :(

[tristanbes]

I tried

.autoProvideVariables({
  'window.Routing': 'routing',
})

But babel is creaming at me because it doesn't find the depandancies
import Routing from 'routing'; (which is the js exposed from https://github.com/FriendsOfSymfony/FOSJsRoutingBundle)

My previous settings with raw webpack externals settings was working :(

[tristanbes]

Ok, so it seems I can play with webpack configuration itself:

var config = Encore.getWebpackConfig();
config.watchOptions = { poll: 400, ignored: /node_modules/ };
config.externals = {
  vue: 'Vue',
  vuex: 'Vuex',
  google: 'google',
  leaflet: 'L',
  markerclustererplus: 'MarkerClusterer',
  routing: 'Routing',
  app: 'app',
  translator: 'Translator',
};

config.resolve.alias = {
  ...config.resolve.alias,
  Translator: 'node_modules/bazinga-translator/js',
};
// export the final configuration
module.exports = config;

Or maybe I missed something in the API ?

[Lyrkan]

Hi @tristanbes,

Currently there is no "helper method" to directly manipulate externals and aliases.

We add some aliases for Vue.js and Preact but that's all:

webpack-encore/lib/config-generator.js

Lines 78 to 90 in bcfbbfd

	config.resolve = {
	extensions: ['.js', '.jsx', '.vue', '.ts', '.tsx'],
	alias: {}
	};
	if (this.webpackConfig.useVueLoader) {
	config.resolve.alias['vue$'] = 'vue/dist/vue.esm.js';
	}
	if (this.webpackConfig.usePreact && this.webpackConfig.preactOptions.preactCompat) {
	config.resolve.alias['react'] = 'preact-compat';
	config.resolve.alias['react-dom'] = 'preact-compat';
	}

So if you really need them I guess you're doing it the right way :)

Note that you can also use FOSJsRoutingBundle without externals/aliases:

• What's the solution proposed for assets stored in bundles? #5 (comment)
• Integration with FOSJsRoutingBundle #97 (comment)

[weaverryan]

Adding aliases and externals seems common enough that I think it makes sense to add mutators to the Encore API. Wdyt @Lyrkan?

[Lyrkan]

Yep, we should probably implement addAliases() and addExternals() 👍

[ddproxy]

I'm struggling with adding aliases right now, I'd expect

config.resolve.alias = {
    'App': path.resolve('./app/Resources/src/App')
};

To resolve my import * from 'App/Module'; into ./app/Resources/src/App/Module.js (converting over from requirejs) but it doesn't seem to be picking it up, anywhere.

[Lyrkan]

Hi @ddproxy,

First thing to check: are you exporting the right config?

// Bad
const config = Encore.getWebpackConfig();
config.resolve.alias = { /* ... */ };
module.exports = Encore.getWebpackConfig();

// Good
const config = Encore.getWebpackConfig();
config.resolve.alias = { /* ... */ };
module.exports = config;

Then: is path.resolve() returning the right path? Try adding a console.log(...) in your webpack.config.js file to display it when running encore.

[ddproxy]

Adding a bit more information just in case, but yes I'm exporting the correct configuration object. At this point I'm mucking around the webpack config docs, tweaking different advanced settings (such as symlink: true)...

config.resolve.alias = {
    ...config.resolve.alias,
    'App': path.resolve('./app/Resources/src/App')
};

if (Encore.isProduction()) {
    config.plugins = config.plugins.filter(
        plugin => !(plugin instanceof webpack.optimize.UglifyJsPlugin)
    );

    config.plugins.push(new UglifyJsPlugin());
}

module.exports = config;

[ddproxy]

More information!

My App structure doesn't have index.js modules for each directory.

IE: App/Backbone/Backbone doesn't have
App/Backbone/index.js
App/Backbone/Backbone/index.js
files.

Using

config.resolve.alias['App'] = path.resolve(__dirname, './app/Resources/src/App');

according to the webpack docs (https://webpack.js.org/configuration/resolve/#resolve-alias) is supposed to map the following (shortened list)...

Alias	import from 'App/Backbone/Backbone'	import from 'App/Backbone/Backbone.js'
{ App: "/absolute/App" }	/absolute/App/Backbone/Backbone/index.js	/absolute/App/Backbone/Backbone.js

But, after some testing, (by adding an index.js) it doesn't work that way right off the back. If I were to use the App/Backbone/Backbone.js import - my errors go away... Not the fix I was looking for (plenty of imports to add 'js' to) but I can keep moving forward with this.

Edit: adding .js also didn't work... Just threw an error a bit further down.

[ddproxy]

Well, uh... This is embarrassing... It'd be nice if I used the right path. My issue is resolved now.