Basic setup with vite-plugin-page-reload not working - ESM error

[iska31]

Hi,

So I saw your (new package) [https://github.com/barrel/shopify-vite/tree/vite-plugin-page-reload%400.1.0/packages/vite-plugin-page-reload] about page-reload and wanted to give it a try as it looks like targeting my issue about refreshing pages.

My setup is simple :

...
    "vite": "^4.4.11",
    "vite-plugin-page-reload": "^0.1.0",
    "vite-plugin-shopify": "^2.2.1"
...

And my config too :

import { defineConfig } from 'vite';
import checker from 'vite-plugin-checker';
import shopify from 'vite-plugin-shopify';
import pageReload from 'vite-plugin-page-reload';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    checker({
      typescript: true
    }),
    shopify({
      // Root path to your Shopify theme directory (location of snippets, sections, templates, etc.)
      themeRoot: './',
      // Front-end source code directory
      sourceCodeDir: 'src',
      // Front-end entry points directory
      entrypointsDir: 'src/entrypoints',
      // Additional files to use as entry points (accepts an array of file paths or glob patterns)
      additionalEntrypoints: [],
      // Specifies the file name of the snippet that loads your assets
      snippetFile: 'vite-tag.liquid'
    }),
    pageReload(
      [
        './assets',
        './config',
        './layout',
        './locales',
        './public',
        './sections',
        './snippets',
        './templates'
      ],
      {
        delay: 1600
      }
    )
  ],
  publicDir: 'public',
  build: {
    emptyOutDir: true,
    outDir: './assets',
    assetsDir: './'
  }
});

After running yarn dev, aka :

• "dev": "run-p vite:serve shopify:serve",
  • "vite:serve": "vite"
  • "shopify:serve": "shopify theme dev --store=***.myshopify.com",

I'm getting the following error :

Failed to resolve "vite-plugin-page-reload". This package is ESM only but it was tried to load by `require`. See http://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only for more details. [plugin externalize-deps]

   node_modules/esbuild/lib/main.js:1373:27:
     1373 │         let result = await callback({
          ╵                            ^

   at file:///*****/node_modules/vite/dist/node/chunks/dep-68d1a114.js:66275:43
   at requestCallbacks.on-resolve (/Users/*****/node_modules/esbuild/lib/main.js:1373:28)
   at handleRequest (/*****/node_modules/esbuild/lib/main.js:729:19)
   at handleIncomingPacket (/****/node_modules/esbuild/lib/main.js:755:7)
   at Socket.readFromStdout (/***/node_modules/esbuild/lib/main.js:679:7)
   at Socket.emit (node:events:514:28)
   at addChunk (node:internal/streams/readable:324:12)
   at readableAddChunk (node:internal/streams/readable:297:9)
   at Readable.push (node:internal/streams/readable:234:10)
   at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)

 This error came from the "onResolve" callback registered here:

   node_modules/esbuild/lib/main.js:1292:20:
     1292 │       let promise = setup({
          ╵                     ^

   at setup (file:///****node_modules/vite/dist/node/chunks/dep-68d1a114.js:66250:27)
   at handlePlugins (/*****/node_modules/esbuild/lib/main.js:1292:21)
   at buildOrContextImpl (*****/node_modules/esbuild/lib/main.js:978:5)
   at Object.buildOrContext (//node_modules/esbuild/lib/main.js:786:5)
   at //node_modules/esbuild/lib/main.js:2177:15
   at new Promise (<anonymous>)
   at Object.build (//node_modules/esbuild/lib/main.js:2176:25)
   at build (//node_modules/esbuild/lib/main.js:2025:51)
   at bundleConfigFile (file:////node_modules/vite/dist/node/chunks/dep-68d1a114.js:66201:26)

 The plugin "externalize-deps" was triggered by this import

   vite.config.ts:4:23:
     4 │ import pageReload from 'vite-plugin-page-reload';
       ╵                        ~~~~~~~~~~~~~~~~~~~~~~~~~

failed to load config from //vite.config.ts
error when starting dev server:
Error: Build failed with 1 error:
node_modules/esbuild/lib/main.js:1373:27: ERROR: [plugin: externalize-deps] Failed to resolve "vite-plugin-page-reload". This package is ESM only but it was tried to load by `require`. See http://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only for more details.
   at failureErrorWithLog (//node_modules/esbuild/lib/main.js:1649:15)
   at //node_modules/esbuild/lib/main.js:1058:25
   at runOnEndCallbacks (//node_modules/esbuild/lib/main.js:1484:45)
   at buildResponseToResult (//node_modules/esbuild/lib/main.js:1056:7)
   at //node_modules/esbuild/lib/main.js:1085:16
   at responseCallbacks.<computed> (/****/node_modules/esbuild/lib/main.js:703:9)
   at handleIncomingPacket (//node_modules/esbuild/lib/main.js:762:9)
   at Socket.readFromStdout (/node_modules/esbuild/lib/main.js:679:7)
   at Socket.emit (node:events:514:28)
   at addChunk (node:internal/streams/readable:324:12)
error Command failed with exit code 1.

As I simply followed a trivial setup, multiple people might get this error, I'm wondering how to fix this issue ?

Keeping myself available for any help ! :)

[iska31]

Doing the same setup https://www.npmjs.com/package/vite-plugin-full-reload is working well.

[montalvomiguelo]

vite-plugin-page-reload is ESM only. Do you have "type": "module" in your package.json file?

[iska31]

Ok,

I had to adapt all my config files from comonjs to mjs/ts format.

I t works now thank you !