Task 'serve' is not in your gulpfile

[DKOliver]

Sample

https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-rss-reader

Author(s)

@hugoabernier

What happened?

I'm trying to preview this sample but i'm running into this error after running npm install in the folder

I am running node 10.16.3 and Gulp V3

PS C:\Users\ot2\Desktop\sp-dev-fx-webparts\samples\react-rss-reader> gulp serve
Build target: DEBUG
[20:59:15] Using gulpfile ~\Desktop\sp-dev-fx-webparts\samples\react-rss-reader\gulpfile.js
[20:59:15] Task 'serve' is not in your gulpfile
[20:59:15] Please check the documentation for proper gulpfile formatting
[20:59:15] Task 'serve' is not in your gulpfile
[20:59:15] Please check the documentation for proper gulpfile formatting
About to exit with code: 1
Process terminated before summary could be written, possible error in async code not continuing!
Trying to exit with exit code 1

If i run just gulp or gulp build i get this

PS C:\Users\ot2\Desktop\sp-dev-fx-webparts\samples\react-rss-reader> gulp
Build target: DEBUG
[21:04:07] Using gulpfile ~\Desktop\sp-dev-fx-webparts\samples\react-rss-reader\gulpfile.js
[21:04:07] Starting gulp
[21:04:07] Starting 'default'...
[21:04:07] Starting subtask 'configure-sp-build-rig'...
[21:04:07] Finished subtask 'configure-sp-build-rig' after 2.56 ms
[21:04:07] Starting subtask 'pre-copy'...
[21:04:07] Finished subtask 'pre-copy' after 13 ms
[21:04:07] Starting subtask 'copy-static-assets'...
[21:04:07] Starting subtask 'sass'...
[21:04:07] Finished subtask 'copy-static-assets' after 97 ms
[21:04:07] Finished subtask 'sass' after 166 ms
[21:04:07] Starting subtask 'tslint'...
[21:04:08] [tslint] tslint version: 5.12.1
[21:04:08] Starting subtask 'tsc'...
[21:04:08] [tsc] typescript version: 3.3.4000
[21:04:10] Error - [tsc] src/webparts/rssReader/RssReaderWebPart.ts(171,17): error TS2416: Property 'dataVersion' in type 'RssReaderWebPart' is not assignable to the same property in base type 'BaseClientSideWebPart'.
[21:04:10] [tsc] Type 'import("C:/Users/ot2/Desktop/sp-dev-fx-webparts/samples/react-rss-reader/node_modules/@microsoft/sp-core-library/dist/index-internal").Version' is not assignable to type 'import("C:/Users/ot2/Desktop/sp-dev-fx-webparts/samples/react-rss-reader/node_modules/@microsoft/sp-http/node_modules/@microsoft/sp-core-library/dist/index-internal").Version'.
[21:04:10] [tsc] Types have separate declarations of a private property '_major'.
[21:04:10] Error - 'tsc' sub task errored after 2.63 s
exited with code 2
[21:04:10] 'default' errored after 3.34 s
[21:04:10]
[21:04:11] Finished subtask 'tslint' after 3.45 s
[21:04:11] ==================[ Finished ]==================
Error - [tsc] src/webparts/rssReader/RssReaderWebPart.ts(171,17): error TS2416: Property 'dataVersion' in type 'RssReaderWebPart' is not assignable to the same property in base type 'BaseClientSideWebPart'.
Error - 'tsc' sub task errored after 2.63 s
exited with code 2
[21:04:11] Project react-rssreader version:1.0.0
[21:04:11] Build tools version:3.17.11
[21:04:11] Node version:v10.16.3
[21:04:11] Total duration:6.24 s
[21:04:11] Task errors:2

Steps to reproduce

1. install npm in folder
2. gulp serve

Expected behavior

I presume a webpage with the plugin would open. :D

Target SharePoint environment

SharePoint Online

Developer environment

Windows

Browsers

• Internet Explorer
• Microsoft Edge
• Google Chrome
• FireFox
• Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Node.js version

v10.16.3

Additional environment details

