Unexpected token export when running nx serve <app> (next)

[benwainwright]

Hi there!

I have a nextJS monorepo with a web-app and a couple of dependency libraries. Building the application works fine and I've been able to successfully deploy the built code.

Unfortately, the yarn nx serve target gives me an error when trying to compile imported libraries unexpected token export

{
  "root": "apps/web-app",
  "sourceRoot": "apps/web-app",
  "projectType": "application",
  "targets": {
    "build": {
      "executor": "@nrwl/next:build",
      "outputs": [
        "{options.outputPath}",
        "apps/web-app/out_lambda"
      ],
      "defaultConfiguration": "production",
      "options": {
        "root": "apps/web-app",
        "outputPath": "dist/apps/web-app"
      },
      "configurations": {
        "production": {}
      }
    },
    "serve": {
      "executor": "@nrwl/next:server",
      "options": {
        "buildTarget": "web-app:build",
        "buildLibsFromSource": false, // I've tried this both true and false
        "dev": true
      },
      "configurations": {
        "production": {
          "buildTarget": "web-app:build:production",
          "dev": false
        }
      }
    },
  },
  "tags": []
}

When I load the offending route I get this in the server console:

> nx run web-app:serve
warn  - The `target` config is deprecated and will be removed in a future version.
See more info here https://nextjs.org/docs/messages/deprecated-target-config
info  - automatically enabled Fast Refresh for 1 custom loader
event - compiled client and server successfully in 1209 ms (893 modules)
[ ready ] on http://localhost:4200

wait  - compiling /404 (client and server)...
event - compiled client and server successfully in 190 ms (896 modules)
wait  - compiling /admin/recipes (client and server)...
event - compiled client and server successfully in 2.5s (2963 modules)
wait  - compiling /_error (client and server)...
event - compiled client and server successfully in 465 ms (2964 modules)
error - ../src/index.ts (1:0) @ <unknown>
SyntaxError: Unexpected token 'export'
null
error - ../src/index.ts (1:0) @ <unknown>
SyntaxError: Unexpected token 'export'
null
error - ../src/index.ts (1:0) @ <unknown>
SyntaxError: Unexpected token 'export'
null

And this in the browser console

ET http://localhost:4200/admin/recipes 500 (Internal Server Error)
index.js?4755:323 Uncaught     at <unknown> (file:///Users/benwainwright1/repos/the-nutritionist-mcr-web/node_modules/grommet-controls/dist/index.js:1)
    at compileFunction (<anonymous>)
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:94:18)
    at Object.grommet-controls (file:///Users/benwainwright1/repos/the-nutritionist-mcr-web/dist/apps/web-app/.next/server/pages/admin/recipes.js:892:18)

Any help would be much appreciated...

[ziacik]

Could this be the same I had? Solved it by adding .babelrc to each library.

See
#8600