Hello All,
How do you add an external javascript library to a module for use in a perspective component? I have tried adding it to the package.json dependencies section, but it gives an error when building:
ERROR in ./typescript/components/FormikTest.tsx
Module not found: Error: Can't resolve 'formik' in 'C:\Users\Me\IdeaProjects\PerspectiveComponentTest\perspective-component\web\packages\client\typescript\components'
@ ./typescript/components/FormikTest.tsx 4:17-34
@ ./typescript/components/Image.tsx
@ ./typescript/rad-client-components.ts
Child mini-css-extract-plugin ../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../node_modules/sass-loader/lib/loader.js??ref--5-2!scss/main.scss:
Entrypoint mini-css-extract-plugin = *
[../../node_modules/css-loader/dist/cjs.js?!../../node_modules/sass-loader/lib/loader.js?!./scss/main.scss] C:/Users/Nick/IdeaProjects/PerspectiveComponentTest/perspective-component/web/node_modules/css-loader/dist/cjs.js??ref--5-1!C:/Users/Nick/IdeaProjects/Per
spectiveComponentTest/perspective-component/web/node_modules/sass-loader/lib/loader.js??ref--5-2!./scss/main.scss 1.17 KiB {mini-css-extract-plugin} [built]
+ 1 hidden module
Note that I have added it to both the client and designer packages because I assume it is needed in both. The package I am trying to use is called formik.
Additionally, I have tried adding the package into the webpack.config.js externals. This allowed the module to build, but once the component is placed in the designer, it just shows an error box in place of the component with this error in the console.
10:47:25.460 [Browser Thread: 51048] ERROR Perspective.Designer.Workspace - level: LEVEL_ERROR
message: "TypeError: Cannot read property \'Formik\' of undefined"
line_number: 112
source: "http://localhost:8088/res/perspective/js/react-dom.production.min-16.11.0.js"
10:47:25.461 [Browser Thread: 51048] ERROR Perspective.Designer.Workspace - level: LEVEL_ERROR
message: "ui.ErrorBoundary: Component error caught in error boundary: {\"componentStack\":\"\\n in FormikTest\\n in div\\n in Image\\n in s\\n in n\\n in v\\n in m\\n in div\\n in l\\n in s\\n in n\\n in v\\n in m\\n in A\\n in div\\n in DraggableCore\\n in div\\n in y\\n in div\\n in r\"}"
line_number: 12
This makes it seem like the dependencies are still not quite loading properly and I am wondering what is going wrong. Is there an additional place that they need to be specified?