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!

Why You Can't Miss .conf25: Unleashing the Power of Agentic AI with Splunk & Cisco

The Defining Technology Movement of Our Lifetime The advent of agentic AI is arguably the defining technology ...

Deep Dive into Federated Analytics: Unlocking the Full Power of Your Security Data

In today’s complex digital landscape, security teams face increasing pressure to protect sprawling data across ...

Your summer travels continue with new course releases

Summer in the Northern hemisphere is in full swing, and is often a time to travel and explore. If your summer ...