Fdk run logs undefined when running react app template with certain configs

Hello,

I’ve faced a very strange issue while trying to create a react boilerplate app with some approaches/configs for internal purposes.

The original issue: when I run the app locally with fdk run, I simply get “undefined”.

Here are the NODE_DEBUG=fdk fdk run logs:

Ilya@FRACTAL6700 MINGW64 /d/dev/fd-react-app-boilerplate (master)
$ NODE_DEBUG=fdk fdk run
(logger.js) Starting FDK in node v10.18.0 on win32
(sequelize.js) setting up sqilite at "D:\dev\fd-react-app-boilerplate/.fdk/store.sqlite"
(index.js) Running with args {"cmd":"run","gopts":{},"opts":{},"goptArg":{},"optArg":{},"args":[]}
(data-util.js) Read {"version_details":{"fdkCli":{"version":"6.12.0","dl":"https://dl.freshdev.io/cli/fdk-6.12.0.tgz","cmd":"npm install https://dl.freshdev.io/cli/fdk-6.12.0.tgz -g"},"addon":{"version":"1.9.8","dl":"https://dl.freshdev.io/cli-addon/addon-1.9.
8.zip"},"forced_versions":["4.3.6"]},"last_updated":{"time_stamp":1630340275940}}
(data-util.js) Read {"version_details":{"fdkCli":{"version":"6.12.0","dl":"https://dl.freshdev.io/cli/fdk-6.12.0.tgz","cmd":"npm install https://dl.freshdev.io/cli/fdk-6.12.0.tgz -g"},"addon":{"version":"1.9.8","dl":"https://dl.freshdev.io/cli-addon/addon-1.9.
8.zip"},"forced_versions":["4.3.6"]},"last_updated":{"time_stamp":1630340275940}}
(updater.js) Check interval not met, skipping addon update
(manifest.js) Reloading manifest with {"platform-version":"2.0","product":{"freshdesk":{"location":{"full_page_app":{"url":"index.html","icon":"icon.svg"}}}},"whitelisted-domains":["https://*.freshdesk.com"]}.
(manifest.js) Inferred db as features.
(data-util.js) Read {"version_details":{"fdkCli":{"version":"6.12.0","dl":"https://dl.freshdev.io/cli/fdk-6.12.0.tgz","cmd":"npm install https://dl.freshdev.io/cli/fdk-6.12.0.tgz -g"},"addon":{"version":"1.9.8","dl":"https://dl.freshdev.io/cli-addon/addon-1.9.
8.zip"},"forced_versions":["4.3.6"]},"last_updated":{"time_stamp":1630340275940}}
(data-util.js) Read {"version_details":{"fdkCli":{"version":"6.12.0","dl":"https://dl.freshdev.io/cli/fdk-6.12.0.tgz","cmd":"npm install https://dl.freshdev.io/cli/fdk-6.12.0.tgz -g"},"addon":{"version":"1.9.8","dl":"https://dl.freshdev.io/cli-addon/addon-1.9.
8.zip"},"forced_versions":["4.3.6"]},"last_updated":{"time_stamp":1630340275940}}
(data-util.js) Read {"version_details":{"fdkCli":{"version":"6.12.0","dl":"https://dl.freshdev.io/cli/fdk-6.12.0.tgz","cmd":"npm install https://dl.freshdev.io/cli/fdk-6.12.0.tgz -g"},"addon":{"version":"1.9.8","dl":"https://dl.freshdev.io/cli-addon/addon-1.9.
8.zip"},"forced_versions":["4.3.6"]},"last_updated":{"time_stamp":1630340275940}}
(validate.js) asked to skip the following validations, 
(validate.js) running validator actions
(validate.js) running validator app-dir
(validate.js) running validator config-dir
(config-dir.js) Checking to see if D:\dev\fd-react-app-boilerplate/config/ exists.
(config-dir.js) Fetched the following config files iparams.json
(validate.js) running validator custom-objects
(validate.js) running validator event
(validate.js) running validator iparam
(validate.js) skipping validator lint
(validate.js) running validator manifest
(validate.js) skipping validator manifest-dependency
(validate.js) running validator oauth
(validate.js) skipping validator pkgsize
(validate.js) running validator schema
(watcher.js) Preparing to watch the following files ./app,./config,./manifest.json
(coverage-util.js) Snoozing coverage.
(frontend_framework-util.js) Found Custom Config at webpack.config.js
undefined

So, fdk seems to crash when finds my custom configs file.

Here are the debugging steps I’ve performed so far:

  1. I’ve created another sample app in a sibling folder using fdk create -> freshdesk -> your_first_react_app as mentioned in the tutorial and ran it without a custom config - everything went smooth.
  2. I’ve copy-pasted this webpack.config.js file from the previous directory (/d/dev/fd-react-app-boilerplate) and ran the app - everything went fine without any issues for some reason.
  3. I’ve deleted ./fdk, ./node_modules/ folders and package-lock.json, checked all the settings, paths, file names and dependencies, minimized the React app itself to a single line (in my boilerplate project), cleaned npm cache and what not.
  4. I’ve checked the sample custom webpack.config.js provided in the tutorial and used it as a reference. The differences with mine config are minor.
  5. Finally I’ve figured out that the issue occurs only when the mini-css-extract-plugin npm package is included into the webpack.config.js file (here is a copy of it on Google Drive). So, if I do not include this package, everything is fine. But this is relevant only to the boilerplate app directory! The sample app created at step 1 above works perfectly fine with this mini-css-extract-plugin included (the webpack.config.js files are identical copies of each other in both folders).
  6. I’ve checked the FDK’s file frontend_framework-util.js and added some try-catch lines there for debugging:
async function run(customConfig, app) {
  const frameworkSupport = SUPPORTED_FRAMEWORKS.includes(customConfig.frontendFramework);

  if (!frameworkSupport) {
    logger.error(`${customConfig.frontendFramework} is not supported in the current version of FDK`);
    return;
  }

  if (customConfig.frontendFramework && frameworkSupport) {
    const configPath = await getWebpackConfigPath(customConfig);
	debuglog(`[ILYA] CONFIGPATH!!! ${configPath}`);
    
	try {
		const frameWorkConfig = require(configPath);
		return mountConfig(frameWorkConfig, app);
	} catch (e) {
		debuglog(`[ILYA] ERROR!!!`);
		debuglog(e);
		return mountConfig(frameWorkConfig, app);
	}
	
  }
}

Here are the results.
These are the logs without the mini-css-extract-plugin:

...
(frontend_framework-util.js) Found Custom Config at webpack.config.js
(frontend_framework-util.js) [ILYA] CONFIGPATH!!! D:\dev\fd-react-app-boilerplate/webpack.config.js
(node:26272) [DEP_WEBPACK_WATCH_WITHOUT_CALLBACK] DeprecationWarning: A 'callback' argument needs to be provided to the 'webpack(options, callback)' function when the 'watch' option is set. There is no way to handle the 'watch' option without a callback.
(data-util.js) Read {}
(custom-objects.js) to force or not? false
(custom-objects.js) beginning to re-sync db
(watcher.js) Broadcasted "{"file":"main.js"}" to all listeners.
... // (further logs omitted as everything is fine)

And these are the logs with the mini-css-extract-plugin:

...
(frontend_framework-util.js) Found Custom Config at webpack.config.js
(frontend_framework-util.js) [ILYA] CONFIGPATH!!! D:\dev\fd-react-app-boilerplate/webpack.config.js
(frontend_framework-util.js) [ILYA] ERROR!!!
(frontend_framework-util.js) Error: Cannot find module 'webpack/lib/util/identifier'
undefined

The file itself is present on my PC:

So, the question is - what can be the reason of such fdk/webpack behavior? Some cache issue? Why the same config works in the first folder, but does not in the second (sibling) one?

Here are the npm-cache logs, but they are quite useless.
And here is the boilerplate app itself (the whole directory excluding the ./node_modules/ folder).

Also, I’ve created several similar projects with TypeScript + React previously and have not faced such issues (however, the dependencies are a little different there, so this might be a different story).

2 Likes

I’ve updated the FDK to the latest version available (6.13.0) this morning and the app I’ve been working on yesterday without any issues is also throwing the undefined error now.

$ NODE_DEBUG=fdk fdk run
(logger.js) Starting FDK in node v10.18.0 on win32
(sequelize.js) setting up sqilite at "D:\dev\some-app-name/.fdk/store.sqlite"
(index.js) Running with args {"cmd":"run","gopts":{},"opts":{},"goptArg":{},"optArg":{},"args":[]}
(data-util.js) Read {"version_details":{"fdkCli":{"version":"6.13.0","dl":"https://dl.freshdev.io/cli/fdk-6.13.0.tgz","cmd":"npm install https://dl.freshdev.io/cli/fdk-6.13.0.tgz -g"},"addon":{"version":"1.9.8","dl":"https://dl.freshdev.io/cli-addon/addon-1.9.
8.zip"},"forced_versions":["4.3.6"]},"last_updated":{"time_stamp":1630574658429}}
(data-util.js) Read {"version_details":{"fdkCli":{"version":"6.13.0","dl":"https://dl.freshdev.io/cli/fdk-6.13.0.tgz","cmd":"npm install https://dl.freshdev.io/cli/fdk-6.13.0.tgz -g"},"addon":{"version":"1.9.8","dl":"https://dl.freshdev.io/cli-addon/addon-1.9.
8.zip"},"forced_versions":["4.3.6"]},"last_updated":{"time_stamp":1630574658429}}
(updater.js) Check interval not met, skipping addon update
(manifest.js) Reloading manifest with {"platform-version":"2.0","product":{"freshdesk":{"location":{"full_page_app":{"url":"index.html","icon":"icon.svg"}}}},"whitelisted-domains":["https://*.freshdesk.com"]}.
(manifest.js) Inferred db as features.
(data-util.js) Read {"version_details":{"fdkCli":{"version":"6.13.0","dl":"https://dl.freshdev.io/cli/fdk-6.13.0.tgz","cmd":"npm install https://dl.freshdev.io/cli/fdk-6.13.0.tgz -g"},"addon":{"version":"1.9.8","dl":"https://dl.freshdev.io/cli-addon/addon-1.9.
8.zip"},"forced_versions":["4.3.6"]},"last_updated":{"time_stamp":1630574658429}}
(data-util.js) Read {"version_details":{"fdkCli":{"version":"6.13.0","dl":"https://dl.freshdev.io/cli/fdk-6.13.0.tgz","cmd":"npm install https://dl.freshdev.io/cli/fdk-6.13.0.tgz -g"},"addon":{"version":"1.9.8","dl":"https://dl.freshdev.io/cli-addon/addon-1.9.
8.zip"},"forced_versions":["4.3.6"]},"last_updated":{"time_stamp":1630574658429}}
(data-util.js) Read {"version_details":{"fdkCli":{"version":"6.13.0","dl":"https://dl.freshdev.io/cli/fdk-6.13.0.tgz","cmd":"npm install https://dl.freshdev.io/cli/fdk-6.13.0.tgz -g"},"addon":{"version":"1.9.8","dl":"https://dl.freshdev.io/cli-addon/addon-1.9.
8.zip"},"forced_versions":["4.3.6"]},"last_updated":{"time_stamp":1630574658429}}
(validate.js) asked to skip the following validations, 
(validate.js) running validator actions
(validate.js) running validator app-dir
(validate.js) running validator config-dir
(config-dir.js) Checking to see if D:\dev\some-app-name/config/ exists.
(config-dir.js) Fetched the following config files iparams.json
(validate.js) running validator custom-objects
(validate.js) running validator event
(validate.js) running validator iparam
(validate.js) skipping validator lint
(validate.js) running validator manifest
(manifest.js) Choosing Default validator

        [WARN] We recommend to move to platform version 2.2 as we plan to deprecate the previous versions soon.
        Please refer https://community.developers.freshworks.com/t/how-to-migrate-to-platform-version-2-2/3443 to know more details

(validate.js) skipping validator manifest-dependency
(validate.js) running validator oauth
(validate.js) skipping validator pkgsize
(validate.js) running validator schema
(watcher.js) Preparing to watch the following files ./app,./config,./manifest.json
undefined

I’ve reinstalled the FDK and rolled it back to 6.12.0 - nothing helped.

This undefined error happens with every FDK-related project with "frontendFramework": "react". It does not matter whether there is a custom webpack config or not.

Here is a video screen record of creating a new React Freshdesk app from scratch (fdk create -> Freshdesk -> your_first_react_app) and getting this undefined error.

1 Like

Hey @ilya.belyavskiy,

Apologies for the inconvenience,

We just found out that an upgrade in the peer dependency of webpack is causing this issue.

Kindly allow us some time to figure out a solution/workaround

Stay safe :slight_smile:

4 Likes

Keep us posted please

Seems to work now, I just reinstalled the fdk

3 Likes

Hi folks,

Peer dependency of webpack has fixed the issue. Reinstalling the FDK should solve the issue - Quick Start

Let us know if you are still facing any problem.

3 Likes

Hello @Raghu_Murugesan,

Thank you! All React Freshdesk apps started to work again :tada:

However, the issue with the MiniCssExtractPlugin in my original post is still present. Could you please help with this?

1 Like

Hey @ilya.belyavskiy,

I am just wondering if you installed html-webpack-plugin and mini-css-extract-plugin localy in the project root folder, if you did, could you send me your app in the DM, I tried to emulate the error using a new app with your webpack config but unfortunately, I couldn’t reproduce the issue.

I’ll try it in your react app and see if we can drill down to the root cause of the issue.

Stay Safe :slight_smile:

1 Like

Hi @velmurugan,

Thank you for the response!

Yes, I’ve got both of these dependencies installed locally in the node_modules folder.

By the way, there are no issues with the html-webpack-plugin, only with the mini-css-extract-plugin.

Also, the app can be found under this link from the OP. It contains everything the same as my local folder, except the node_modules folder, as there are lots of dependencies and it weights a lot.
I’ve also deleted ./fdk, ./node_modules/ folders and package-lock.json file and reinstalled the dependencies (npm i) several times - didn’t help.

Hey @ilya.belyavskiy,

I was able to replicate the issue and honestly, this seems like a weird behavior in Webpack and I couldn’t narrow down the root cause, but from my research on the internet, this seems like a common issue with mini-css-extract-plugin, there seems to be myriad of explanations and suggestions/solutions , although, the ones I tried didn’t work but I’ll keep trying the remaining approaches and keep you posted.

Meanwhile, we could try and figure out an alternate solution or workaround for your problem, if you need any help with that please do let us know.

Stay Safe :slight_smile:

1 Like

This topic was automatically closed 6 days after the last reply. New replies are no longer allowed.