Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Task 'serve' is not in your gulpfile #2065

Closed
9 tasks
DKOliver opened this issue Oct 3, 2021 · 20 comments
Closed
9 tasks

Task 'serve' is not in your gulpfile #2065

DKOliver opened this issue Oct 3, 2021 · 20 comments
Labels
sample: react-rss-reader status:wrong-author type:bug-suspected Suspected bug (not working as designed/expected). See type:bug-confirmed for confirmed bugs

Comments

@DKOliver
Copy link

DKOliver commented Oct 3, 2021

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

@DKOliver DKOliver added Needs: Triage 🔍 type:bug-suspected Suspected bug (not working as designed/expected). See type:bug-confirmed for confirmed bugs labels Oct 3, 2021
@ghost
Copy link

ghost commented Oct 3, 2021

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

@Abderahman88
Copy link
Contributor

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 ?

image

@DKOliver
Copy link
Author

DKOliver commented Oct 4, 2021

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

billede

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
Copy link
Contributor

Hi @DKOliver,

I found something interesting on this blog post.

Based on your error, this can be the solution.

image

@Abderahman88
Copy link
Contributor

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

@DKOliver
Copy link
Author

DKOliver commented Oct 4, 2021

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

Version 4.4.3

@Abderahman88
Copy link
Contributor

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

@DKOliver
Copy link
Author

DKOliver commented Oct 5, 2021

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

@Abderahman88
Copy link
Contributor

Abderahman88 commented Oct 5, 2021

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)
    `
    image

@DKOliver
Copy link
Author

DKOliver commented Oct 6, 2021

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)
    `
    image

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

@Abderahman88
Copy link
Contributor

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

image

@DKOliver
Copy link
Author

DKOliver commented Oct 6, 2021

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

image

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

image

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
Copy link
Contributor

Have you done this?

image

@Abderahman88
Copy link
Contributor

Abderahman88 commented Oct 6, 2021

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

image

@Abderahman88
Copy link
Contributor

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
Copy link
Author

DKOliver commented Oct 6, 2021

Have you done this?

image

Yes

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

image

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

image

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

image

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

@Abderahman88
Copy link
Contributor

@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)

image

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

@hugoabernier
Copy link
Collaborator

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

@WinPhyoEi
Copy link

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
image

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
sample: react-rss-reader status:wrong-author type:bug-suspected Suspected bug (not working as designed/expected). See type:bug-confirmed for confirmed bugs
Projects
None yet
Development

No branches or pull requests

4 participants