search

s-KaiNet / spfx-fast-serve

Improve your SharePoint Framework development flow by speeding up the "serve" command :rocket:
MIT License
138 stars 11 forks source link

Fast Serve + SPFx 1.19.0 + Specific Imports from Paths breaks #147

Closed 6gal6ler6 closed 2 months ago

6gal6ler6 commented 2 months ago

Description:

I found that Fast Serve breaks in SPFx 1.19.0 when you use Specific Imports from Paths.

This was not happening before, as I got a big project with many webparts and imports and I always use Specific Imports from Paths instead of Single Import from Module Entry Point

Problem Statement:

How to reproduce:

Create a new project using SPFx 1.19.0, add some dependencies and add fast serve.

Example Code: https://github.com/6gal6ler6/fast-serve-1190-issues

Let´s execute the fast-serve command:

[14:05:29] Node flags detected: --max-old-space-size=8192
[14:05:29] Respawned to PID: 17024
Build target: DEBUG
[14:05:32] Using gulpfile C:\Sources\SPFx20240901\gulpfile.js
[14:05:32] Starting 'bundle'...
[14:05:32] Starting gulp
[14:05:32] Starting subtask 'pre-copy'...
[14:05:32] Finished subtask 'pre-copy' after 47 ms
[14:05:32] Starting subtask 'copy-static-assets'...
[14:05:32] Starting subtask 'sass'...
[14:05:32] Finished subtask 'sass' after 12 ms
[14:05:32] Starting subtask 'lint'...
[14:05:32] [lint] eslint version: 8.7.0
[14:05:32] Starting subtask 'tsc'...
[14:05:32] [tsc] typescript version: 4.7.4
[14:05:32] Finished subtask 'copy-static-assets' after 71 ms
[14:05:35] Finished subtask 'tsc' after 2.78 s
[14:05:35] Starting subtask 'save-webpack-config'...
[14:05:35] Finished subtask 'save-webpack-config' after 514 μs
[14:05:37] Finished subtask 'lint' after 4.3 s
[14:05:37] Starting subtask 'post-copy'...
[14:05:37] Finished subtask 'post-copy' after 332 μs
[14:05:37] Starting subtask 'configure-webpack'...
[14:05:37] Finished subtask 'configure-webpack' after 412 ms
[14:05:37] Starting subtask 'webpack'...
[14:05:41] Error - [webpack] 'dist':
[object Object]
[object Object]
[object Object]
[14:05:41] Finished subtask 'webpack' after 3.74 s
[14:05:41] Finished 'bundle' after 8.52 s
[14:05:41] ==================[ Finished ]==================
Error - [webpack] 'dist':
[object Object]
[object Object]
[object Object]
[14:05:42] Project sp-fx-20240901 version:0.0.1
[14:05:42] Build tools version:3.18.1
[14:05:42] Node version:v18.20.4
[14:05:42] Total duration:12 s
[14:05:42] Task errors:1
[14:05:42] [fast-serve] The process terminated unexpectedly

Well, well, well... let´s try "gulp serve instead"...

Clean the Project and Build it 😊

Build target: DEBUG
[14:09:57] Using gulpfile C:\Sources\SPFx20240901\gulpfile.js
[14:09:57] Starting 'clean'...
[14:09:57] Starting gulp
[14:09:57] Starting subtask 'clean'...
[14:09:57] Finished subtask 'clean' after 24 ms
[14:09:57] Finished 'clean' after 27 ms
[14:09:58] ==================[ Finished ]==================
[14:09:58] Project sp-fx-20240901 version:0.0.1
[14:09:58] Build tools version:3.18.1
[14:09:58] Node version:v18.20.4
[14:09:58] Total duration:3.07 s
Build target: DEBUG
[14:10:01] Using gulpfile C:\Sources\SPFx20240901\gulpfile.js
[14:10:01] Starting 'build'...
[14:10:01] Starting gulp
[14:10:01] Starting subtask 'pre-copy'...
[14:10:01] Finished subtask 'pre-copy' after 47 ms
[14:10:01] Starting subtask 'copy-static-assets'...
[14:10:01] Starting subtask 'sass'...
[14:10:01] Finished subtask 'sass' after 12 ms
[14:10:01] Starting subtask 'lint'...
[14:10:01] [lint] eslint version: 8.7.0
[14:10:01] Starting subtask 'tsc'...
[14:10:01] [tsc] typescript version: 4.7.4
[14:10:01] Finished subtask 'copy-static-assets' after 78 ms
[14:10:04] Finished subtask 'tsc' after 2.87 s
[14:10:05] Finished subtask 'lint' after 4.11 s
[14:10:05] Starting subtask 'post-copy'...
[14:10:05] Finished subtask 'post-copy' after 201 μs
[14:10:05] Finished 'build' after 4.18 s
[14:10:06] ==================[ Finished ]==================
[14:10:06] Project sp-fx-20240901 version:0.0.1
[14:10:06] Build tools version:3.18.1
[14:10:06] Node version:v18.20.4
[14:10:06] Total duration:7.24 s

