SyntaxError: Cannot use import statement outside a module

[benjick]

Hello!

Wanted to use this plugin, but I can't get it running.

Using it like this:

import { tableField } from "payload-table-field";
import { type Block } from "payload/types";

export const TableBlock: Block = {
  slug: "Table",
  interfaceName: "TableBlock",
  fields: [
    {
      name: "items",
      type: "array",
      required: true,
      fields: [
        tableField(
          {
            name: "table",
            label: "Table",
          },
          {
            pagination: true,
            paginationPageSize: 10,
            paginationPageSizes: [5, 10, 25, 50, 100],
            editable: false,
            rowSelection: true,
            columns: [
              {
                key: "id",
                name: "ID",
                enableSorting: true,
              },
              { key: "title", name: "Title" },
              { key: "year", name: "Year" },
            ],
          },
        ),
      ],
    },
  ],
};

but getting this error:

/Users/user/dev/node_modules/.pnpm/payload-table-field@1.0.2_payload@2.11.1_react-dom@18.2.0_react@18.2.0/node_modules/payload-table-field/src/index.ts:1
import { Field, JSONField } from 'payload/dist/exports/types'
^^^^^^
@nextgen/cms:dev:
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 Object.require.extensions.<computed> [as .ts] (/Users/user/dev/node_modules/.pnpm/ts-node@10.9.2_@swc+core@1.4.8_@types+node@18.19.3_typescript@5.3.3/node_modules/ts-node/src/index.ts:1608:43)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Function.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 Object.<anonymous> (/Users/user/dev/apps/cms/src/blocks/Table.ts:11:26)

[notchris]

@benjick This is odd, what version of Payload are you running / what is your setup like?

[notchris]

This sounds more like an issue with the tsconfig maybe?

[WillODR]

same issue

[benjick]

Sorry about the late reply. I'm on 2.11.1, a few version behind I see now

[benjick]

tsconfig:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "jsx": "react",
    "paths": {
      "payload/generated-types": ["./src/payload-types.ts"]
    }
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist", "build"],
  "ts-node": {
    "transpileOnly": true,
    "swc": true
  }
}

[notchris]

This is odd, your TSConfig looks about the same as mine. Looking into this...

[notchris]

@WillODR How are you running your payload project? I know that a misconfigured start script caused this issue for folks in other plugins

[WillODR]

just using default script "dev": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts nodemon", i took a look at the ts config and mine is pretty similar had a play with it but couldn't get it to work. on version 2.14.0 not sure if that causes any issues.

[WillODR]

Was running payload v1 until last month so might have missed a breaking change

[notchris]

@benjick @WillODR - Quick update: I figured out the initial issue, I wasn't building the project correctly so the npm package was trying to import from src, oops! Now I'm facing an issue where the built version is throwing a bunch of seemingly React-related errors but I'm not sure yet.

[notchris]

This issue should now be fixed. React wasn't part of `peerDependencies', so multiple versions were being pulled in. In addition, there was a bug with rowPinning (that I think is now resolved). Let me know if you run into any issues. @benjick @WillODR

[WillODR]

Thank you will let you know if I encounter any issues.