esm webpack build is not getting generated

[veeramarni]

1. Our develop branch which currently working uses esm. The reason we need to use this esm wrapper (you can check in develop branch when you run webpack build there is index.js file wrapping with esm) is for nodejs to support esm package converting to commonjs using esm's require. Webpack for server side won't bundle node_module packages as we exclude here

2. For nodejs 16 supports ESM but with few restrictions.

3. Our purpose is to generate esm build using webpack (which means there shouldn't be require commonjs functions used in the generated build). In our test we used this branch, we commented the browser bundle for the time being.

4. The frontend webpack build can be triggered using the following command. Prior to it, you need to finish yarn && yarn build

lerna exec --scope="*frontend-server" yarn build && lerna exec --scope="*frontend-server" yarn start:dev

5. Since the webpack config, is not generating ESM bundle, if we start node by putting type: module in frontend-server's package.json it errors as it complains the generated bundle has require

[veeramarni]

If anyone who looking got questions about the structure of the project and commands to use, it should be already in the readme. For more information you can take a look at https://cdmbase.github.io/cdebase-wiki/docs/contributing/source-code-organization

[veeramarni]

With all our testing, we getting

$ cross-env NODE_ENV=development ENV_FILE=../../config/development/dev.env node --harmony dist
file:///Users/veeramarni/Documents/development/workspace/projects/common/fullstack-pro/servers/frontend-server/dist/index.js:1560
module.exports = require("@babel/runtime/helpers/interopRequireDefault");
^

ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and '/Users/veeramarni/Documents/development/workspace/projects/common/fullstack-pro/servers/frontend-server/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

[veeramarni]

need to test with https://github.com/whoisYeshua/webpack-simple-boilerplate

[veeramarni]

webpack-node_externals causing to add Commonjs require https://github.com/liady/webpack-node-externals/issues/110 So we need to add importType: 'module'

[veeramarni]

The above change help to replace require. Now we getting following error

TypeError: _interopRequireDefault is not a function
    at Object.2782 (file:///Users/veeramarni/Documents/development/workspace/projects/common/fullstack-pro/servers/frontend-server/dist/index.js:1360:180)
    at __webpack_require__ (file:///Users/veeramarni/Documents/development/workspace/projects/common/fullstack-pro/servers/frontend-server/dist/index.js:2209:40)
    at file:///Users/veeramarni/Documents/development/workspace/projects/common/fullstack-pro/servers/frontend-server/dist/index.js:2219:1
    at file:///Users/veeramarni/Documents/development/workspace/projects/common/fullstack-pro/servers/frontend-server/dist/index.js:2220:3
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:526:24)
    at async loadESM (node:internal/process/esm_loader:91:5)

[zakirhossen23]

In which files are you getting that error? Also, where have you used that "require"

[veeramarni]

We removed require everywhere but still, we see that issue. Again the issue can be replicated when you run step 4 in the description above.

[zakirhossen23]

You can try, something like this: var package = import("@package/name").default();

[zakirhossen23]

I was trying to install packages yarn install But it was getting stuck at "Network issue". I have recently faced this issue and solved by using import. If you have any VPS? You can give me, I will try to fix it.

[zakirhossen23]

Check this code: How to use import

https://github.com/zakirhossen23/wave-data-celo/blob/main/wavedata-api/pages/api/GET/getFhir.js

without .mjs without require