Plasmic + Remix (vite): "Cannot use import statement outside a module"

Developer Support
1

I’ve started a fresh remix project and pasted the code described in Get started with Remix | Learn Plasmic

npx create-remix@latest --template remix-run/remix/templates/cloudflare-workers
cd ...
npm install
npm install @plasmicapp/loader-react

Then adjusted app/routes/_index.tsx as follows:

import {
  initPlasmicLoader,
  PlasmicRootProvider,
  PlasmicComponent,
} from '@plasmicapp/loader-react';
import { useLoaderData } from '@remix-run/react';
import { json } from '@remix-run/cloudflare';

export const PLASMIC = initPlasmicLoader({
   projects: [ { id: "...", token: "..." }],
   preview: true,
})

export const loader = async () => {
  const plasmicData = await PLASMIC.fetchComponentData('/');
  return json(plasmicData);
};

// Render the page or component from Plasmic.
export default function MyPage() {
  const plasmicData = useLoaderData();
  return (
    <PlasmicRootProvider loader={PLASMIC} prefetchedData={plasmicData}>
      <PlasmicComponent component="/" />
    </PlasmicRootProvider>
  );
}

When I run npm run dev I’ll get the following error:

$ npm run dev

> dev
> remix vite:dev

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
(node:6883) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
10:37:14 PM [vite] Error when evaluating SSR module /app/routes/_index.tsx: failed to import "@plasmicapp/loader-react"
|- /Users/dennis/Projects/tmp/remix-plasmic/node_modules/@plasmicapp/loader-react/dist/index.esm.js:55
import * as PlasmicDataSourcesContext from "@plasmicapp/data-sources-context";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1153:20)
    at Module._compile (node:internal/modules/cjs/loader:1205:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at cjsLoader (node:internal/modules/esm/translators:284:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:234:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:217:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)

10:37:14 PM [vite] Error when evaluating SSR module virtual:remix/server-build: failed to import "/app/routes/_index.tsx"
|- /Users/dennis/Projects/tmp/remix-plasmic/node_modules/@plasmicapp/loader-react/dist/index.esm.js:55
import * as PlasmicDataSourcesContext from "@plasmicapp/data-sources-context";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1153:20)
    at Module._compile (node:internal/modules/cjs/loader:1205:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at cjsLoader (node:internal/modules/esm/translators:284:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:234:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:217:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)

10:37:14 PM [vite] Internal server error: Cannot use import statement outside a module
      at internalCompileFunction (node:internal/vm:73:18)
      at wrapSafe (node:internal/modules/cjs/loader:1153:20)
      at Module._compile (node:internal/modules/cjs/loader:1205:27)
      at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
      at Module.load (node:internal/modules/cjs/loader:1091:32)
      at Module._load (node:internal/modules/cjs/loader:938:12)
      at cjsLoader (node:internal/modules/esm/translators:284:17)
      at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:234:7)
      at ModuleJob.run (node:internal/modules/esm/module_job:217:25)
      at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)

It works with client-side-only vite, but it seems like having issues rendering it server side :confused: and this is not connected to cloudflare-workers template, the exact same happens with the default template (node).

2

Ah, had to follow the fix described here: Is Remix v2 integration broken?

Maybe you want to add this to the docs? :slight_smile: