Wrong path fonts

[dayze]

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

[weaverryan]

Hey @dayze!

Can you post your webpack.config.js file and also the code for any relevant other files (like main.js)?

[dayze]

Hi,

webpack.config.js

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

Encore
// directory where should 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', './assets/js/main.js')


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


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

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


    .enableSourceMaps(!Encore.isProduction())



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

var webpackConfig = Encore.getWebpackConfig();
webpackConfig.module.rules.push({
    test: /\.vue$/,
    loader: 'vue-loader'
});
webpackConfig.module.rules.push({
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/
});

// export the final configuration
module.exports = webpackConfig;

main.js

import Vue from 'vue/dist/vue'
import App from './app.vue'

require('semantic-ui/dist/semantic.min.css')

Errors

GET http://localhost/build/fonts/icons.woff2 
GET http://localhost/build/fonts/icons.woff 
GET http://localhost/build/fonts/icons.ttf 

[heitorvrb]

Same issue here, with similar configuration. The situation seems to be that my app doesn't run on a ground-level domain, but on a alias on apache:

Alias /mySymfonyApp /var/www/html/mySymfonyApp/web

So webpack is trying to create the src: url() paths with /build/fonts/myFont.eot, when it should be /mySymfonyApp/build/fonts/myFont.eot.

webpack.config.js:

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

Encore
    .setOutputPath('web/build/')

    .setPublicPath('/build')

    .cleanupOutputBeforeBuild()

    .addEntry('app', './app/Resources/js/app.js')

    .addStyleEntry('global', './app/Resources/scss/global.scss')

    .enableSassLoader({
        resolve_url_loader: false
    })

    .autoProvidejQuery()

    .enableSourceMaps(!Encore.isProduction())
    
    // create hashed filenames (e.g. app.abc123.css)
    // .enableVersioning()
;

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

global.scss:

@charset 'utf-8';

$fi-path: "~foundation-icon-fonts/";

@import '~foundation-sites/assets/foundation';
@import '~foundation-icon-fonts/foundation-icons';

Resulting global.css:

// [...]

@font-face {
  font-family: "foundation-icons";
  src: url(/build/fonts/foundation-icons.eot);
  src: url(/build/fonts/foundation-icons.eot?#iefix) format("embedded-opentype"), url(/build/fonts/foundation-icons.woff) format("woff"), url(/build/fonts/foundation-icons.ttf) format("truetype"), url(/build/images/foundation-icons.svg#fontcustom) format("svg");
  font-weight: normal;
  font-style: normal; }

// [...]

localhost/build/fonts/foundation-icons.ttf obviously 404s, the correct path would be localhost/mySymfonyApp/build/fonts/foundation-icons.ttf

[weaverryan]

@heitorvrb Ah, thanks for the extra info! If you're deployed under a subdirectory, that should be reflected in your setPublicPath:

// this is your *true* public path
.setPublicPath('/mySymfonyApp/build')
// this is now needed so that your manifest.json keys are still `build/foo.js`
// i.e. you won't need to change anything in your Symfony app
config.setManifestKeyPrefix('build')

You can see an example of this in the tests as well:

webpack-encore/test/functional.js

Line 180 in db980b4

it('Deploying to a subdirectory is no problem', (done) => {

Webpack must be aware of the true public path, because if you use "code splitting", then webpack itself will make AJAX requests for assets (so it needs to know the real path). That's why the config lives in webpack.config.js, instead of allowing your app (i.e. Symfony) to "fix" the subdirectory.

Let me know if that helps! I'll open an issue on the docs about this.

[heitorvrb]

It worked. Thanks for the help.

[dayze]

It worked too, thanks !

[vctls]

What if my web root changes depending to the environment I'm deploying to?
On my local development environment, the web root will be /my-nth-app/web/build
whereas on the production server, it will just be /build.
What would be the recommended way to make this dynamic, or at least, configurable?

[Lyrkan]

@vctls Maybe you could use Encore.isProduction() to set the web root dynamically?

Encore.setPublicPath(Encore.isProduction() ? '/build' : '/my-nth-app/web/build');

[vctls]

@Lyrkan I will do that, thank you :)
It feels a little hacky, though. I wonder if there's any way of detecting the web root.

[scaytrase]

@Lyrkan what if I use artifact-based deploying and the builder do not really know where the artifact would be deployed to?

Is it possible just make path relative to manifest?

[Lyrkan]

Hi @scaytrase,

I guess you would need to call setPublicPath with a relative path... which isn't allowed right now:

webpack-encore/lib/WebpackConfig.js

Lines 122 to 127 in 7997206

	if (publicPath.includes('://') === false && publicPath.indexOf('/') !== 0) {
	// technically, not starting with "/" is legal, but not
	// what you want in most cases. Let's not let the user make
	// a mistake (and we can always change this later).
	throw new Error('The value passed to setPublicPath() must start with "/" or be a full URL (http://...)');
	}

@andyexeter had a similar issue here: #88 (comment)

We could probably add an allowRelativePath parameter to that method in order to disable that check... what do you think @weaverryan?

[scaytrase]

@Lyrkan commenting this error and passing relative path makes internal CSS files to import like

basedir/build/build/fonts/fontawesome.ttf

The build doubles since CSS file is placed inside the build and it calls relative build/fonts/.../

So we really need the possibility to rewrite the paths