Is Remix v2 integration broken?

Issues
1

Greetings,

It appears as though @plasmicapp/loader-react doesn’t work with Remix v2. When running npm run dev, I get an error about trying to use import outside a module from vite:

11:18:57 AM [vite] Error when evaluating SSR module /app/routes/dashboard.tsx: failed to import "@plasmicapp/loader-react"
|- 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)

11:18:57 AM [vite] Error when evaluating SSR module virtual:remix/server-build: failed to import "/app/routes/dashboard.tsx"
|- 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)

11:18:57 AM [vite] Internal server error: Cannot use import statement outside a module

Steps to reproduce:

  1. Create fresh remix boiler plate app:
    npx create-remix@latest

  2. Follow Plasmic integration instructions for remix

    • npm install @plasmicapp/loader-react
    • copy boiler plate for plasmic-init.ts
    • copy boiler plate for single plasmic plage into routes folder

  3. run npm run dev, observe error message from vite.

Note that the remix starter app sets the type to module in package.json so I’m not sure what could be going on. Any help would be appreciated.

Thanks,
Adam

2

Hi @acarteas, someone on Slack was having the same issue with Remix 2. Alexandro from SaasRock suggested the following fix:

Add the @plasmicapp packages under vite.config.ts, defineConfig, ssr, noExternal:

export default defineConfig({
  plugins: [remix(), tsconfigPaths()],
  ssr: {
    noExternal: [
      "@plasmicapp/data-sources-context",
      "@plasmicapp/loader-core",
      "@plasmicapp/loader-fetcher",
      "@plasmicapp/loader-react",
      "@plasmicapp/loader-splits",
      "@plasmicapp/prepass",
      "@plasmicapp/query",
    ],
  },
});

There’s even an example repo! GitHub - AlexandroMtzG/remix-plasmic

3

That looks to have solved the issue. Thanks a bunch for the quick response!

1 Like