Hi, I want to create a Splunk app that displays custom searches I get from the SplunkJS stack in a React UI component. I got the React UI working, but I still have issues importing the SplunkJS modules. I'm using Babel for source code compilation and Webpack for bundling my assets. The SplunkJS stack modules are initialized in the browser at runtime and I want to use those already initialized modules so that I don't have to bother with login, permissions, etc.. Adding the SplunkJS SDK as module is not an option. Basically, I'm trying to use the utils module like that:   require(["splunkjs/mvc/utils"], function(utils) { console.log(utils.getCurrentApp()); });     This code would generate an error in Webpack, because the module 'splunkjs/mvc/utils' is not defined/found of course. The module only exists on the Splunk appserver and I want webpack to ignore the import of this module at build time. So I thought that the externals configuration option in the webpack config is exacly what I'm looking for:   module.exports = { ... externals: { "splunkjs/mvc/utils": "commonjs2 splunkjs/mvc/utils", }, ... }     Webpack is now able to generate the bundle without build errors, because it completely ignores the SplunkJS module:   [splunkjs/mvc/utils] external "splunkjs/mvc/utils" 42 bytes {sirp-dashboard} [built]     That's totally what I wanted, but I receive the following error when executing the app:   Error: Module name "splunkjs/mvc/utils" has not been loaded yet for context: _. Use require([])     It looks like the splunkjs module is loaded after the bundle JS code is executed. I can execute the same code in the dev console as soon as the browser finished loading the page: I also tried to use different externals types in the webpack config like 'amd', 'umd', ... . They produce a different error:   ReferenceError: __WEBPACK_EXTERNAL_MODULE_splunkjs_mvc_utils__ is not defined     Is there a way to make webpack and the SplunkJS stack work? Any solution/hint is greatly appreciated 🙂   home-search.js (my react component)   import React, { Component } from 'react'; export default class HomeSearch extends Component { render() { require(["splunkjs/mvc/utils"], function(utils) { console.log(utils.getCurrentApp()); }); return ( <div> </div> ) } }     webpack.config.js   const path = require('path'); const fs = require('fs'); const appConfig = require('./appConfig'); const srcDir = path.join(__dirname, 'src'); const pages = fs.readdirSync(path.join(srcDir, 'pages')).reduce((entries, name) => { // eslint-disable-next-line no-param-reassign entries[name] = path.join(srcDir, 'pages', name, 'index.jsx'); return entries; }, {}); const jsBuildDir = path.join(__dirname, 'build', appConfig.id, 'appserver', 'static', 'build'); module.exports = { mode: process.env.NODE_ENV !== 'production' ? 'development' : 'production', entry: pages, externals: { "splunkjs/mvc/utils": "commonjs2 splunkjs/mvc/utils", }, output: { path: jsBuildDir, }, resolve: { extensions: ['.js', '.jsx'], }, module: { rules: [ { test: /\.jsx?$/, exclude: /node_modules/, use: ['babel-loader'], }, { test: /\.css$/i, use: ['style-loader', 'css-loader'], }, { test: /\.txt$/, use: ['raw-loader'], }, { test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/, use: [ { loader: 'url-loader', options: { name: '[hash].[ext]', limit: 100000, }, }, ], }, { test: /\.(eot|ttf|wav|mp3)$/, use: [ { loader: 'file-loader', options: { name: '[hash].[ext]', }, }, ], }, ], }, };     ~ Julian ... View more