Webiny-js: Error: Cannot find module 'cross-fetch/polyfill' (global installation)

[TonnyORG]

So far, today is my first day with Webiny and trying to spin a local project I got an unexpected error.

This is:

• Bug

Specifications

• version: 2.2.4
• OS: MacOS (10.14.5 Mojave)
• Browser: Chrome (75.0.3770.100)
• yarn: 1.16.0
• node: v10.16.0

Expected Behavior

I guess it should spin up a local server for the admin site

Actual Behavior

⇢ webiny start-app admin
(node:32987) UnhandledPromiseRejectionWarning: Error: Cannot find module 'cross-fetch/polyfill'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/Users/tonny/.config/yarn/global/node_modules/webiny-cli/lib/apps/ssrServer.js:10:1)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
(node:32987) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:32987) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Steps to Reproduce the Problem

I've installed webiny-cli globally through yarn global add webiny-cli, just later I just follow these steps:

1. Create an app directory (mkdir app ; cd app)
2. Once in, yarn init
3. Later webiny init
4. Edited the .env file to use MongoDB Atlas
5. Ran webiny install-functions which filled the Mongo DB with a few tables inside.
6. Ran webiny start-app admin and here is where the error happened.

Detailed Description

I've not much information about it, I am still not familiar with either the stack or the project.

Possible Solution

I've no idea, I bet it might be to the global installation related because to me it seems like your docs are focused on having webiny-cli installed locally on per project basis (I do suggest to use a global client instead so you don't have to install it all around in your projects).

[Pavel910]

Hi @TonnyORG, it's weird because cross-fetch is specified as a dependency in the admin app. Try installing it as a root level dependency, so from the root of your project run yarn add cross-fetch -W. Let me know if this helps.

Regarding local vs. global CLI installation, we are still in beta and there are many things that can change between versions so global installation would introduce more problems than it would solve. Once we are stable and out of beta we will most probably update our docs to use the global installation as, as you have correctly pointed out, it is easier to install once and use everywhere.

Cheers and let me know how it goes :)

[TonnyORG]

yarn add cross-fetch -W

@Pavel910 thanks for your response, unfortunately, that didn't work :(

[Pavel910]

@TonnyORG that's a shame :( it's late in the evening in my timezone, I'll go through the clean project setup tomorrow and get back to you as soon as I find something of interest. Cheers! 🍺

[TonnyORG]

@Pavel910 tyvm man, I appreciate it!

[Pavel910]

@TonnyORG I created a fresh project using local installation of webiny-cli, and everything is working as expected. Let's try a couple of things:

• run yarn list --pattern cross-fetch - just to check whether the package is installed
• in your current project, try running yarn why cross-fetch, it will show you something along these lines, it shows which packages depend on the cross-fetch package:

~/webiny/js/antonio-test  yarn why cross-fetch
yarn why v1.16.0
[1/4] 🤔  Why do we have the module "cross-fetch"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "[email protected]"
info Reasons this module exists
   - "_project_#admin" depends on it
   - Hoisted from "_project_#admin#cross-fetch"
info Disk size without dependencies: "112KB"
info Disk size with unique dependencies: "348KB"
info Disk size with transitive dependencies: "348KB"
info Number of shared dependencies: 2
✨  Done in 1.11s.

Send me the output of both commands.

Other than that, try creating a project with local installation of the cli (remove the global installation first), and see if you get the same problem. Just wondering if it has something to do with the global installation.

Thanks for trying this out and reporting the problem, hopefully we'll figure out what's wrong.

[TonnyORG]

• yarn why cross-fetch

Here is the output:

⇢ yarn why cross-fetch
yarn why v1.16.0
[1/4] 🤔  Why do we have the module "cross-fetch"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "[email protected]"
info Reasons this module exists
   - "_project_#admin" depends on it
   - Hoisted from "_project_#admin#cross-fetch"
info Disk size without dependencies: "112KB"
info Disk size with unique dependencies: "348KB"
info Disk size with transitive dependencies: "348KB"
info Number of shared dependencies: 2
✨  Done in 0.86s.

Let me try the local cli way.

UPDATE:
@Pavel910 local cli installation worked. TYVM!

[Pavel910]

@TonnyORG Great! Sorry for the late reply, missed the thread somehow :(
I will add the "global" installation to our TODO list and test it properly, thank you for giving it a spin!

[roman-vabishchevych]

You can use local webiny cli. Just add the scripts to package.json:

"start:admin": "./node_modules/.bin/webiny start-app admin",
"start:site": "REACT_APP_ENV=browser ./node_modules/.bin/webiny start-app site",
"start:api": "./node_modules/.bin/webiny start-functions",
"build:admin": "./node_modules/.bin/webiny build-app admin",
"build:site": "./node_modules/.bin/webiny build-app site",