FAQ.md

FAQs / known issues

• 1. When I run npm run serve I see the error
• 2. After I applied sfpx-fast-serve tool I have formatting broken in gulpfile.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?

1. When I run npm run serve I see the error

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.

2. After I applied sfpx-fast-serve tool I have formatting broken in gulpfile.js

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.

4. Does it support React Hot Module Replacement (aka HMR)?

HMR is supported, however considered as experimental. Please checkout config settings option hotRefresh.

5. How to debug with Chrome Debugger extension from VSCode?

Just refer to the official documentation. The only difference is that instead of gulp serve you will use npm run serve

6. How to run with different locale?

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