Dashboards & Visualizations

Splunk JS importing external modules (React components)

derekf
Explorer

I have a very basic external project written in TypeScript. It simply exports a jsx.element. I use webpack and babel to create a bundle, but whenever I try to require it in Splunk web, the object is undefined.

What am I doing wrong?

HelloReact.tsx

import React from 'react';
export let z = <div>Hello world!</div>;

.babelrc

{
    "presets": [
        "@babel/env",
        "@babel/typescript",
        "@babel/react"
    ],
    "plugins": [
        "@babel/proposal-class-properties",
        "@babel/proposal-object-rest-spread"
    ]
}

package.json

{
  "name": "babeltest",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "bundle": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.1.2",
    "@babel/core": "^7.1.2",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-typescript": "^7.1.0",
    "babel-loader": "^8.0.4",
    "typescript": "^3.1.3",
    "webpack": "^4.21.0",
    "webpack-cli": "^3.1.2"
  },
  "dependencies": {
    "@types/react": "^16.4.18",
    "@types/react-dom": "^16.0.9",
    "react": "^16.5.2",
    "react-dom": "^16.5.2"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "jsx": "react",
    "declaration": true,
    "outDir": "lib",
    "strict": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}

webpack.config.js

var path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/HelloReact',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.json']
    },
    module: {
        rules: [{
            test: /\.(tsx?)|(js)$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        }],
    } };

Splunk file that is using the above

require([
    "/static/app/<appname>/bundle.js",
], function(thing) {
    console.log(thing) // this always prints 'undefined'
});
0 Karma
1 Solution

derekf
Explorer

For anyone else running into something similar. The following should be added to the output of the webpack config

library: 'HelloReact',
libraryTarget: 'umd'

https://webpack.js.org/configuration/output/#output-librarytarget

View solution in original post

0 Karma

derekf
Explorer

For anyone else running into something similar. The following should be added to the output of the webpack config

library: 'HelloReact',
libraryTarget: 'umd'

https://webpack.js.org/configuration/output/#output-librarytarget

0 Karma
Get Updates on the Splunk Community!

.conf25 Registration is OPEN!

Ready. Set. Splunk! Your favorite Splunk user event is back and better than ever. Get ready for more technical ...

Detecting Cross-Channel Fraud with Splunk

This article is the final installment in our three-part series exploring fraud detection techniques using ...

Splunk at Cisco Live 2025: Learning, Innovation, and a Little Bit of Mr. Brightside

Pack your bags (and maybe your dancing shoes)—Cisco Live is heading to San Diego, June 8–12, 2025, and Splunk ...