Custom Component From Docs does not work

[jagrock]

Hi, I am following the directions from the docs ( Building Custom JavaScript Components | PowerShell Universal ). I had to make a few changes to get it to work as I outlined below. I started this as I have been trying to replicate the UniversalDashbaord.QueryBuilder from PSDevUK. I need to expand on it, but it never works (typically the Minified 31 error - as well as Resulting JSON is truncated as serialization has exceeded the set depth of 2 if i’m trying to add the component after page load).

With following the docs, I get a different error. That error is Minified React error #130. Any help or direction would be appreciated.

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Index.js:
Changed the name it’s registering as I did not know if “udcomponent” would conflict with another component, even with the assetID being passed.

UniversalDashboard.register("uddocexample", UDComponent)

Webpack.config.js:
The isDev constant does not work, it’s not reading the env variable correctly. env is being passed as an object. This also means in the return section, the mode isn’t being read as production.
The other part is the rules for js|jsx files. I had to define the preset options in here as it doesn’t seem to read from the .babelrc file.

const isDev = env.development ? true : false;
const expMode = env.production ? 'production' : 'development';

return {
    mode: expMode,
    ...
    module: {
            rules: [{
                test: /\.(js|jsx)$/,
                exclude: [/node_modules/, /output/],
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-env',
                            '@babel/preset-react'
                          ]
                    }
                }
            },
    ...
}

[adam]

I’m not sure why this isn’t working but I opened an issue for it. Those docs are probably outdated and need a refresh.

Custom Component Doc Refresh

[jagrock]

Thanks. I think the biggest item is the PowerShellUniversal.Apps.Tools module and getting a valid webpack.config.js file. Also the build function doesn’t delete the public folder, so if you don’t manually you have to track which one is the current. Updating the example component to have a valid React-Icon could be helpful as well. The example has ‘User’ but it’s importing the BootStrap in the component.jsx. Passing a valid icon, such as ‘BsPerson’ works.

Also, I found a really cool site that lets you provide a minified js and it’s map and it will give you back an un-minified version, not just formatting.

source-map-visualization