Cannot find module "contentQueryStrings" when adding react-content-query-webpart to page #520

Loevbo · 2018-05-28T14:03:09Z

Expected or Desired Behavior

When I run this example. I run into a problem where i have to change import { IWebPartContext } from '@microsoft/sp-webpart-base'; to import { WebPartContext } from '@microsoft/sp-webpart-base';

Now there is no errors in the code and when i run gulp serve it loads and open the workbench.

Observed Behavior

When I add the webpart to the page I get this error message

[SPLoaderError.loadComponentError]:
***Failed to load component "3bbca76a-5369-4a92-af23-d4bfd1c4e3b4" (ContentQueryWebPart).
Original error: ***Failed to load entry point from component "3bbca76a-5369-4a92-af23-d4bfd1c4e3b4" (ContentQueryWebPart).
Original error: Error loading https://component-id.invalid/3bbca76a-5369-4a92-af23-d4bfd1c4e3b4_0.0.1
Cannot find module "contentQueryStrings"

***INNERERROR:
***Failed to load entry point from component "3bbca76a-5369-4a92-af23-d4bfd1c4e3b4" (ContentQueryWebPart).
Original error: Error loading https://component-id.invalid/3bbca76a-5369-4a92-af23-d4bfd1c4e3b4_0.0.1
Cannot find module "contentQueryStrings"
***CALLSTACK:
Error
at SPLoaderError.SPError [as constructor] (https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader-assembly_en-us.js:10183:24)
at new SPLoaderError (https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader-assembly_en-us.js:4211:28)
at Function.ErrorBuilder.buildErrorWithVerboseLog (https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader-assembly_en-us.js:3821:21)
at Function.ErrorBuilder.buildLoadComponentError (https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader-assembly_en-us.js:3743:21)
at https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader-assembly_en-us.js:7952:38

Im not sure what the problem is but now after 2 days of trying to fix this im lost, This is the first time I'm posting an issue here, so sorry if I did it wrong.

The text was updated successfully, but these errors were encountered:

spplante · 2018-06-06T16:45:03Z

@Loevbo before anything, the WebPart most likely won't run in the workbench since I didn't mock the service layer to return fake data when inside the workbench, so you will most likely end up with errors because of the WebPart trying to talk to SharePoint.

You can debug this WebPart directly in SPO, just make sure you bundle/package the solution without the --ship flag, add the resulting .sppkg to your app catalog and run the "gulp serve --nobrowser" command to serve the content. You will then be able to add the webpart to a site collection and changes to the code will automatically get reflected in SPO because of the serve mecanism.

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page

Try this and let me know if it helps 👍

Edit : By the way sorry for the delay I just saw this :|

spplante · 2018-06-08T11:48:16Z

@Loevbo any update on this?

Loevbo · 2018-06-08T11:49:58Z

@spplante Hello I get the same bug when I run this on both local Workbench and when I compile it into an app and use it on my live sharepoint site.

spplante · 2018-06-08T11:59:05Z

@Loevbo Hmmm that is strange, can you try doing the same thing using the "dev" branch? I just submitted some changes in the current DEV branche, maybe it is fixed in this version for some reason.

Also, are you using this webpart in SPO or SharePoint 2016?

Loevbo · 2018-06-08T12:02:03Z

I'm trying to use it on SPO,

spplante · 2018-06-08T12:08:02Z

At the root of the repository, there is a branch button where you can switch between master and dev, if you cloned the repository using Visual Studio you also have the option to switch branch within visual studio.

Anyway here is the link for the dev version of this repository :

https://github.com/SharePoint/sp-dev-fx-webparts/tree/dev

If you are using SPO, I made available (in the dev branch for now) a zip file at the root of the project called content-query-webpart-1.4.1.zip, this is the same WebPart project but using the version 1.4.1 of SPFx which is a more recent version which allows the WebPart to run without hosting the binaries to a CDN. With this version the binaries are now included directly within the .sppkg which is much more simple, so if you are using SPO and aren't looking for SP2016 compatibility, I would recommand you to use the 1.4.1 version of the .zip file.

Here's the zip file I am talking about that has the 1.4.1 project :

