[Bug]: Build error - SyntaxError: Cannot use import statement outside a module when BFF is enabled

[rogerlpl]

Version

System:
    OS: Windows 11 10.0.22621
    CPU: (32) x64 AMD Ryzen 9 7950X 16-Core Processor
    Memory: 15.59 GB / 31.15 GB
  Browsers:
    Edge: Chromium (122.0.2365.92)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @modern-js/app-tools: 2.48.3 => 2.48.3
    @modern-js/eslint-config: 2.48.3 => 2.48.3
    @modern-js/plugin-bff: 2.48.3 => 2.48.3
    @modern-js/plugin-express: 2.48.3 => 2.48.3
    @modern-js/plugin-garfish: 2.48.3 => 2.48.3
    @modern-js/runtime: 2.48.3 => 2.48.3
    @modern-js/tsconfig: 2.48.3 => 2.48.3

Details

The project works normally in development mode yarn dev, but when trying to compile to deploy it gives the following error in the BFF folder.

PS D:\Modern-js-discussions> yarn build
yarn run v1.22.21
warning package.json: No license field
$ modern build
  Modern.js Framework v2.48.3

info    Starting production build...
error   D:\Modern-js-discussions\api\pokemon\index.js:1
import {
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:77:18)
    at wrapSafe (node:internal/modules/cjs/loader:1288:20)
    at Module._compile (node:internal/modules/cjs/loader:1340:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at require (node:internal/modules/helpers:176:18)
    at requireHandlerModule (D:\Modern-js-discussions\node_modules\@modern-js\bff-core\dist\cjs\router\utils.js:74:19)
    at ApiRouter.getModuleInfo (D:\Modern-js-discussions\node_modules\@modern-js\bff-core\dist\cjs\router\index.js:227:62)
    at ApiRouter.getSingleModuleHandlers (D:\Modern-js-discussions\node_modules\@modern-js\bff-core\dist\cjs\router\index.js:90:29)
    at generateClient (D:\Modern-js-discussions\node_modules\@modern-js\bff-core\dist\cjs\client\generateClient.js:57:34)
    at Object.loader (D:\Modern-js-discussions\node_modules\@modern-js\plugin-bff\dist\cjs\loader.js:62:59)
    at LOADER_EXECUTION (D:\Modern-js-discussions\node_modules\loader-runner\lib\LoaderRunner.js:132:14)
    at runSyncOrAsync (D:\Modern-js-discussions\node_modules\loader-runner\lib\LoaderRunner.js:133:4)
    at iterateNormalLoaders (D:\Modern-js-discussions\node_modules\loader-runner\lib\LoaderRunner.js:251:2)
    at D:\Modern-js-discussions\node_modules\loader-runner\lib\LoaderRunner.js:224:4
    at D:\Modern-js-discussions\node_modules\webpack\lib\NormalModule.js:920:15
    at eval (eval at create (D:\Modern-js-discussions\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:12:1)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
◯ Client  ━━━━━━━━━━━━━━━━━━━━━━━━━  29% building
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Reproduce link

https://github.com/rogerlpl/modernjs-discussions/tree/build-bff-error

Reproduce Steps

1. Install all packages by running yarn in the main folder.
2. Use the yarn build command in this folders to run the projects.
3. The error shown in the image above will appear in the console.

[yimingjfe]

Thank you for your example, this is a bug in handling esm modules by BFF. Would you prefer to use typescript first? We'll provide full support for ESM later.

[rogerlpl]

Thank you for the quick response. I understand the issue with ESM modules and will consider switching to TypeScript as a temporary solution. I greatly appreciate your support and look forward to seeing full support for ESM later.

[AllenAttuned]

I've also experienced this issue, even when using TypeScript. Our setup requires our configuration to have module set to ESNext and target to ES2020.

The BFF feature ended up not fitting our use case (our application won't have a Node.js server running to serve it), so we didn't spend too much time looking into it, maybe a separate TS config for the API might solve it error.

[yimingjfe]

I've also experienced this issue, even when using TypeScript. Our setup requires our configuration to have module set to ESNext and target to ES2020.

The BFF feature ended up not fitting our use case (our application won't have a Node.js server running to serve it), so we didn't spend too much time looking into it, maybe a separate TS config for the API might solve it error.

Currently, Modern.js server-side does not fully support esm, so the module needs to be set to CommonJs, which is also the default configuration in the template. There is a plan to support esm in the future, and contributions are welcome.

[yimingjfe]

For the original issue, I have fixed it to support using es6 + esm. At runtime, the code will still be compiled into CommonJS. Support for native esm will be added in the future.