Run into multiple "Module not found: Error: Can't resolve 'url' in '...'" errors when following along with the "Using Fluid with React" tutorial

[tpoth]

Describe the bug

I'm going to follow the tutorial to setup a fluid react app described at https://fluidframework.com/docs/recipes/react/.

So if i arrive at the point where npm run start should start the dev server, multiple Module not found: Error: Can't resolve 'url' in '...' errors are raised. And the application failes to start.

To Reproduce

Steps to reproduce the behavior:

1. in terminal window enter npx create-react-app fluid-react-tutorial --use-npm
2. change into the projects dir cd fluid-react-tutorial
3. install the fluid framework deps npm install @fluidframework/tinylicious-client fluid-framework
4. make the code changes described in the artitcle
5. overcome a first error in changing location to window.location
6. run the tinylicious server npx tinylicious
7. start ontother terminal and enter npm run start
8. the error occurs

Expected behavior

a button should be displayed followed by a timestamp

Logs

Compiled with problems:X

ERROR in ./node_modules/@fluidframework/container-loader/lib/utils.js 5:0-28

Module not found: Error: Can't resolve 'url' in 'C:\Users\tpoth\source\repos\fluid-react-tutorial\node_modules\@fluidframework\container-loader\lib'

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: { "url": require.resolve("url/") }'
	- install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "url": false }


ERROR in ./node_modules/@fluidframework/driver-utils/lib/insecureUrlResolver.js 5:0-28

Module not found: Error: Can't resolve 'url' in 'C:\Users\tpoth\source\repos\fluid-react-tutorial\node_modules\@fluidframework\driver-utils\lib'

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: { "url": require.resolve("url/") }'
	- install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "url": false }


ERROR in ./node_modules/@fluidframework/driver-utils/lib/multiDocumentServiceFactory.js 5:0-28

Module not found: Error: Can't resolve 'url' in 'C:\Users\tpoth\source\repos\fluid-react-tutorial\node_modules\@fluidframework\driver-utils\lib'

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: { "url": require.resolve("url/") }'
	- install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "url": false }


ERROR in ./node_modules/@fluidframework/sequence/node_modules/@fluidframework/driver-utils/lib/insecureUrlResolver.js 5:0-28

Module not found: Error: Can't resolve 'url' in 'C:\Users\tpoth\source\repos\fluid-react-tutorial\node_modules\@fluidframework\sequence\node_modules\@fluidframework\driver-utils\lib'

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: { "url": require.resolve("url/") }'
	- install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "url": false }


ERROR in ./node_modules/@fluidframework/sequence/node_modules/@fluidframework/driver-utils/lib/multiDocumentServiceFactory.js 5:0-28

Module not found: Error: Can't resolve 'url' in 'C:\Users\tpoth\source\repos\fluid-react-tutorial\node_modules\@fluidframework\sequence\node_modules\@fluidframework\driver-utils\lib'

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: { "url": require.resolve("url/") }'
	- install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "url": false }


ERROR in ./node_modules/@fluidframework/server-services-client/lib/restWrapper.js 5:0-43

Module not found: Error: Can't resolve 'querystring' in 'C:\Users\tpoth\source\repos\fluid-react-tutorial\node_modules\@fluidframework\server-services-client\lib'

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: { "querystring": require.resolve("querystring-es3") }'
	- install 'querystring-es3'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "querystring": false }


ERROR in ./node_modules/fluid-framework/node_modules/@fluidframework/driver-utils/lib/insecureUrlResolver.js 5:0-28

Module not found: Error: Can't resolve 'url' in 'C:\Users\tpoth\source\repos\fluid-react-tutorial\node_modules\fluid-framework\node_modules\@fluidframework\driver-utils\lib'

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: { "url": require.resolve("url/") }'
	- install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "url": false }


ERROR in ./node_modules/fluid-framework/node_modules/@fluidframework/driver-utils/lib/multiDocumentServiceFactory.js 5:0-28

Module not found: Error: Can't resolve 'url' in 'C:\Users\tpoth\source\repos\fluid-react-tutorial\node_modules\fluid-framework\node_modules\@fluidframework\driver-utils\lib'

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: { "url": require.resolve("url/") }'
	- install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "url": false }

Maybe this is a known issue right now, a notice in the article would be helpful.

[tylerbutler]

@tpoth It's likely that create-react-app is now using Webpack 5 instead of Webpack 4, and we have an outstanding issue with webpack 5, #8725 and #9506. You can work around it by adding the polyfills to the webpack config, but we need to fix our packages too.

[zubeirom]

What worked for me was following workaround:

1. npm uninstall webpack
2. Delete package-lock.json
3. npm install [email protected] --force

[tpoth]

@zubeirtech and all above repliers: Thanks for your help. I'll give your hint's a try. 😃

[DanWahlin]

I'm hitting this with Angular 14 as well (same error it looks like so due to webpack 5.72.1). It's not as simple as uninstalling webpack in this case since it's baked into the Angular CLI schematics that generate the project and doing that breaks other things with the build from what I'm seeing. I'll have to look into what options are available for the polyfills it looks like.

Initial project (still early) can be found here:

https://github.com/DanWahlin/angular-todo-list-fluid

Update for anyone using Angular 14:

• Ran npm install -D for url and @types/debug.

• Added the following into angular.json to get rid of all of the commonJS warnings during a build (in the architect --> build --> options section):

  "allowedCommonJsDependencies": [
    "debug",
    "crc-32",
    "cross-fetch",
    "json-stringify-safe",
    "lodash/merge",
    "lodash/cloneDeep",
    "path-browserify",
    "querystring",
    "sillyname",
    "url-parse",
    "url",
    "@fluidframework/container-runtime-definitions",
    "@fluidframework/runtime-definitions",
    "@fluidframework/test-runtime-utils"
  ]
  

• I'm also using @ngx-env/builder and the env.d.ts file it adds was causing a Process issue. Since that is only a definition file and I can get by without the code help, I deleted that file and the problem went away. Not a Fluid issue though.

It's building now - way too painful to get to this point though so hopefully this gets smoothed out with the Fluid packages. Just getting started on this project, but I'm hopefully this resolves other potential issues down the line.

[rsommerfeld]

Actually I stumbled upon the same issue, but solved it very indirectly. What I did:

1. Manually install the missing dependencies, I think it was npm i url buffer assert
2. Update the index.tsx file to use ReactDOM.render() instead of ReactDOM.createRoot()

Specifically, the code I am using now is

ReactDOM.render(
	<React.StrictMode>
		<App />
	</React.StrictMode>,
	document.getElementById('root')
);

instead of this old code:

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Maybe something like this could help you with Angular as well! At least this way of fixing it doesn't involve actually downgrading webpack - I'm on webpack 5.5.0 and can use fluid without problems.

[microsoft-github-policy-service[bot]]

This PR has been automatically marked as stale because it has had no activity for 60 days. It will be closed if no further activity occurs within 8 days of this comment. Thank you for your contributions to Fluid Framework!