Search code examples
webpackdocusaurus

Docusaurus 2 App trying to resolve dev dependencies


I have a Docusaurus 2 (using version 2.0.0-beta.9) app where I'm using msw to write a few tests. The tests work fine the problem is that when running npm start (which runs docusaurus start), I'm seeing docusaurus trying to resolve msw dependencies, which does not make sense given I'm only referring to this dependency from test files. Is it possible to exclude the msw dev dependency to be processed by the underlying webpack config own by docusaurus?

Here are the logs

> website@0.0.0 start
> docusaurus start --host 0.0.0.0

Starting the development server...
Docusaurus website is running at: http://localhost:3000/

✖ Client
  Compiled with some errors in 6.34s

ℹ 「wds」: Project is running at http://0.0.0.0:3000/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: Content not from webpack is served from /Users/danielcaldas/code/my-project/website
ℹ 「wds」: 404s will fallback to /index.html


Module not found: Error: Can't resolve 'util' in '/Users/danielcaldas/code/my-project/website/node_modules/@mswjs/interceptors/lib/interceptors/ClientRequest'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
    - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "util": false }
Module not found: Error: Can't resolve 'http' in '/Users/danielcaldas/code/my-project/website/node_modules/@mswjs/interceptors/lib/interceptors/ClientRequest'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

edit

Here's my current workaround. So a few more errors will popup along the way. I installed these fallback missing dependenings locally and editor the webpack config of docusaurus in my node_modules manually (I know not great...),

node_modules/@docusaurus/core/lib/webpack/base.js has the following content:

{
    // ...
    resolve: {
        // ...
        fallback: {
          assert: require.resolve('assert/'),
          http: require.resolve('stream-http'),
          https: require.resolve('https-browserify'),
          os: require.resolve('os-browserify/browser'),
          stream: require.resolve('stream-browserify'),
          timers: require.resolve('timers-browserify'),
          tty: require.resolve('tty-browserify'),
          zlib: require.resolve('browserify-zlib'),
        }
    },
    // ...
}

edit 2

It seems that docusuarus webpack was scanning under the folder __test__! Renaming __test__ to __tests__ resolved the issue, without hacking the webpack config.


Any help would be really appreciated! Thanks!


Solution

  • I recommend checking that you don't import msw in your main Docusaurus code. This is relevant only if you're using MSW for mocking in the browser. Nevertheless, a quick Cmd+F in a project's source files should be enough.

    If you feel that your test files are processed by Docusaurus build, still check for suspicious imports. That @mswjs/interceptors dependency import does appear from somewhere, so it's likely that there's a code that imports either msw/node or some other module that does. Keep an eye on the imports especially if you're using a custom module structure to enable mocks (i.e. a single mocks/index.js file that returns the correct setupWorker/setupServer based on the importee's environment).