Unexpected token 'export'

[vjanssens]

I'm getting the following error in my react/vite app:

Unexpected token 'export'

The error also gives me a line number:

[...]/node_modules/@caldwell619/react-kanban/dist/index.js:1 export * from './features/board'; ^^^^^^

This is probably not enough information, but I'm lost on how to proceed. What information can I provide to investigate further?

[christopher-caldwell]

Hmm, in the demo I am also using Vite. It's likely a config issue with the transpilation of the source. It's published "as is", so it might require some extra config bits to make available for Vite to consume.

In the demo, I am using the same build output, so I'll have to do some checking to see what the right setting is and add it to the docs. Thanks for bringing this up! I (or anyone else, please feel free to jump in) will take a look.

[christopher-caldwell]

@vjanssens I made a quick Vite project with their default tooling and it works for me.

https://github.com/christopher-caldwell/kanban-compatability

Take a look at this and see if it helps. I did nothing to the config, so perhaps posting your Vite config and package.json could lead to a better answer.

[vjanssens]

{
  "name": "",
  "private": true,
  "scripts": {
    "build": "remix vite:build",
    "dev": "shopify app dev",
    "config:link": "shopify app config link",
    "generate": "shopify app generate",
    "deploy": "shopify app deploy",
    "config:use": "shopify app config use",
    "env": "shopify app env",
    "start": "remix-serve ./build/server/index.js",
    "docker-start": "npm run setup && npm run start",
    "setup": "prisma generate && prisma migrate deploy",
    "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
    "shopify": "shopify",
    "prisma": "prisma",
    "graphql-codegen": "graphql-codegen",
    "vite": "vite"
  },
  "type": "module",
  "engines": {
    "node": "^18.20 || ^20.10 || >=21.0.0"
  },
  "dependencies": {
    "@atlaskit/avatar": "^21.15.1",
    "@atlaskit/button": "^20.1.1",
    "@atlaskit/dropdown-menu": "^12.18.2",
    "@atlaskit/heading": "^2.4.5",
    "@atlaskit/pragmatic-drag-and-drop": "^1.3.0",
    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
    "@atlaskit/pragmatic-drag-and-drop-flourish": "^1.1.1",
    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
    "@atlaskit/pragmatic-drag-and-drop-live-region": "^1.0.7",
    "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.2",
    "@atlaskit/primitives": "^12.1.1",
    "@caldwell619/react-kanban": "^0.0.11",
    "@dnd-kit/core": "^6.1.0",
    "@dnd-kit/sortable": "^8.0.0",
    "@prisma/client": "^5.19.1",
    "@remix-run/dev": "^2.7.1",
    "@remix-run/node": "^2.7.1",
    "@remix-run/react": "^2.7.1",
    "@remix-run/serve": "^2.7.1",
    "@shopify/app-bridge-react": "^4.1.2",
    "@shopify/polaris": "^12.0.0",
    "@shopify/shopify-app-remix": "^3.0.2",
    "@shopify/shopify-app-session-storage-prisma": "^5.0.2",
    "isbot": "^5.1.0",
    "prisma": "^5.11.0",
    "react": "^18.2.0",
    "react-beautiful-dnd": "^13.1.1",
    "react-dom": "^18.2.0",
    "uuid": "^10.0.0",
    "vite-tsconfig-paths": "^5.0.1"
  },
  "devDependencies": {
    "@remix-run/eslint-config": "^2.7.1",
    "@shopify/api-codegen-preset": "^1.1.1",
    "@types/eslint": "^8.40.0",
    "@types/node": "^22.2.0",
    "@types/react": "^18.2.31",
    "@types/react-beautiful-dnd": "^13.1.8",
    "@types/react-dom": "^18.2.14",
    "eslint": "^8.42.0",
    "eslint-config-prettier": "^9.1.0",
    "prettier": "^3.2.4",
    "typescript": "^5.2.2",
    "vite": "^5.1.3"
  },
  "workspaces": [
    "extensions/*"
  ],
  "trustedDependencies": [
    "@shopify/plugin-cloudflare"
  ],
  "resolutions": {},
  "overrides": {},
}

vite.config.ts

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig, type UserConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

// Related: https://github.com/remix-run/remix/issues/2835#issuecomment-1144102176
// Replace the HOST env var with SHOPIFY_APP_URL so that it doesn't break the remix server. The CLI will eventually
// stop passing in HOST, so we can remove this workaround after the next major release.
if (
  process.env.HOST &&
  (!process.env.SHOPIFY_APP_URL ||
    process.env.SHOPIFY_APP_URL === process.env.HOST)
) {
  process.env.SHOPIFY_APP_URL = process.env.HOST;
  delete process.env.HOST;
}

const host = new URL(process.env.SHOPIFY_APP_URL || "http://localhost")
  .hostname;

let hmrConfig;
if (host === "localhost") {
  hmrConfig = {
    protocol: "ws",
    host: "localhost",
    port: 64999,
    clientPort: 64999,
  };
} else {
  hmrConfig = {
    protocol: "wss",
    host: host,
    port: parseInt(process.env.FRONTEND_PORT!) || 8002,
    clientPort: 443,
  };
}

export default defineConfig({
  server: {
    port: Number(process.env.PORT || 3000),
    hmr: hmrConfig,
    fs: {
      // See https://vitejs.dev/config/server-options.html#server-fs-allow for more information
      allow: ["app", "node_modules"],
    },
  },
  plugins: [
    remix({
      ignoredRouteFiles: ["**/.*"],
    }),
    tsconfigPaths(),
  ],
  build: {
    assetsInlineLimit: 0,
    commonjsOptions: {
      include: [/node_modules/],
      extensions: ['.js', '.cjs'],
    },
  }
}) satisfies UserConfig;

tsconfig.json

{
  "include": ["env.d.ts", "**/*.ts", "**/*.tsx"],
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ES2022"],
    "strict": true,
    "skipLibCheck": true,
    "isolatedModules": true,
    "allowSyntheticDefaultImports": true,
    "removeComments": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "allowJs": true,
    "resolveJsonModule": true,
    "jsx": "react-jsx",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "target": "ES2022",
    "baseUrl": ".",
    "paths": {
      "~/*": ["./app/*"]
    },
    "types": ["node"]
  }
}

I've had some luck with cloning the repository and directly referencing TS files, that worked well. It's just the build files that are causing trouble. I did find some Google results mentioning the build files 'export' files without proper extension (.js), but that seems unlikely as source of the problem? Other than that I've still got no clue tbh.

[vjanssens]

@vjanssens I made a quick Vite project with their default tooling and it works for me.

https://github.com/christopher-caldwell/kanban-compatability

Take a look at this and see if it helps. I did nothing to the config, so perhaps posting your Vite config and package.json could lead to a better answer.

Thanks for taking time to investigate it, this does seem to work on my end as well. There must be some configuration issue in my project.

[vjanssens]

I'm so sorry for wasting your time there, apparently this was caused by Remix framework trying to SSR this module which does not work. Or atleast, that's my understanding of it right now.

For anyone else seeing this issue, add the dependencie to ssr.noExternal in your vite.config.ts file as shown below:

export default defineConfig({
  [..]
  ssr: {
    noExternal: ["@caldwell619/react-kanban"]
  },
});

[christopher-caldwell]

Sweet, I will add this to the README. Thanks!