I have followed this guide but used older version of Node JS and Gulp https://docs.microsoft.com/da-dk/sharepoint/dev/spfx/set-up-your-development-environment

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[Abderahman88]

Hi @DKOliver,

Tested it and I had no issues running the webpart. Have you tried to delete node_modules and do npm i again?
Can you show the content of gulp.js ?

[DKOliver]

Here's my gulp file

'use strict';

const gulp = require('gulp');
const path = require('path');
const build = require('@microsoft/sp-build-web');
const bundleAnalyzer = require('webpack-bundle-analyzer');

build.addSuppression(Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.);

/********************************************************************************************

• Adds an alias for handlebars in order to avoid errors while gulping the project

• webpack + require handlebars error handlebars-lang/handlebars.js#1174

• Adds a loader and a node setting for webpacking the handlebars-helpers correctly

• How To : Use handlebars-helpers with webpack & typescript helpers/handlebars-helpers#263
  ********************************************************************************************/
  build.configureWebpack.mergeConfig({
  additionalConfiguration: (generatedConfiguration) => {
  generatedConfiguration.resolve.alias = { handlebars: 'handlebars/dist/handlebars.min.js' };

  generatedConfiguration.module.rules.push(
  {
  test: /utils.js$/,
  loader: 'unlazy-loader',
  include: [
  /node_modules/,
  ]
  }
  );

  generatedConfiguration.node = {
  fs: 'empty'
  }

  const lastDirName = path.basename(__dirname);
  const dropPath = path.join(__dirname, 'temp', 'stats');
  generatedConfiguration.plugins.push(new bundleAnalyzer.BundleAnalyzerPlugin({
  openAnalyzer: false,
  analyzerMode: 'static',
  reportFilename: path.join(dropPath, ${lastDirName}.stats.html),
  generateStatsFile: true,
  statsFilename: path.join(dropPath, ${lastDirName}.stats.json),
  logLevel: 'error'
  }));

  return generatedConfiguration;
  }
  });

build.initialize(gulp);

So i tried doing what you said and removed node modules and did it again.

If i run gulp serve-deprecated it runs. Webpage runs but it's just a blank screen, but then i get this

Build target: DEBUG
[20:58:19] Using gulpfile ~\Desktop\sp-dev-fx-webparts\samples\react-rss-reader\gulpfile.js
[20:58:19] Starting 'serve-deprecated'...
[20:58:19] Starting gulp
[20:58:19] Starting subtask 'configure-sp-build-rig'...
[20:58:19] Finished subtask 'configure-sp-build-rig' after 2.97 ms
[20:58:19] Starting subtask 'spfx-serve'...
[20:58:19] [spfx-serve] To load your scripts, use this query string: ?debug=true&noredir=true&debugManifestsFile=https://localhost:4321/temp/manifests.js
[20:58:19] Starting server...
Starting api server on port 5432.
Registring api: /workbench
Registring api: /
[20:58:19] Finished subtask 'spfx-serve' after 126 ms
[20:58:19] Starting subtask 'pre-copy'...
[20:58:19] Finished subtask 'pre-copy' after 46 ms
[20:58:19] Starting subtask 'copy-static-assets'...
[20:58:19] Starting subtask 'sass'...
[20:58:19] Server started https://localhost:4321
[20:58:19] LiveReload started on port 35729
[20:58:19] Running server
[20:58:19] Opening https://localhost:5432/workbench using the default OS app
Request: [::ffff:127.0.0.1] '/workbench'
Request: '/temp/workbench.html'
[20:58:21] Finished subtask 'copy-static-assets' after 1.27 s
[20:58:21] Finished subtask 'sass' after 1.39 s
[20:58:21] Starting subtask 'tslint'...
[20:58:21] [tslint] tslint version: 5.12.1
[20:58:21] Starting subtask 'tsc'...
[20:58:21] [tsc] typescript version: 3.3.4000
Request: '/temp/manifests.js'
Request: '/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_en-us.js'
Request: '/temp/workbench-packages/@microsoft_sp-webpart-workbench/lib/api/workbenchInit.js'
[20:58:26] Error - [tsc] src/webparts/rssReader/RssReaderWebPart.ts(171,17): error TS2416: Property 'dataVersion' in type 'RssReaderWebPart' is not assignable to the same property in base type 'BaseClientSideWebPart'.
[20:58:26] [tsc] Type 'import("C:/Users/ot2/Desktop/sp-dev-fx-webparts/samples/react-rss-reader/node_modules/@microsoft/sp-core-library/dist/index-internal").Version' is not assignable to type 'import("C:/Users/ot2/Desktop/sp-dev-fx-webparts/samples/react-rss-reader/node_modules/@microsoft/sp-http/node_modules/@microsoft/sp-core-library/dist/index-internal").Version'.
[20:58:26] [tsc] Types have separate declarations of a private property '_major'.
[20:58:26] Error - 'tsc' sub task errored after 4.75 s
exited with code 2
[20:58:27] Finished subtask 'tslint' after 6.02 s
Request: '/temp/workbench.html'
Request: '/temp/manifests.js'
Request: '/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_en-us.js'
Request: '/temp/workbench-packages/@microsoft_sp-webpart-workbench/lib/api/workbenchInit.js'
Request: '/temp/workbench-packages/@microsoft_sp-webpart-workbench/lib/api/assets/server-icon.png'