Run "gulp serve":

Oh No

image

PS C:\Sources\SPFx20240901> gulp serve --nobrowser
Build target: DEBUG
[14:11:40] Using gulpfile C:\Sources\SPFx20240901\gulpfile.js
[14:11:40] Starting 'serve'...
[14:11:40] Starting gulp
[14:11:40] Starting subtask 'spfx-serve'...
[14:11:40] [spfx-serve] To load your scripts, use this query string: ?debug=true&noredir=true&debugManifestsFile=https://localhost:4321/temp/manifests.js
[14:11:40] Starting server...
[14:11:40] Finished subtask 'spfx-serve' after 203 ms
[14:11:40] Starting subtask 'pre-copy'...
[14:11:40] Finished subtask 'pre-copy' after 44 ms
[14:11:40] Starting subtask 'copy-static-assets'...
[14:11:40] Starting subtask 'sass'...
[14:11:40] Server started https://localhost:4321
[14:11:40] LiveReload started on port 35729
[14:11:40] Running server
[14:11:40] Finished subtask 'sass' after 23 ms
[14:11:40] Starting subtask 'lint'...
[14:11:40] [lint] eslint version: 8.7.0
[14:11:40] Starting subtask 'tsc'...
[14:11:40] [tsc] typescript version: 4.7.4
[14:11:43] Finished subtask 'copy-static-assets' after 2.78 s
[14:11:44] Finished subtask 'tsc' after 3.71 s
[14:11:44] Finished subtask 'lint' after 4.54 s
[14:11:44] Starting subtask 'post-copy'...
[14:11:44] Finished subtask 'post-copy' after 153 μs
[14:11:44] Starting subtask 'configure-webpack'...
[14:11:46] Finished subtask 'configure-webpack' after 1.1 s
[14:11:46] Starting subtask 'webpack'...
[14:11:57] Error - [webpack] 'dist':
[object Object]
[object Object]
[object Object]

[14:11:57] Finished subtask 'webpack' after 11 s
[14:11:57] Starting subtask 'reload'...
[14:11:57] Finished subtask 'reload' after 1.93 ms
  Request: '/temp/manifests.js'
  Request: '/temp/manifests.js'
  Request: '/dist/ControlStrings_en-us.js'
  Request: '/dist/fast-serve-test-web-part.js'
  Request: '/dist/ControlStrings_en-us.js'
  Request: '/dist/fast-serve-test-web-part.js'
  Request: '/dist/fast-serve-test-web-part.js'
  Request: '/dist/fast-serve-test-web-part.js'
  Request: '/dist/fast-serve-test-web-part.js'
  Request: '/dist/fast-serve-test-web-part.js'
  Request: '/dist/en-us.js.map'
  Request: '/dist/fast-serve-test-web-part.js.map'
  Request: '/dist/en-us.js.map'
  Request: '/dist/fast-serve-test-web-part.js.map'

Lets see if one can find more... BINGO...

sp-webpart-workbench-assembly_en-us_b3e7238874f3a231ca9d425fd31410ac.js:196 Could not load fast-serve-test-web-part in require. Error: Cannot find module '@fluentui/react/lib/components/Stack/Stack'
    at webpackMissingModule (ListPicker.module.css:4:167)
    at 8498 (ListPicker.module.css:4:167)

...and many more things with imports

Changed imports

import { Dropdown, DropdownMenuItemType, IDropdownOption, IDropdownStyles } from '@fluentui/react/lib/Dropdown';
import { Stack } from '@fluentui/react/lib/Stack';

reload ... and it works

image

Lets see if fast-serve works now

> fast-serve

