Cannot use import statement outside a module | when using @uiw/react-markdown-editor

[Vishal17199]

Reproduction

StackBlitz - https://stackblitz.com/~/github.com/Vishal17199/remix-test?file=app/routes/_index.tsx

git repo - https://github.com/Vishal17199/remix-test

1. created new project with vite and remix
2. Install @uiw/react-markdown-editor
3. Add import statement for '@uiw/react-markdown-editor' and use in app/routes/_index.tsx
4. facing error message Cannot use import statement outside a module

System Info

System:
    OS: macOS 13.5
    CPU: (8) arm64 Apple M1 Pro
    Memory: 98.05 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.0.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.6.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 125.0.6422.141
    Safari: 16.6
  npmPackages:
    @remix-run/dev: ^2.9.2 => 2.9.2 
    @remix-run/node: ^2.9.2 => 2.9.2 
    @remix-run/react: ^2.9.2 => 2.9.2 
    @remix-run/serve: ^2.9.2 => 2.9.2 
    vite: ^5.1.0 => 5.2.12

Used Package Manager

npm

Expected Behavior

Markdown editor should work fine

Actual Behavior

Getting below error

Cannot use import statement outside a module
at new AsyncFunction ()
at instantiateModule (file:///Users/vishal/Documents/test/node_modules/vite/dist/node/chunks/dep-BKbDVx1T.js:56228:28)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5
Click outside, press Esc key, or fix the code to dismiss.
You can also disable this overlay by setting server.hmr.overlay to false in vite.config.ts.

[Vishal17199]

I'm also using Vite here, but I suspect the issue is with Remix. The Markdown editor works fine in a standalone Vite app without Remix.

Also getting this error message in StackBlitz
13:31:23 [vite] Error when evaluating SSR module virtual:remix/server-build:
|- SyntaxError: Cannot use import statement outside a module
at new AsyncFunction ()
at instantiateModule (file:///home/Vishal17199/remix-test/node_modules/vite/dist/node/chunks/dep-BKbDVx1T.js:56277:28)

13:31:23 [vite] Internal server error: Cannot use import statement outside a module
at new AsyncFunction ()
at instantiateModule (file:///home/Vishal17199/remix-test/node_modules/vite/dist/node/chunks/dep-BKbDVx1T.js:56277:28)

[arvigeus]

Place the editor in Editor.client.tsx or any .client.tsx file. Example: https://github.com/arvigeus/format-code

Now there’s another issue: in that project it works, but today I tried it on a brand new project and it threw an error. It’s not the react-codemirror, it’s Remix - it was crashing on any .client.tsx file today. Latest version from the template. Does this affect you too?

[Vishal17199]

No @arvigeus , after placing the editor in Editor.client.tsx its working work me.
I am using

    @remix-run/dev: ^2.9.2 => 2.9.2 
    @remix-run/node: ^2.9.2 => 2.9.2 
    @remix-run/react: ^2.9.2 => 2.9.2 
    @remix-run/serve: ^2.9.2 => 2.9.2 
    vite: ^5.1.0 => 5.2.12

Thanks for the solution.

[arvigeus]

Do you use remix-utils? I stumbled upon an interesting bug, but I cannot reproduce it reliably. One way to reproduce it for me was to import the editor directly in _index.tsx page. Or to open the page with the editor on a new tab. Try this if you have such a problem.

[Vishal17199]

no @arvigeus I am not using remix-utils so not sure about it.