Source Maps Failing in Dev

[raupie]

When using .enableSourceMaps(!Encore.isProduction()) I am getting a Uncaught SyntaxError: Unexpected token : error.

When I set source maps to false, it goes away.

Missing break line?

[Lyrkan]

More context based on what @raupie put on Slack:

• He's using Webpack 4
• The output file contains the following lines:

// (...)
}]);
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ(...)ZVJvb3QiOiIifQ==(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["_tmp_shared"],{
"../../../tmp/tmp-92SW7NIosJEwEF.tmp":
(function(module, exports, __webpack_require__) {
__webpack_require__( "./assets/js/global.js")
})
// (...)

It seems that a line-break is missing before (window["webpackJsonp"] = window["webpackJsonp"] || []).push([["_tmp_shared"],{ which causes it to be part of the source-map comment...

@raupie Do you have any additional info that could help reproducing the issue? For instance the content of your webpack.config.js?

[raupie]

webpack.config.js

const Encore = require('@symfony/webpack-encore');
const CopyWebpackPlugin = require('copy-webpack-plugin');

Encore
    .enableSingleRuntimeChunk()
    // the project directory where all compiled assets will be stored
    .setOutputPath('web/assets/')
    // the public path used by the web server to access the previous directory
    .setPublicPath('/assets')
    // empty the outputPath dir before each build
    .cleanupOutputBeforeBuild()
    // allow legacy applications to use $/jQuery as a global variable
    .autoProvidejQuery()
    // create hashed filenames (e.g. app.abc123.css)
    .enableVersioning(false)
    // trace bugs to original files
    .enableSourceMaps(false)
    //.enableSourceMaps(!Encore.isProduction())
    // allow sass/scss files to be processed
    .enableSassLoader()
    // Copy image assets to web folder
    .addPlugin(new CopyWebpackPlugin([{
        from: './assets/images/',
        to: 'images/'
    }]))
    // Front End Configuration
    // Global Framework Dependencies
    .createSharedEntry('global', './assets/js/global.js')
    // Site Theme
    .addStyleEntry('main', './assets/css/main.css')
    // Homepage Feature
    .addStyleEntry('homepage', './assets/css/homepage.css')
    // Forms Feature
    .addEntry('forms', './assets/forms/app.js')
    // Product Feature
    .addEntry('prodpage', './assets/js/prod-page.js')
;

module.exports = Encore.getWebpackConfig(); 

global.js

// libraries
require('jquery');
require('what-input');
require('foundation-sites');

// css
require('../css/global.scss');

// initiate foundation framework
$(document).foundation();

prod-page.js

// require css
require('datatables.net-zf/css/dataTables.foundation.css');
require('datatables.net-responsive-zf/css/responsive.foundation.css')
require('../css/prod-page.css');

// require datatables library
require('datatables.net-zf')();
require('datatables.net-responsive-zf')();

$(document).ready(function(){
    $('#configurations').DataTable({responsive: true});
    //  console.log('this is where the table is supposed to get inited');
});

Trying to use foundation + datatables. Compile is now failing with ModuleNotFoundError: Module not found: Error: Can't resolve '../images/sort_asc.png' in '/var/www/html/project/ezplatform/node_modules/datatables.net-zf/css'

[Lyrkan]

I did a quick check and could reproduce it with the following config and an empty shared.js file:

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

Encore
    .disableSingleRuntimeChunk() // Doesn't seem to matter
    .setOutputPath('build')
    .setPublicPath('/build')
    .cleanupOutputBeforeBuild()
    .enableSourceMaps(!Encore.isProduction())
    .createSharedEntry('shared', './shared.js')
;

module.exports = Encore.getWebpackConfig();

Extract from the final shared.js in dev mode:

//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJ(...)2VSb290IjoiIn0=/******/ (function(modules) { // webpackBootstrap