[14:24:20] Node flags detected: --max-old-space-size=8192
[14:24:20] Respawned to PID: 33776
Build target: DEBUG
[14:24:23] Using gulpfile C:\Sources\SPFx20240901\gulpfile.js
[14:24:23] Starting 'bundle'...
[14:24:23] Starting gulp
[14:24:23] Starting subtask 'pre-copy'...
[14:24:23] Finished subtask 'pre-copy' after 46 ms
[14:24:23] Starting subtask 'copy-static-assets'...
[14:24:23] Starting subtask 'sass'...
[14:24:23] Finished subtask 'sass' after 13 ms
[14:24:23] Starting subtask 'lint'...
[14:24:23] [lint] eslint version: 8.7.0
[14:24:23] Starting subtask 'tsc'...
[14:24:23] [tsc] typescript version: 4.7.4
[14:24:23] Finished subtask 'copy-static-assets' after 73 ms
[14:24:26] Finished subtask 'tsc' after 2.88 s
[14:24:26] Starting subtask 'save-webpack-config'...
[14:24:26] Finished subtask 'save-webpack-config' after 463 μs
[14:24:27] Finished subtask 'lint' after 4.09 s
[14:24:27] Starting subtask 'post-copy'...
[14:24:27] Finished subtask 'post-copy' after 257 μs
[14:24:27] Starting subtask 'configure-webpack'...
[14:24:27] Finished subtask 'configure-webpack' after 424 ms
[14:24:27] Starting subtask 'webpack'...
[14:24:31] Finished subtask 'webpack' after 4.13 s
[14:24:31] Finished 'bundle' after 8.71 s
[14:24:32] ==================[ Finished ]==================
[14:24:32] Project sp-fx-20240901 version:0.0.1
[14:24:32] Build tools version:3.18.1
[14:24:32] Node version:v18.20.4
[14:24:32] Total duration:12 s
[14:24:34] [fast-serve] To load your scripts, use this query string: ?debug=true&noredir=true&debugManifestsFile=https://localhost:4321/temp/manifests.js
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: https://localhost:4321/, https://[::1]:4321/
<i> [webpack-dev-server] Content not from webpack is served from 'C:\Sources\SPFx20240901\temp' directory
<i> [webpack-dev-server] 404s will fallback to '/index.html'
Entrypoint fast-serve-test-web-part 3.02 MiB = fast-serve-test-web-part.js
webpack compiled in 2436 ms
Type-checking in progress...
No errors found.

Well it worked after I changed to "Single Import from Module Entry Point"

package.json Dependencies:

  "dependencies": {
    "@fluentui/react": "^8.120.7",
    "@fluentui/react-hooks": "^8.8.12",
    "@microsoft/sp-component-base": "1.19.0",
    "@microsoft/sp-core-library": "1.19.0",
    "@microsoft/sp-lodash-subset": "1.19.0",
    "@microsoft/sp-office-ui-fabric-core": "1.19.0",
    "@microsoft/sp-property-pane": "1.19.0",
    "@microsoft/sp-webpart-base": "1.19.0",
    "@pnp/spfx-controls-react": "3.19.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "tslib": "2.3.1"
  },
  "devDependencies": {
    "@microsoft/eslint-config-spfx": "1.20.1",
    "@microsoft/eslint-plugin-spfx": "1.20.1",
    "@microsoft/rush-stack-compiler-4.7": "0.1.0",
    "@microsoft/sp-build-web": "1.20.1",
    "@microsoft/sp-module-interfaces": "1.20.1",
    "@rushstack/eslint-config": "2.5.1",
    "@types/react": "17.0.45",
    "@types/react-dom": "17.0.17",
    "@types/webpack-env": "~1.15.2",
    "ajv": "^6.12.5",
    "eslint": "8.7.0",
    "eslint-plugin-react-hooks": "4.3.0",
    "gulp": "4.0.2",
    "spfx-fast-serve-helpers": "~1.19.3",
    "typescript": "4.7.4"
  }
germain-italic commented 2 months ago

I'm having the same issue, but where is the webpack.extend.js in your repo? 👀

Edit: that's how I understood that webpack.extend.js must be placed in /fast-serve, not in /

Solved the problem for me with 1.19.0

Edit 2: fast-serve webpack extend didn't create the file for me.

6gal6ler6 commented 2 months ago

According to "Webpack extensibility", is not required

s-KaiNet commented 2 months ago

This is not a fast-serve issue actually, because before running, fast-serve relies on gulp bundle command and executes it. If the command fails, fast-serve will work incorrectly. The issue here is actually in webpack 5, introduced in SPFx 1.19, which now loads some imports differently, which leads to your problem (Cannot find module.... etc). So I will close the issue, since I cannot fix it, it's on SPFx side :blush:

PS:

Edit 2: fast-serve webpack extend didn't create the file for me.

you should run npx fast-serve webpack extend and it will create the file. Also check that you have the right versions for fast-serve, this command only available in 1.18+