Build Error: "Unexpected token export" when attempting to use actions

[AubreyF]

Describe the bug

Summary We're encountering an unusual "Unexpected token 'export'" build error when attempting to import and use actions. This appears to be related to the way this package exposes exports. Many thanks to anyone who has seen this before and/or has suggestions to resolve.

Project details:

• Typescript
• NextJS v12
• WebPack v5
• Build target: es5

Repro:

• https://stackblitz.com/edit/nextjs-flexlayout-build-error-unexpected-token-export

tsconfig.json:

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "strict": false,
        "forceConsistentCasingInFileNames": true,
        "noEmit": true,
        "esModuleInterop": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "jsx": "preserve",
        "baseUrl": "./src",
        "paths": {
            "@auth/*": ["modules/auth/*"],
            "@gql/*": ["modules/gql/*"],
            "@graph/*": ["modules/graph/*"],
            "@project/*": ["modules/project/*"],
            "@asset/*": ["modules/projectAsset/*"],
            "@common/*": ["modules/_common/*"],
            "@modules/*": ["modules/*"]
        },
        "downlevelIteration": true,
        "incremental": true
    },
    "include": [
        "next-env.d.ts",
        "**/*.ts",
        "**/*.tsx",
        "scripts/stripeUpdate/index.js"
    ],
    "exclude": ["node_modules", "cypress"]
}

Sample code:

import { Actions as FlexLayoutActions } from "flexlayout-react";
...
flexLayoutModelVar().instance?.doAction(
  FlexLayoutActions.selectTab("import")
);

Build error we're seeing:

Your Example Website or App

https://stackblitz.com/edit/nextjs-flexlayout-build-error-unexpected-token-export

Steps to Reproduce the Bug or Issue

1. Run code
2. See build error

Expected behavior

Code should not error on build

Operating System

macOS

Browser Type?

Chrome

Browser Version

all

Screenshots or Videos

Additional context

No response

[ranmocy]

I think it's the issue in tsconfig2.json. I created PR #378 trying to fix this issue. Basically I think the generated commonjs code should not contain export keyword at all, which is for ESM modules.

[AubreyF]

@ranmocy Thanks! I just confirmed that your fix resolves this issue in our production NextJS codebase ✔