[03. Data Loading / 01. Loaders]: Having `optional` set to false in `~/.npmrc` breaks compiling the playground app

[Janeene Beeforth]

When starting on this exercise, as soon as I tried to use the imported db the app would fail to compile, complaining that msw was not installed but required by @mswjs/data.

It took me almost 45 minutes to track down that the error was due to an old and long forgotten setting in my ~/.npmrc file that disabled installing optional dependencies, and since msw was an optional dependency for @mswjs/data it therefore wasn't being installed.

It may be worth adding a comment or trouble-shooting step that if the compiler is not able to compile the project due to a dependency being missing, and the dependency is listed as an optional dependency, to check that you haven't accidentally disabled installing optional dependencies in an old ~/.npmrc file.

To reproduce:

• Create a ~/.npmrc file
• Add the line optional=false to the file
• Rerun npm run setup
• Run npm run start
• Follow the instructions to create a loader that uses the db snippet provided by moneybags.

Errors encountered when compiling (complete with hint from npm that there was something going on with optional deps, but that caused additional confusion because it was saying that the default if the options were omitted were that they were to be installed but didn't say that I had a local npmrc option that was overriding the default and since I hadn't used the command line parameters it didn't make sense as to why it wasn't then being installed):

$> npm run start
npm WARN config optional Use `--omit=optional` to exclude optional dependencies, or
npm WARN config `--include=optional` to include them.
npm WARN config 
npm WARN config     Default value does install optional deps unless otherwise omitted.

> start
> kcdshop start

🐨  Let's get learning!
Local:            http://localhost:5639
On Your Network:  http://192.168.1.20:5639
Press Ctrl+C to stop
[playground:4000] npm
[playground:4000]  WARN config optional Use `--omit=optional` to exclude optional dependencies, or
[playground:4000] npm WARN config `--include=optional` to include them.
[playground:4000] npm WARN config 
[playground:4000] npm WARN config     Default value does install optional deps unless otherwise omitted.
[playground:4000] 
[playground:4000] 
[playground:4000] > dev
[playground:4000] > remix dev --manual -c "node ./server/dev-server.js"
[playground:4000] 
[playground:4000] 
[playground:4000] 
[playground:4000]  💿  remix dev
[playground:4000] 
[playground:4000] 
[playground:4000] [info] building...
[playground:4000] 
[playground:4000] [info] built (1s)
[playground:4000] 
[playground:4000] 1:47:55 AM [tsx] rerunning
[playground:4000] 
[playground:4000] Debugger listening on ws://127.0.0.1:9229/28e8607b-43ed-4a1e-8b1a-53d36d5a3ea5
[playground:4000] For help, see: https://nodejs.org/en/docs/inspector
[playground:4000] 
[playground:4000] 🚀  We have liftoff!
[playground:4000] 
[playground:4000] Local:            http://localhost:4000
[playground:4000] On Your Network:  http://192.168.1.20:4000
[playground:4000] Press Ctrl+C to stop
[playground:4000] 
[playground:4000] 
[playground:4000] 
[playground:4000] HEAD / 200 - - 23.242 ms
[playground:4000] 
[playground:4000] GET / 200 - - 5.944 ms
[playground:4000] 
[playground:4000] [info] rebuilding... (~ app/routes/users+/$username_+/notes.$noteId.tsx)
[playground:4000] 
[playground:4000] [info] rebuilt (227ms)
[playground:4000] 
[playground:4000] second error, exiting
[playground:4000] 
[playground:4000] Error: Cannot find module 'msw'
[playground:4000] Require stack:
[playground:4000] - /home/dawnmist/src/epicweb-dev/full-stack-foundations/node_modules/@mswjs/data/lib/model/generateRestHandlers.js
[playground:4000] - /home/dawnmist/src/epicweb-dev/full-stack-foundations/node_modules/@mswjs/data/lib/factory.js
[playground:4000] - /home/dawnmist/src/epicweb-dev/full-stack-foundations/node_modules/@mswjs/data/lib/index.js
[playground:4000]     at Module._resolveFilename (node:internal/modules/cjs/loader:995:15)
[playground:4000]     at l.default._resolveFilename (/home/dawnmist/src/epicweb-dev/full-stack-foundations/node_modules/tsx/dist/cjs/index.cjs:1:1671)
[playground:4000]     at Module._load (node:internal/modules/cjs/loader:841:27)
[playground:4000]     at Module.require (node:internal/modules/cjs/loader:1061:19)
[playground:4000]     at require (node:internal/modules/cjs/helpers:103:18)
[playground:4000]     at HTTPError (/home/dawnmist/src/epicweb-dev/full-stack-foundations/node_modules/@mswjs/data/lib/model/generateRestHandlers.js:34:13)
[playground:4000]     at Object.<anonymous> (/home/dawnmist/src/epicweb-dev/full-stack-foundations/node_modules/@mswjs/data/lib/model/generateRestHandlers.js:190:32)
[playground:4000]     at Module._compile (node:internal/modules/cjs/loader:1159:14)
[playground:4000]     at Object.j (/home/dawnmist/src/epicweb-dev/full-stack-foundations/node_modules/tsx/dist/cjs/index.cjs:1:1197)
[playground:4000]     at Module.load (node:internal/modules/cjs/loader:1037:32) {
[playground:4000]   code: 'MODULE_NOT_FOUND',
[playground:4000]   requireStack: [
[playground:4000]     '/home/dawnmist/src/epicweb-dev/full-stack-foundations/node_modules/@mswjs/data/lib/model/generateRestHandlers.js',
[playground:4000]     '/home/dawnmist/src/epicweb-dev/full-stack-foundations/node_modules/@mswjs/data/lib/factory.js',
[playground:4000]     '/home/dawnmist/src/epicweb-dev/full-stack-foundations/node_modules/@mswjs/data/lib/index.js'
[playground:4000]   ]
[playground:4000] }
[playground:4000] 

[Kent C. Dodds]

Thanks for opening this! To be clear, did you experience this issue in the foundations workshop? Because this workshop doesn't include @mswjs/data as a dependency. Did you perhaps have this issue in the web forms workshop?

I think the proper fix would be to just add msw to the affected projects. I just want to make sure I understand correctly where you're experiencing this issue.

Nevermind, I was looking in the wrong place. I'll get this fixed. Thanks!