Understanding Roact & Studio Widgets

Hello!

I am building my plugin interface using Roact, but I seem to be running into errors with either the way I am referencing modules or the fact that Studio doesn’t recognize the plugin keyword, after that; it hasn’t worked.

Output

13:10:28.531 - Workspace.EditorThemes.Script:3: attempt to index global ‘plugin’ (a nil value)

13:10:28.532 - Stack Begin

13:10:28.532 - Script ‘Workspace.EditorThemes.Script’, Line 3

13:10:28.533 - Stack End

13:10:28.571 - Workspace.TweenSequenceEditor.Src.main:34: attempt to index global ‘plugin’ (a nil value)

13:10:28.572 - Stack Begin

13:10:28.573 - Script ‘Workspace.TweenSequenceEditor.Src.main’, Line 34 - upvalue makePluginActions

13:10:28.573 - Script ‘Workspace.TweenSequenceEditor.Src.main’, Line 84 - local main

13:10:28.574 - Script ‘Workspace.TweenSequenceEditor.Src.main’, Line 124

13:10:28.575 - Stack End

Hello world!

13:10:31.227 - Plugin_4749593193.EagleVisionStudio:11: attempt to index global ‘plgin’ (a nil value)

13:10:31.227 - Stack Begin

13:10:31.228 - Script ‘Plugin_4749593193.EagleVisionStudio’, Line 11

13:10:31.228 - Stack End

13:10:31.229 - Plugin_4749593193.EagleVisionStudio.LocalController.CrosswalkAssets.CrosswalkSy:7: Expected identifier when parsing expression, got ‘{’

The Script
-- Src References --
local Actions = require(game.ServerScriptService.EagleVisionStudio.Src.Actions)
local Components = require(game.ServerScriptService.EagleVisionStudio.Src.Components)
local Consumers = require(game.ServerScriptService.EagleVisionStudio.Src.Consumers)
local Providers = require(game.ServerScriptService.EagleVisionStudio.Src.Providers)
local Reducers = require(game.ServerScriptService.EagleVisionStudio.Src.Reducers)
local DataStore2 = require(game.ServerScriptService.EagleVisionStudio.Src.DataStore2)
local Promise = require(game.ServerScriptService.EagleVisionStudio.Src.Promise)
local Roact = require(game.ServerScriptService.EagleVisionStudio.Src.Roact)
local Roact_Rodux = require(game.ServerScriptService.EagleVisionStudio.Src["Roact-Rodux"])
local Rodux = require(game.ServerScriptService.EagleVisionStudio.Src.Rodux)
local t = require(game.ServerScriptService.EagleVisionStudio.Src.t)
**NOTE: The references mimic the file structure, locals that are indented represent a high/low directory system.**

– End Src References –

-- Traffic Control Algorithms --
--local ASAP = require()
-- End Traffic Control Algorithms --

-- System Values --
local RequireMasterController = game.ServerScriptService.EagleVisionStudio.RequireMasterController
-- End System Values --

-- Eagle Vision System References --
local EVTrafficSystem = require(game.ServerScriptService.EagleVisionStudio.EVTrafficSystem)
local LocalController = require(game.ServerScriptService.EagleVisionStudio.LocalController)
local MasterController = require(game.ServerScriptService.EagleVisionStudio.MasterController)
local Region3Solver = game.ServerScriptService.EagleVisionStudio.Region3Solver
	local Region3Calc = require(game.ServerScriptService.EagleVisionStudio.Region3Solver.Region3Calc)
-- End Eagle Vision System References --

-- Create new 'DockWidgetPluginGuiInfo' object
local EVSWidgetInfo = DockWidgetPluginGuiInfo.new(
	Enum.InitialDockState.Left,  -- Widget will be initialized in floating panel
	true,   -- Widget will be initially enabled
	false,  -- Don't override the previous enabled state
	200,    -- Default width of the floating window
	300,    -- Default height of the floating window
	169,    -- Minimum width of the floating window (optional)
	150     -- Minimum height of the floating window (optional)
)
 
-- Create new widget GUI
local EVSWidget = plugin:CreateDockWidgetPluginGui("EVSWidget", EVSWidgetInfo)
	EVSWidget.Name = "Eagle Vision Studio"
	EVSWidget.ResetOnSpawn = false
	EVSWidget.Title = "Eagle Vision Studio"

local TestFrame = Roact.createElement("Frame", {
		Size = UDim2.new(1, 0, 1, 0)
		
	})
local TestHandle = Roact.mount(TestFrame,game.PluginGuiService)

Currently, due to the confusion I am going through I have Building Studio Widgets and Roact Docs open. I am finding it difficult to grasp the new terminology and features of this ‘stack’. The articles on the Developer Hub aren’t practical, it shows snippets, but doesn’t explain whether I need to use frames for widgets or if the widget window itself is a stand-in for a frame. Also, if anyone has experience with the Studio Widgets library I would like to know how I can call the necessary functions to start using it.

Thank you!

1 Like

Have you saved the script as plugin?

Yes I have saved it as a plugin.