require.ensure not working after moving webpack from root directory

211 views Asked by At

I used to have a folder structure like this:

[development]
--[app]
----[dist]
------[js]
--------app.js
--------contact-support.0.js
----[src]
--[node_modules]
--package.json  
--webpack.config.js
--index.php
[tools]

but moved everything related to webpack from root directory to tools/webpack:

[development]
--[app]
----[dist]
------[js]
--------app.js
--------contact-support.0.js
----[src]
--index.php
[tools]
--[webpack]
----[node_modules]
----package.json  
----webpack.config.js

So I run webpack now from tools/webpack and most of paths in webpack.config.js are preceeded by ./../../development.

And everything works, apart from those dang chunks (created by require.ensure()).

I have no errors on webpack compile and no errors in Chrome's console, but when I stumble on part of code that dynamically loads a chunk I get:

Uncaught (in promise) TypeError: Cannot read property 'call' of undefined(…)

I know it doesn't tell much, but from my experience for 99% it has to be related to webpack's path handling.

The devil is hidden here:

output:  {
  chunkFilename: './../../development' + '/app/dist/js/[name].[id].js',
  publicPath:    'http://localhost/YDR/branches/refactoring/tools/webpack/'
},

The problem is that when webpack generates the chunk file it is done in different directory (./tools/webpack/) than when app tries to load it (./development/), so I cannot use relative paths and need be little hacky here.

Theoretically these paths are correct:

  • on save: the path in which the chunk file is saved is the path from where I'm running webpack (tools/webpack which is same as publicPath), but elevated 2 levels up to http://localhost/YDR/branches/refactoring/development/app/dist/js/

  • on load: the path from which I load the chunk file is generated from publicPath + chunkFilename which also resolves to http://localhost/YDR/branches/refactoring/development/app/dist/js/

However, it still breaks when I reach:

module.exports = (function () {
    $('document').ready(function () {
        $('body').on('click', '[data-target="#contactSupport"]', function () {
            require.ensure([
                './../modules/contact-support/contact-support.js' // files that chunk will contain
            ], (require) => {
                require('./../modules/contact-support/contact-support.js'); // BREAKS HERE
            }, 'contact-support'); // name of chunk file
        });
    });
})();
0

There are 0 answers