[vite-plugin-shopify] Advice needed to work along with Remix(Vite) + React

nrsk-slee commented 6 months ago

Hi there! Thank you for the wonderful vite plugin for Shopify!

I'm new to Shopify, and it's ecosystem :) I started to learn by following the Shopify's tutorial. After sometime, I ran into Theme App Extensions, and generated the extension via Shopify Cli, shopify app generate extension Also I found vite-plugin-shopify, and immediately adapted it. Later that, I added react() into vite.config.ts as I would like build it in React, however it didn't work.

As written in subject, is it possible to use vite-plugin-shopify + React, along with Remix?

Occured Error

Identifier 'RefreshRuntime' has already been declared error appears in both Shopify Admin (Remix), and theme app extension (vite-plugin-shopify)
Arranging the react() around, do not solve anything.
Without react(), browser throws Remix Vite plugin can't detect preamble. error.
By removing remix(), solves the issue and vite-plugin-shopify works as intended, however the Shopify Admin (remix) stops working.
Suspects that by adding react() along with remix(), imports are duplicated.

Sample of import section from the compiled .tsx, when viewed in Browser

import { createHotContext as __vite__createHotContext } from "/@vite/client";import.meta.hot = __vite__createHotContext("/frontend/components/App.tsx");import RefreshRuntime from "/@id/__x00__virtual:remix/hmr-runtime";const inWebWorker = typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope;let prevRefreshReg;let prevRefreshSig;if (import.meta.hot && !inWebWorker) {  if (!window.__vite_plugin_react_preamble_installed__) {    throw new Error(      "Remix Vite plugin can't detect preamble. Something is wrong."    );  }  prevRefreshReg = window.$RefreshReg$;  prevRefreshSig = window.$RefreshSig$;  window.$RefreshReg$ = (type, id) => {    RefreshRuntime.register(type, "/PathToApp/frontend/components/App.tsx" + " " + id)  };  window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;}import __vite__cjsImport2_react_jsxDevRuntime from "/node_modules/.vite/deps/react_jsx-dev-runtime.js?v=55bae4f0"; const jsxDEV = __vite__cjsImport2_react_jsxDevRuntime["jsxDEV"];
import RefreshRuntime from "/@react-refresh";
const inWebWorker = typeof WorkerGlobalScope !== "undefined" && self instanceof WorkerGlobalScope;
let prevRefreshReg;
let prevRefreshSig;
if (import.meta.hot && !inWebWorker) {
  if (!window.__vite_plugin_react_preamble_installed__) {
    throw new Error("@vitejs/plugin-react can't detect preamble. Something is wrong. See https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201");
  }
  prevRefreshReg = window.$RefreshReg$;
  prevRefreshSig = window.$RefreshSig$;
  window.$RefreshReg$ = (type, id) => {
    RefreshRuntime.register(type, "/PathToApp/frontend/components/App.tsx " + id);
  };
  window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
}

Dependencies

remix: ^2.9.1 (Generated by shopify app init, and updated to the latest) react: ^18.3.1 (Generated by shopify app init, and updated to the latest) vite-plugin-shopify: ^3.0.1 @vitejs/plugin-react: ^4.2.1

Directory Structure

Code in .liquid

<div>This is Liquid</div>
<div id="theme-extension">
</div>
{% liquid
  # Relative to entrypointsDir
  render "vite-tag" with "theme.css"
  render "vite-tag" with "theme.tsx"
%}

<script>
  const home = {{ request.path | json }}
</script>

{% schema %}
{
  "name": "Custom Block",
  "target": "section"
}
{% endschema %}

Code in theme.tsx

import App from "@/components/App";
import { createRoot } from "react-dom/client";
import "vite/modulepreload-polyfill";
import "./theme.css";

console.log("TSX");
const container = document.getElementById("theme-extension");
const root = createRoot(container!);
root.render(<App />);

Plugins in vite.config.ts

    remix({
      ignoredRouteFiles: ["**/.*"],
    }),
    shopify({
      themeRoot: "extensions/theme-extension",
    }),
    react(),
    tsconfigPaths(),

montalvomiguelo commented 6 months ago

Hi @nrsk-slee, try to keep the setup for your theme app extension separate from your remix app. I have a theme app extension in our docs that you can look at. https://shopify-vite.barrelny.com/guide/example-projects.html#theme-app-extensions

nrsk-slee commented 6 months ago

~~Hi @montalvomiguelo , and thank you for your reply :) I will look into the example. I was thinking of building a public app, that the admin side & the theme app extension (app block), should be in one set. Is that still possible when separated?~~

After I looked into the example, I tried PNPM and it works. Thanks again for the advice 👍

bakikucukcakiroglu commented 4 months ago

@montalvomiguelo Hey, I have a standalone app(Remix), now I also want to add an extension to it. If I add it using the way shopify suggests, it works. However, writing pure js and css is really hard so I want to use React. I couldn't make shopify-vite work with my remix app. Is there a way? Can you briefly explain?

barrel / shopify-vite