- 1. When I run
npm run serve
I see the error - 2. After I applied
sfpx-fast-serve
tool I have formatting broken ingulpfile.js
- 3. I added a new dependency in my solution (or started using new import from "@microsoft/*" modules) and now I see some strange errors
- 4. Does it support React Hot Module Replacement (aka HMR)?
- 5. How to debug with Chrome Debugger extension from VSCode?
- 6. How to run with different locale?
ERROR in <Component>.tsx Cannot find module './<Component>.module.scss'
:
a. Try to explicitly change and then save any of .tsx
files in the solution in order to trigger the build. Maybe the error will disappear automatically. If not, go to #b
b. Check that you use styles
variable in .tsx
file. For example, if you have import styles from './<Component>.module.scss';
and you don't have usages of styles
in your <Component>.tsx
, you will see the error. Simply delete unused import. If it's not the case, goto #c
.
c. Maybe you don't have <Component>.module.scss.d.ts
which is generated automatically. Request generation by going to <Component>.module.scss
and explicitly saving the file using Ctrl+S
or just by changing something and saving. This should generate <Component>.module.scss.d.ts
and fix the issue.
d. The last thing to check is whether your Component is actually used inside your codebase. If it's unused, then the corresponding <Component>.module.scss.d.ts
will not be generated. To fix either include the component in your codebase using import statement or just run fast-serve
from scratch (on the initial run it should ignore unused components).
If nothing above works, please raise an issue.
sfpx-fast-serve
patches files and doesn't respect original file formatting (tabs vs whitespace, size, etc.). You have to fix it afterwards, if needed.
3. I added a new dependency in my solution (or started using new import from "@microsoft/*" modules) and now I see some strange errors
Every time you introduce a new dependency for your solution, you should re-run npm run serve
command, so that it picks up all new dependencies correctly.
HMR is supported, however considered as experimental. Please checkout config settings option hotRefresh
.
Just refer to the official documentation. The only difference is that instead of gulp serve
you will use npm run serve
You have two options here. If you support only one or two additional locales, you can create additional npm serve scripts (inside package.json
) with different locales support, i.e.
"serve-nl": "fast-serve --locale=nl-nl",
Take a note that I added --locale=nl-nl
to support NL locale.
Alternatively, if you need a lot of locales, you can create dynamic solution with environmental variables. To support this scenario, set a new environmental variable to be your locale code, i.e.
set SPFX_LOCALE=nl-nl
Then install cross-env
npm module:
npm i cross-env --save-dev --save-exact
Then update npm script to use this variable:
"serve-loc": "cross-env-shell fast-serve --locale=$SPFX_LOCALE"
Take a note on --locale=$SPFX_LOCALE
special syntax and using cross-env-shell
(part of cross-env
package, you don't need to install anything additionally).