[Abderahman88]

Hi @DKOliver,

I found something interesting on this blog post.

Based on your error, this can be the solution.

[Abderahman88]

Out of curiosity, can you run the command tsc -v ?

[DKOliver]

Out of curiosity, can you run the command tsc -v ?

Version 4.4.3

[Abderahman88]

I think, it's a conflict of different typescript versions on your machine. Have you tried the solution of the blog post?

[DKOliver]

Don't seem to have the option of using workspace in VS

[Abderahman88]

Can you check the steps in VS code:

1. File -> Preferences -> settings
2. Type in the settings search box typescript.tsdk
3. In my case, there is an empty textbox. Is it also empty in your case? (check User and Workspace)
   `
   

[DKOliver]

Can you check the steps in VS code:

1. File -> Preferences -> settings
2. Type in the settings search box typescript.tsdk
3. In my case, there is an empty textbox. Is it also empty in your case? (check User and Workspace)
   `
   

It's blank but i only have user and not workspace

[Abderahman88]

Workspace settings will be shown after you open a folder (f.e. react-rss-reader)

[DKOliver]

Workspace settings will be shown after you open a folder (f.e. react-rss-reader)

Oh okay. Sry i'm entirely new to this. Never used Visual Studio before really. I'm just a sysadmin that's been tasked with building a new sharepoint intranet lol

Anyway i opened the folder and changed the typescript version still no luck though. Getting the black screen

