Import multiple files in webpack entry point

[afdev82]

Hello,

I am trying to migrate my setup from sprockets to webpack using shakapacker.
I am already using shakapacker for a part of my project that is using React, now I would like to use it for a pure vanilla javascript part too.
Currently I use the following directive to automatically include all files under subdirectories in the javascript manifest file for the rails asset pipeline:

//= require_tree ./configurator/auto/

How could I do the same in my entry point file?
I have tried with the following snippet, but it doesn't work:

function importAll(r) {
  r.keys().forEach(r);
}

importAll(require.context('./configurator/core/auto/', true, /\.js$/));

It doesn't work, because in my view I get errors in the JS console saying some JS objects are missing (they are defined in the files I want to include).
Thank you in advance for your help or suggestions!

[tomdracz]

In general, the code you've attached would be the way I would expect to work to pull in all the files under a tree. Played around with this locally and all operating as expected

If you're getting view errors, I do wonder if something is trying to reference vars in the script before they are defined. Can you give some example of code that is referencing something you load from the included files or any reproduction case?

[afdev82]

Thank you for your reply.
I have checked the compiled file and the generated content was as expected (all the files in the directory and subdirectories are present), though other files are not included in the order that I have explicitly specified in the manifest (configurator_core.js).
As you have said, the error is in a file that has a reference to the object, but the problem is that I am including that file AFTER the previous code (and I have checked it's included AFTER in the generated file too):

function importAll(r) {
  r.keys().forEach(r);
}

importAll(require.context('./configurator/core/auto/', true, /\.js$/));

import './configurator/core/toolbox.js'

In the view I am getting the following error:

Uncaught TypeError: adNotam.configurator.configurations is undefined
js toolbox.js:185

If I search in the generated file (packs/js/configurator_core-4cece59d42bfb731e68c.js) the "adNotam.configurator.configurations" object gets called many times before that line (18599) and the object is defined at line 149, I don't understand what is the difference in that specific call.
Unfortunately I don't know how could I provide a reproduction case, because the problem seems to happen only for one call and I can't share to codebase.
After I define the object "adNotam.configurator.toolbox", I call "adNotam.configurator.configurations.events.on()".
I have something like that in the generated file packs/js/configurator_core-4cece59d42bfb731e68c.js:

/***/ "./app/javascript/configurator/core/toolbox.js":
/*!*****************************************************!*\
  !*** ./app/javascript/configurator/core/toolbox.js ***!
  \*****************************************************/
/***/ (function() {

/* global adNotam */

adNotam.configurator.toolbox = {
  ...
};
adNotam.configurator.configurations.events.on('init-done', $.proxy(adNotam.configurator.toolbox.init, adNotam.configurator.toolbox));

/***/ }),

If I comment the single import line (import './configurator/core/toolbox.js') I don't have any error in the console.

[tomdracz]

OK, I think I know why this is. Imports are hoisted to the top whilst requires are not.

I've tried a small repro like:

const importAll = (r) => r.keys().forEach(r);
importAll(require.context('../nested/', true, /\.js$/));
import '../src/reference_test'

And verified src/reference_test is loaded and evaluated before the importAll

To fix this and maintain the order, you can try changing your import to require like:

function importAll(r) {
  r.keys().forEach(r);
}

importAll(require.context('./configurator/core/auto/', true, /\.js$/));

require('./configurator/core/toolbox.js')

This should retain execution order and mean the toolbox.js file will only be loaded and executed after that importAll. Let me know if that works @afdev82

[afdev82]

The issue is solved in this way, thank you very much for your help!