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!

Introducing a Smarter Way to Discover Apps on Splunkbase

We’re excited to announce the launch of a foundational enhancement to Splunkbase: App Tiering. Because we’ve ...

How to Send Splunk Observability Alerts to Webex teams in Minutes

As a Developer Evangelist at Splunk, my team and I are constantly tinkering with technology to explore its ...

.conf25 Registration is OPEN!

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