PS C:\Users\ot2\Desktop\sp-dev-fx-webparts\samples\react-rss-reader> gulp serve-deprecated
Build target: DEBUG
[21:24:34] Using gulpfile ~\Desktop\sp-dev-fx-webparts\samples\react-rss-reader\gulpfile.js
[21:24:34] Starting 'serve-deprecated'...
[21:24:34] Starting gulp
[21:24:34] Starting subtask 'configure-sp-build-rig'...
[21:24:34] Finished subtask 'configure-sp-build-rig' after 3.26 ms
[21:24:34] Starting subtask 'spfx-serve'...
[21:24:34] [spfx-serve] To load your scripts, use this query string: ?debug=true&noredir=true&debugManifestsFile=https://localhost:4321/temp/manifests.js
[21:24:35] Starting server...
Starting api server on port 5432.
Registring api: /workbench
Registring api: /
[21:24:35] Finished subtask 'spfx-serve' after 189 ms
[21:24:35] Starting subtask 'pre-copy'...
[21:24:35] Finished subtask 'pre-copy' after 84 ms
[21:24:35] Starting subtask 'copy-static-assets'...
[21:24:35] Starting subtask 'sass'...
[21:24:35] Server started https://localhost:4321
[21:24:35] LiveReload started on port 35729
[21:24:35] Running server
[21:24:35] Opening https://localhost:5432/workbench using the default OS app
[21:24:36] Finished subtask 'sass' after 1.2 s
[21:24:36] Starting subtask 'tslint'...
[21:24:37] [tslint] tslint version: 5.12.1
[21:24:37] Starting subtask 'tsc'...
[21:24:37] [tsc] typescript version: 3.3.4000
[21:24:37] Finished subtask 'copy-static-assets' after 2.46 s
[21:24:46] Error - [tsc] src/webparts/rssReader/RssReaderWebPart.ts(171,17): error TS2416: Property 'dataVersion' in type 'RssReaderWebPart' is not assignable to the same property in base type 'BaseClientSideWebPart'.
[21:24:46] [tsc] Type 'import("C:/Users/ot2/Desktop/sp-dev-fx-webparts/samples/react-rss-reader/node_modules/@microsoft/sp-core-library/dist/index-internal").Version' is not assignable to type 'import("C:/Users/ot2/Desktop/sp-dev-fx-webparts/samples/react-rss-reader/node_modules/@microsoft/sp-http/node_modules/@microsoft/sp-core-library/dist/index-internal").Version'.
[21:24:46] [tsc] Types have separate declarations of a private property '_major'.
Request: [::ffff:127.0.0.1] '/workbench'
[21:24:47] Finished subtask 'tslint' after 11 s
[21:24:47] Error - 'tsc' sub task errored after 9.91 s
exited with code 2
Request: '/temp/workbench.html'
Request: '/temp/workbench-packages/@microsoft_sp-webpart-workbench/lib/api/workbenchInit.js'
Request: '/temp/manifests.js'
Request: '/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_en-us.js'

[Abderahman88]

Have you done this?

[Abderahman88]

Another way, is to add // @ts-ignore to the dataVersion() function (RssReaderWebPart.ts)

[Abderahman88]

By the way, when you changed your Typescript version. Delete your node_modules and do npm install again. Just to be sure.

And normally, you need to use gulp-serve command

[DKOliver]

Have you done this?

Yes

Another way, is to add // @ts-ignore to the dataVersion() function (RssReaderWebPart.ts)

By the way, when you changed your Typescript version. Delete your node_modules and do npm install again. Just to be sure.

And normally, you need to use gulp-serve command

Okay i deleted node_modules and tried again. I cannot use gulp-serve as it's not a function in the gulpfile as i posted above

Adding @ts-ignore definitely did something. not sure tho if this is all i'm supposed to see?

Tho i am getting a lot of errors. It's a bit long so here's a pastebin https://pastebin.com/tDWEyQKL

[Abderahman88]

@DKOliver Can try out this command npm list -g --depth 0 ? What version of the generator is installed ? (Because gulp serve-deprecated is something from a higher version)

Can you also check package.json file? Do you see version 1.11.0 ?

[hugoabernier]

Closing this issue due to lack of response from original poster.

[WinPhyoEi]

Error - [tsc] src/webparts/addJsCssReference/components/AddJsCssReference.tsx(12,9): error TS2724: Module '"E:/github/sp-dev-fx-webparts/samples/react-add-js-css-ref/node_modules/@pnp/common/index"' has no exported member 'TypedHash'. Did you mean 'ITypedHash'?
[16:35:09] Error - 'tsc' sub task errored after 1

when I run react-add-js-css-ref webpart .I got this error when I run gulp bundle --ship . Could you please help me ? Thanks in advance !

[github-actions]

Wrong or missing author @mentions

Thank you for your submission, but you appear to have forgotten to @mention the sample author(s).

To help increase your chances of getting assistance from the original authors of the sample, you should make sure to @mention the actual authors (and not the repository maintainers).

Please note that the sample authors will not get notified about this issue unless you update this issue accordingly.

You can find the author(s) of each sample in the sample's README.md, under Solution.

We'll automatically close this issue in 7 days unless you update the issue.

For more information on how to create a good issue, refer to our wiki for more information: How to Create Good Issues