Develop Reference

How to troubleshoot missing external libraries from Webpack UMD build? Chrome console shows defined variable while code breaks with undefined variable

I am trying to create a reusable d3 library, building the code with Babel 7 and then bundling a JS file with Webpack with UMD output. On Webpack config d3 is set as an external library:
externals: {
d3: 'd3',
...
On a simple HTML file I load d3, react and react-dom with <script> tags and everything is loaded fine. I have no errors inside my library on the React wrapper, yet calling any function of d3 says that it is undefined. With a breakpoint on that code line, running on Chrome console the code d3.min(data) returns -46, the same as calling it outside of my library, but when I run the line of code I get the error:
processDataset.js:8 Uncaught TypeError: Cannot read property 'min' of undefined
at processDataset (processDataset.js:8)
at VizService.setData (VizService.js:14)
at new VizService (VizService.js:8)
at new MiniVisual (MiniVisual.js:24)
at color-coded-bar.html:26
I have tried to set window.d3 = d3;, loading different d3 versions but nothing changes. How does the console of the Chrome devtools fail to give a correct output? What am I missing here? Maybe the problem is being obfuscated by the source mapping done by Chrome, how can I disable it and do proper debbuging?
The original processDataset.js:
import d3 from 'd3';
function processDataset(data, { scale = 'linear', range }) {
const dataMin = d3.min(data);
// Rest of the code...
}
export default processDataset;

Rendering a twig template in a Chrome extension

I'm trying to render a twig (with twigjs) template within a chrome extension. I'm currently compiling the following typescript with a browserify build script.
import * as twig from "twig"
const MAIN_TEMPLATE: string = chrome.runtime.getURL("twig/main.html.twig");
document.addEventListener("DOMContentLoaded", () => {
twig.renderFile(MAIN_TEMPLATE, (err: Error, html: string) => {
document.querySelector("body").innerHTML = html;
});
});
I've made sure to include the files in my manifest.json, as such.
...
"web_accessible_resources": [
"twig/*.html.twig"
]
...
However, upon running this, I get the following stacktrace. I'm not really sure what to do, as the URL that chrome.runtime.getURL returns does resolve if I punch it into my address bar.
Uncaught TypeError: t.stat is not a function
at Object.<anonymous> (twig.js:1)
at Object.e.Templates.loadRemote (twig.js:1)
at Object.e.exports.twig (twig.js:1)
at Object.e.exports.renderFile (twig.js:1)
at HTMLDocument.<anonymous> (browser-action.ts:7)

Digging through some of the twigjs source code, it looks like it was a mistake of mine to use the renderFile helper. This is more correct.
const MAIN_TEMPLATE_URI: string = chrome.runtime.getURL("twig/main.html.twig");
const MAIN_TEMPLATE: twig.Template = twig.twig({href: MAIN_TEMPLATE_URI, async: false};
document.querySelector("body").innerHTML = MAIN_TEMPLATE.render({tabs, tabListTemplate: TAB_LIST_TEMPLATE_URI});
I used async false since it's only going to be getting from a local connection, so there really shouldn't be any lag loading the template synchronously.

ES6 Dynamic Imports using Webpack and Babel

I've been using Webpack for my ES6 JS project and has been going well until I started to play with dynamic imports.
What I had that worked (router.js):
import { navigo } from "Navigo"; // router
import { clients } from "Controllers/clients.js";
const navigo = new Navigo();
navigo_router.on({
'/clients': () => {
clients.init();
}
});
But the more pages/routes I add, the more imports get stacked up in the head of the module. This is a relatively large app and I have a lot of pages/routes to add and therefore I need to load them dynamically to reduce the size of the initial page load.
So, following Webpack's documentation for dynamic imports, I tried the following which loads the controller module only when the relative route is called:
import { navigo } from "Navigo"; // router
const navigo = new Navigo();
navigo_router.on({
'/clients': () => {
import("Controllers/clients.js").then((clients) => {
clients.init();
});
}
});
But saving this in my editor resulted in a Babel transpiling error; SyntaxError: 'import' and 'export' may only appear at the top level, and clients.init() is not being called when tested in browser.
After a bit of reading, I discovered I needed a Babel plugin to transpile dynamic import() to require.ensure. So, I installed the plugin using the following command:
npm install babel-plugin-dynamic-import-webpack --save-dev
And declared the plugin in my babel.rc file
{ "plugins": ["dynamic-import-webpack"] }
After installing the plugin, the transpiling error disappeared and checking my transpiled code I found that the dynamic import()s has in fact been changed to require.ensure as expected. But now I get the following browser errors when testing:
Error: Loading chunk 0 failed.
Stack trace:
u#https://<mydomain.com>/js/app.bundle.js:1:871
SyntaxError: expected expression, got '<' 0.app.bundle.js:1
Error: Loading chunk 0 failed.
I didn't understand why it was referencing 0.app.bundle.js with the 0. prefix, so I checked my output/dist folder and I now have a new file in there called 0.app.bundle.js:
0.app.bundle.js 1,962bytes
app.bundle.js 110,656bytes
I imagine this new bundled file is the dynamically imported module, clients.js.
I only added dynamic importing to that one route and have left all the other routes as they were. So, during testing, I can view all routes except that one /clients route that now throws the above errors.
I'm totally lost at this point and hoped somebody could help push me over the finish line. What is this new file 0.app.bundle.js and how am I supposed to be using it/including it in my application?
I hope I've explained myself clearly enough and look forward to any responses.

I managed to fix my own problem in the end, so I will share what I discovered in an answer.
The reason the chunk file wasn't loading was because Webpack was looking in the wrong directory for it. I noticed in the Network tab of my developer console that the the chunk file/module was being called from my root directory / and not in /js directory where it belongs.
As per Webpack's documentation, I added the following to my Webpack config file:
output: {
path: path.resolve(__dirname, 'dist/js'),
publicPath: "/js/", //<---------------- added this
filename: 'app.bundle.js'
},
From what I understand, path is for Webpack's static modules and publicPath is for dynamic modules.
This made the chunk load correctly but I also had further issues to deal with, as client.init() wasn't being called and yielded the following error:
TypeError: e.init is not a function
To fix this, I also had to change:
import("Controllers/clients.js").then((clients) => {
clients.init();
});
To:
import("Controllers/clients.js").then(({clients}) => {
clients.init();
});
Note the curly braces in the arrow function parameter.
I hope this helps somebody else.

For debugging, you need to do
import("Controllers/clients.js").then((clients) => {
console.log(clients);
});
maybe working
import("Controllers/clients.js").then((clients) => {
clients.default.init();
});

Define local file

This project has to rely on older version of a SAP system. As a result some of the latest features do not work. I would like to have the "minutesStep" property of the latest "TimePicker" version, so I went to the source code and copied the latest TimePicker controls code to our old project.
I am having issues as "TimePicker" relies on the new version of "TimePickersliders" as well. I need to copy its source code as well. However I fail to make the "TimePicker" use the new "TimePickerslider" source code which I copied to the project as well.
sap.ui.define(['jquery.sap.global',
'sap/m/InputBase',
'sap/m/MaskInput',
'sap/m/MaskInputRule',
'sap/m/ResponsivePopover',
'sap/ui/core/EnabledPropagator',
'sap/ui/core/IconPool',
'sap/ui/model/type/Time',
'./TimePickerSliders'], // Here is the problem.
function(jQuery, InputBase, MaskInput, MaskInputRule, ResponsivePopover, EnabledPropagator, IconPool, TimeModel, TimePickerSliders) {
What should be the './TimePickerSliders' path, so that it includes the file in my project? Its in the same folder, but it just fails to pick it up.
Here is the Error I get:
Uncaught (in promise) Error: failed to load 'PROJECT_NAME/controls/MyTimePicker.js' from ./controls/MyTimePicker.js: Error: failed to load 'PROJECT_NAME/controls/Slider.js' from ./controls/Sliders.js: Error: failed to load 'PROJECT_NAME/controls/VisibleItem.js' from ./controls/VisibleItem.js: Error: failed to load 'PROJECT_NAME/controls/library.js' from ./controls/library.js: 404 - NOT FOUND
Is this even possible, reasonable or legal? I seem to be missing some other files as well.

If TimePickerSliders is a .js file located in your controls folder (I assume its on the same level as view and controller folders), try to call it like follows:
sap.ui.define([
...
'<project-namespace>/controls/TimePickerSliders'],
function(jQuery, InputBase, MaskInput, MaskInputRule, ResponsivePopover, EnabledPropagator, IconPool, TimeModel, TimePickerSliders) {

Why is the first api.add_files not being included?

I have the following:
scribe/package.js:
Package.describe({
summary: 'A rich text editor framework for the web platform http://guardian.github.io/scribe/'
});
Package.on_use(function(api) {
api.add_files('require.js', 'client');
api.add_files('scribe.js', 'client');
});
For some reason I'm getting this error:
Uncaught ReferenceError: define is not defined
Because require.js doesn't show up in the rendered page. Why is that?
File tree:

You need to export all the top global variables from the package. Add this line before the api.add_filescall:
api.export('define')
Add a similar line for every global variable you'd like to be abke to use outside of the package.