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:
- 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. - 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. - I’ve deleted
./fdk
,./node_modules/
folders andpackage-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. - 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. - Finally I’ve figured out that the issue occurs only when the
mini-css-extract-plugin
npm package is included into thewebpack.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 thismini-css-extract-plugin
included (thewebpack.config.js
files are identical copies of each other in both folders). - 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).