Cannot use import statement outside a module in Remix/Vite

[piotrkulpinski]

Hi,

I'm trying to migrate my app from NextJS to Remix running on Vite, but can't get Knock to work with this stack.

If I try to initialize the knock client, I get the following error:

[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)
      at async nodeImport (file:///.../node_modules/vite/dist/node/chunks/dep-bb8a8339.js:56097:17)
      at async ssrImport (file:///.../node_modules/vite/dist/node/chunks/dep-bb8a8339.js:55990:24)
      at async eval (/.../app/components/navs/nav-notifications.tsx:5:31)
      at async instantiateModule (file:///.../node_modules/vite/dist/node/chunks/dep-bb8a8339.js:56052:9)

I assume this is similar to knocklabs/javascript#20 but I decided to open a new issue since the cause may be different.

Does anyone have any solution to this.

[DavoCg]

Hello @piotrkulpinski,

I had the same issue and managed to fix it with this vite config. I'm using

@knocklabs/client": "^0.8.15 @remix-run/*": "^2.4.1

export default defineConfig({
  plugins: [remix(), tsconfigPaths()],
  ssr: {
    noExternal: ["@knocklabs/client"],
  },
});

Note that you will also have a commonJS issue that can be fixed with patch-package using this

diff --git a/node_modules/@knocklabs/client/dist/esm/clients/feed/feed.js b/node_modules/@knocklabs/client/dist/esm/clients/feed/feed.js
index 422d6e8..d611cf7 100644
--- a/node_modules/@knocklabs/client/dist/esm/clients/feed/feed.js
+++ b/node_modules/@knocklabs/client/dist/esm/clients/feed/feed.js
@@ -5,7 +5,10 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O

 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

-import { EventEmitter2 as EventEmitter } from "eventemitter2";
+
+import  eventemitter2 from "eventemitter2"
+const { EventEmitter2: EventEmitter } = eventemitter2;
+
 import createStore from "./store";
 import { isRequestInFlight, NetworkStatus } from "../../networkStatus";
 // Default options to apply

I really like knock and would love a better esm support !

[kylemcd]

This should be fixed by #22