enable to use reactstrap library in client side spfx - reactjs

I am creating a client-side web part in SharePoint using react and I am getting an error for using reactstrap in it.
[SPLoaderError.loadComponentError]:
***Failed to load component "e85e1482-17da-4af0-968f-3f63def88702" (ReactSpfxWebPartWebPart).
Original error: ***Failed to load entry point from component "e85e1482-17da-4af0-968f-3f63def88702" (ReactSpfxWebPartWebPart).
Original error: Error loading https://component-id.invalid/e85e1482-17da-4af0-968f-3f63def88702_0.0.1
Cannot read property 'placements' of undefined
***INNERERROR:
***Failed to load entry point from component "e85e1482-17da-4af0-968f-3f63def88702" (ReactSpfxWebPartWebPart).
Original error: Error loading https://component-id.invalid/e85e1482-17da-4af0-968f-3f63def88702_0.0.1
Cannot read property 'placements' of undefined
***CALLSTACK:
Error
at SPLoaderError.SPError [as constructor] (https://localhost:4321/temp/workbench-packages/#microsoft_sp-loader/dist/sp-loader-assembly_default.js:8668:24)
at new SPLoaderError (https://localhost:4321/temp/workbench-packages/#microsoft_sp-loader/dist/sp-loader-assembly_default.js:4124:28)
at Function.ErrorBuilder.buildErrorWithVerboseLog (https://localhost:4321/temp/workbench-packages/#microsoft_sp-loader/dist/sp-loader-assembly_default.js:3783:21)
at Function.ErrorBuilder.buildLoadComponentError (https://localhost:4321/temp/workbench-packages/#microsoft_sp-loader/dist/sp-loader-assembly_default.js:3691:21)
at https://localhost:4321/temp/workbench-packages/#microsoft_sp-loader/dist/sp-loader-assembly_default.js:6936:47

add
"externals": {
"reactstrap": "https://cdnjs.cloudflare.com/ajax/libs/reactstrap/6.0.1/reactstrap.full.min.js"
},
to config.json it will resolve reactstrap dependancy in spfx

Related

TypeError [ERR_UNKNOWN_FILE_EXTENSION]

I am trying to do a mini react project and am using external API. I am getting this weird error. Before I was getting error when doing any type of import, but then I added type: "module" in package.json, so now instead I get completely different type of error.
Error:
node:internal/errors:484
ErrorCaptureStackTrace(err);
^
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".tmp" for /Users/rokas/Projects/quiz-website/src/node_7c47523b50d8c.tmp
at new NodeError (node:internal/errors:393:5)
at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:79:11)
at defaultGetFormat (node:internal/modules/esm/get_format:121:38)
at defaultLoad (node:internal/modules/esm/load:81:20)
at nextLoad (node:internal/modules/esm/loader:163:28)
at ESMLoader.load (node:internal/modules/esm/loader:605:26)
at ESMLoader.moduleProvider (node:internal/modules/esm/loader:457:22)
at new ModuleJob (node:internal/modules/esm/module_job:63:26)
at #createModuleJob (node:internal/modules/esm/loader:480:17)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:434:34) {
code: 'ERR_UNKNOWN_FILE_EXTENSION'
}
Node.js v18.12.1
Thoughts?

"Cannot set property defaults of #<n>" error while integrating GrapesJS-blocks-boostrap4 plugin

I am trying to add grapesjs-blocks-bootstrap4 plugin in my grapesjs editor in reactjs. When I try adding it, I get the following error.
```TypeError: Cannot set property defaults of #<n> which has only a getter
at grapes.min.js:2:1
at Module.It (grapes.min.js:2:1)
at Function.$ [as extend] (grapes.min.js:2:1)
at vr (grapesjs-blocks-bootstrap4.min.js:11:1) ```
I tried deleting the node modules and installing them again, but still had the same issue.
Thank you for your help in advance.

Angular errors with Linux

./server.sh
internal/modules/run_main.js:54
internalBinding('errors').triggerUncaughtException(
^
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/home/racal/JavaScript/pluralsight/AngularFundamentalsFiles/DemoApp/scripts/eventsController' imported from /home/racal/JavaScript/pluralsight/AngularFundamentalsFiles/DemoApp/scripts/web-server.js
at finalizeResolution (internal/modules/esm/resolve.js:272:11)
at moduleResolve (internal/modules/esm/resolve.js:652:10)
at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:695:13)
at Loader.resolve (internal/modules/esm/loader.js:97:40)
at Loader.getModuleJob (internal/modules/esm/loader.js:243:28)
at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:42:40)
at link (internal/modules/esm/module_job.js:41:36) {
code: 'ERR_MODULE_NOT_FOUND'
}
and in web console
angular.js:10413 GET http://127.0.0.1:5500/app/lib/app/data/event 404 (Not Found)
please help me
I wanted to change event data about an event object in javascript, a json-file

howtographql + React tutorial : Error: Cannot find module './generated/prisma.graphql'

I'm following the howtographql + React tutorial right now. I'm currently at the beginning of the tutorial when I have to define my queries, mutation and stuff in my schema.graphql. But according to the tutorial, I have to import prisma.graphql from the generatedfolder by writing the following line :
# import Link, Vote, LinkSubscriptionPayload, VoteSubscriptionPayload from "./generated/prisma.graphql"
I indeed generated the serverfolder which contains everything except this file that is supposed to be generated as well I guess.
Apparently, I should be able to run the server using yarn startbut when I'm doing so, I have this message :
Error: Cannot find module './generated/prisma.graphql'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:609:15)
at resolveFileName (/Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/resolve-from/index.js:29:39)
at resolveFrom (/Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/resolve-from/index.js:43:9)
at module.exports (/Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/resolve-from/index.js:46:41)
at resolveModuleFilePath (/Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/graphql-import/dist/index.js:150:24)
at /Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/graphql-import/dist/index.js:187:30
at Array.forEach (<anonymous>)
at collectDefinitions (/Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/graphql-import/dist/index.js:185:16)
at Object.importSchema (/Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/graphql-import/dist/index.js:73:14)
at mergeTypeDefs (/Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/graphql-yoga/dist/index.js:412:37)
I don't understand what I'm doing wrong...
Do you guys have any idea ?

Storybook: Static build assets are not loading

I am building storybook. When trying to load the resulting files, I get this error.
manager.43f5b3475a944261b3fa.bundle.js:formatted:19449 Uncaught (in promise) TypeError: Cannot read property 'children' of undefined
at resolveStyles (manager.43f5b3475a944261b3fa.bundle.js:formatted:19449)
at RadiumEnhancer.render (manager.43f5b3475a944261b3fa.bundle.js:formatted:19191)
at callMethod (manager.43f5b3475a944261b3fa.bundle.js:formatted:409)
at RadiumEnhancer.render (manager.43f5b3475a944261b3fa.bundle.js:formatted:414)
at renderComponent (manager.43f5b3475a944261b3fa.bundle.js:formatted:821)
at setComponentProps (manager.43f5b3475a944261b3fa.bundle.js:formatted:805)
at buildComponentFromVNode (manager.43f5b3475a944261b3fa.bundle.js:formatted:686)
at idiff (manager.43f5b3475a944261b3fa.bundle.js:formatted:691)
at innerDiffNode (manager.43f5b3475a944261b3fa.bundle.js:formatted:743)
at idiff (manager.43f5b3475a944261b3fa.bundle.js:formatted:753)

Resources