https://github.com/SharePoint/sp-dev-fx-webparts/blob/dev/samples/react-content-query-webpart/content-query-webpart-1.4.1.zip

Let me know if you have more success using this version 👍

Loevbo · 2018-06-08T12:13:14Z

I've opened the dev version of content query webpart and it returns the following erros when I run gulp serve to test it in local.

src\controls\PropertyPaneQueryFilterPanel\components\QueryFilter\QueryFilter.tsx(1,89): error TS2307: Cannot find module 'moment'.
[14:12:01] Error - typescript - src\controls\PropertyPaneQueryFilterPanel\components\QueryFilterPanel\QueryFilterPanel.tsx(213,134): error TS2339: Property 'icon' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ children?: ReactNode; }> & Re...'.
[14:12:01] Error - typescript - src\controls\PropertyPaneTextDialog\components\TextDialog\TextDialog.tsx(6,30): error TS2307: Cannot find module 'react-ace'.
[14:12:01] Error - typescript - src\webparts\contentQuery\components\ContentQuery.tsx(77,72): error TS2339: Property 'serviceScope' does not exist on type 'IWebPartContext'.

Loevbo · 2018-06-08T12:15:06Z

I think I've gone blind, Can't find content-query-webpart-1.4.1.zip anywhere :(

spplante · 2018-06-08T12:16:44Z

@Loevbo what are the exact steps you are taking from scratch? You need to perform these exact steps in order to use any SPFx WebPart :

npm install (to install all the dependencies)
gulp bundle (without the --ship flag)
gulp package-solution (without the --ship flag)
Upload the generated .sppkg to app catalog
Install app to a site collection
gulp serve --nobrowser
Add app to a page

The zip is at the root of the project in the dev branch :

https://github.com/SharePoint/sp-dev-fx-webparts/blob/dev/samples/react-content-query-webpart

spplante · 2018-06-11T19:35:33Z

@Loevbo, did you manage to make it work iwth the 1.4.1 version?

stact · 2020-03-17T16:13:38Z

Hi @spplante I'm trying to add this wp on a SharePoint 2019
When I compile with
gulp clean
gulp bundle --ship
gulp package-solution --ship

Not working on the environment cause the module try to use the cdn.
I tried to add on package-solution.json "includeClientSideAssets": true not working cause the project is using 1.1.0.
Then I try the solution 1.4.1 (that allow "includeClientSideAssets": true), got errors

Error - typescript - src/common/services/ContentQueryService.ts(56,99): error TS2339: Property 'serviceScope' does not exist on type 'IWebPartContext'.
Error - typescript - src/common/services/ContentQueryService.ts(73,142): error TS2339: Property 'serviceScope' does not exist on type 'IWebPartContext'.
Error - typescript - src/common/services/ContentQueryService.ts(78,16): error TS2322: Type '{ pageContext: PageContext; items: undefined[]; accessDenied: false; webNotFound: false; callTime...' is not assignable to type 'IContentQueryTemplateContext'.
Error - typescript - src/common/services/ContentQueryService.ts(78,16): error TS2322: Type '{ pageContext: PageContext; items: undefined[]; accessDenied: false; webNotFound: false; callTime...' is not assignable to type 'IContentQueryTemplateContext'.
Error - typescript - src/common/services/ContentQueryService.ts(88,101): error TS2339: Property 'serviceScope' does not exist on type 'IWebPartContext'.
Error - typescript - src/common/services/ContentQueryService.ts(131,117): error TS2339: Property 'serviceScope' does not exist on type 'IWebPartContext'.

[...]

What are the steps to use this module on SharePoint OnPremises?
Do you plan to upgrade the solution, that could allow to use this component on premise?

Thanks for your help!

spplante · 2020-03-17T16:34:18Z

@stact what do you mean when you say you tried 1.4.1, you tried updating the packages by yourself to 1.4.1?

stact · 2020-03-17T16:40:19Z

@spplante yes for on the project samples/react-content-query-webpart I've followed those instructions:
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/toolchain/update-latest-packages

spplante · 2020-03-17T16:46:00Z

Ok well you don't need to, I did include a version of the project converted to 1.4.1, it is in a zip file at the root of the project called content-query-webpart-1.4.1.zip.

Simply unzip that file in another location and try installing/gulping that version of the project instead 👍

stact · 2020-03-17T18:17:26Z

thx @spplante it's working fine :)

poojakadam19 · 2023-10-11T12:18:30Z

Something went wrong
If the problem persists, contact the site administrator and give them the information in Technical Details.
TECHNICAL DETAILS
ERROR:
Cannot find module 'ReactNewsWebpartStrings'

CALL STACK:
Error: Cannot find module 'ReactNewsWebpartStrings'
at webpackMissingModule (https://localhost:4321/dist/react-news-webpart-web-part.js:22286:45)
at Module.GlSv (https://localhost:4321/dist/react-news-webpart-web-part.js:22286:143)
at webpack_require (https://localhost:4321/dist/react-news-webpart-web-part.js:20:30)
at https://localhost:4321/dist/react-news-webpart-web-part.js:84:18
at https://localhost:4321/dist/react-news-webpart-web-part.js:87:10
at Object.execCb (eval at e (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_739a8b65a2b9798eb2b3e29fda93101a.js:1:1), :30:41)
at Z.check (eval at e (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_739a8b65a2b9798eb2b3e29fda93101a.js:1:1), :18:439)
at Z.enable (eval at e (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_739a8b65a2b9798eb2b3e29fda93101a.js:1:1), :23:439)
at Z.init (eval at e (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_739a8b65a2b9798eb2b3e29fda93101a.js:1:1), :17:108)
at E (eval at e (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_739a8b65a2b9798eb2b3e29fda93101a.js:1:1), :14:221)

lworkman mentioned this issue Jul 12, 2018

Unable to serve react-content-query-webpart with gulp serve --nobrowser #563

Closed

3 tasks

hugoabernier closed this as completed Apr 20, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cannot find module "contentQueryStrings" when adding react-content-query-webpart to page #520

Cannot find module "contentQueryStrings" when adding react-content-query-webpart to page #520

Loevbo commented May 28, 2018

spplante commented Jun 6, 2018 •

edited

Loading

spplante commented Jun 8, 2018

Loevbo commented Jun 8, 2018

spplante commented Jun 8, 2018 •

edited

Loading

Loevbo commented Jun 8, 2018 •

edited

Loading

spplante commented Jun 8, 2018 •

edited

Loading

Loevbo commented Jun 8, 2018 •

edited

Loading

Loevbo commented Jun 8, 2018

spplante commented Jun 8, 2018

spplante commented Jun 11, 2018

stact commented Mar 17, 2020

spplante commented Mar 17, 2020

stact commented Mar 17, 2020

spplante commented Mar 17, 2020 •

edited

Loading

stact commented Mar 17, 2020

poojakadam19 commented Oct 11, 2023

Cannot find module "contentQueryStrings" when adding react-content-query-webpart to page #520

Cannot find module "contentQueryStrings" when adding react-content-query-webpart to page #520

Comments

Loevbo commented May 28, 2018

Category

Expected or Desired Behavior

Observed Behavior

spplante commented Jun 6, 2018 • edited Loading

spplante commented Jun 8, 2018

Loevbo commented Jun 8, 2018

spplante commented Jun 8, 2018 • edited Loading

Loevbo commented Jun 8, 2018 • edited Loading

spplante commented Jun 8, 2018 • edited Loading

Loevbo commented Jun 8, 2018 • edited Loading

Loevbo commented Jun 8, 2018

spplante commented Jun 8, 2018

spplante commented Jun 11, 2018

stact commented Mar 17, 2020

spplante commented Mar 17, 2020

stact commented Mar 17, 2020

spplante commented Mar 17, 2020 • edited Loading

stact commented Mar 17, 2020

poojakadam19 commented Oct 11, 2023

spplante commented Jun 6, 2018 •

edited

Loading

spplante commented Jun 8, 2018 •

edited

Loading

Loevbo commented Jun 8, 2018 •

edited

Loading

spplante commented Jun 8, 2018 •

edited

Loading

Loevbo commented Jun 8, 2018 •

edited

Loading

spplante commented Mar 17, 2020 •

edited

Loading