`solid-refresh` isn't used

[lxsmnsyc]

Issue for visibility.

Babel transform works, but not solid-refresh, the problem might be:

• one of the 3 conditions used to prevent solid-refresh from running has a false-positive
• mergeAndConcat might not be working.

Adding solid-refresh's babel plugin through babel option works:

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
import solidRefresh from 'solid-refresh/babel';

export default defineConfig({
  plugins: [
    solidPlugin({
      babel: {
        plugins: [
          [solidRefresh, { bundler: 'vite'}],
        ],
      },
    }),
  ],
});

[ryansolid]

I think I fixed it in 2.2.3.

This commit broke array merging with empty arrays: vitejs/vite#6344
And this seems to not get tripped up by it: 166554e#diff-a2a171449d862fe29692ce031981047d7ab755ae7f84c707aef80701b3ea0c80L339

[lxsmnsyc]

I think I fixed it in 2.2.3.

This commit broke array merging with empty arrays: vitejs/vite#6344 And this seems to not get tripped up by it: 166554e#diff-a2a171449d862fe29692ce031981047d7ab755ae7f84c707aef80701b3ea0c80L339

Commit breaks for merging user-defined plugins on Windows (not sure if related). I think the merging utility function is what causes issues here.

[lxsmnsyc]

Tried logging the 3 conditions. So the real issue here is needHmr, so I checked the configResolved

!config.isProduction is causing the issues. I logged the config

{
  plugins: [
    {
      name: 'vite:pre-alias',
      configureServer: [Function: configureServer],
      resolveId: [Function: resolveId]
    },
    {
      name: 'alias',
      buildStart: [Function: buildStart],
      resolveId: [Function: resolveId]
    },
    {
      name: 'solid',
      enforce: 'pre',
      config: [Function: config],
      configResolved: [Function: configResolved],
      resolveId: [Function: resolveId],
      load: [Function: load],
      transform: [AsyncFunction: transform]
    },
    {
      name: 'vite:modulepreload-polyfill',
      resolveId: [Function: resolveId],
      load: [Function: load]
    },
    {
      name: 'vite:resolve',
      configureServer: [Function: configureServer],
      resolveId: [Function: resolveId],
      load: [Function: load]
    },
    {
      name: 'vite:html-inline-script-proxy',
      resolveId: [Function: resolveId],
      buildStart: [Function: buildStart],
      load: [Function: load]
    },
    {
      name: 'vite:css',
      configureServer: [Function: configureServer],
      buildStart: [Function: buildStart],
      transform: [AsyncFunction: transform]
    },
    {
      name: 'vite:esbuild',
      configureServer: [Function: configureServer],
      transform: [AsyncFunction: transform]
    },
    { name: 'vite:json', transform: [Function: transform] },
    {
      name: 'vite:wasm',
      resolveId: [Function: resolveId],
      load: [AsyncFunction: load]
    },
    {
      name: 'vite:worker',
      load: [Function: load],
      transform: [AsyncFunction: transform]
    },
    {
      name: 'vite:asset',
      buildStart: [Function: buildStart],
      resolveId: [Function: resolveId],
      load: [AsyncFunction: load],
      renderChunk: [Function: renderChunk],
      generateBundle: [Function: generateBundle]
    },
    { name: 'vite:define', transform: [Function: transform] },
    {
      name: 'vite:css-post',
      buildStart: [Function: buildStart],
      transform: [AsyncFunction: transform],
      renderChunk: [AsyncFunction: renderChunk],
      generateBundle: [AsyncFunction: generateBundle]
    },
    { name: 'vite:client-inject', transform: [Function: transform] },
    {
      name: 'vite:import-analysis',
      configureServer: [Function: configureServer],
      transform: [AsyncFunction: transform]
    }
  ],
  server: {
    preTransformRequests: true,
    fs: { strict: true, allow: [Array], deny: [Array] }
  },
  resolve: {
    dedupe: [
      'solid-js',
      'solid-js/web',
      'solid-js/store',
      'solid-js/html',
      'solid-js/h'
    ],
    alias: [ [Object], [Object], [Object] ],
    conditions: [ 'solid', 'development' ]
  },
  esbuild: { include: /\.ts$/ },
  optimizeDeps: {
    include: [
      'solid-js',
      'solid-js/web',
      'solid-js/store',
      'solid-js/html',
      'solid-js/h'
    ],
    esbuildOptions: { keepNames: undefined, preserveSymlinks: undefined }
  },
  configFile: 'F:/Files/Github/solid-sfc/examples/counter/vite.config.js',
  configFileDependencies: [ 'vite.config.js' ],
  inlineConfig: {
    root: undefined,
    base: undefined,
    mode: undefined,
    configFile: undefined,
    logLevel: undefined,
    clearScreen: undefined,
    server: {}
  },
  root: 'F:/Files/Github/solid-sfc/examples/counter',
  base: '/',
  publicDir: 'F:\\Files\\Github\\solid-sfc\\examples\\counter\\public',
  cacheDir: 'F:\\Files\\Github\\solid-sfc\\examples\\counter\\node_modules\\.vite',
  command: 'serve',
  mode: 'development',
  isProduction: true,
  build: {
    target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
    polyfillModulePreload: true,
    outDir: 'F:\\Files\\Github\\solid-sfc\\examples\\counter\\dist',
    assetsDir: 'assets',
    assetsInlineLimit: 4096,
    cssCodeSplit: true,
    cssTarget: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
    sourcemap: false,
    rollupOptions: {},
    minify: 'esbuild',
    terserOptions: {},
    write: true,
    emptyOutDir: null,
    manifest: false,
    lib: false,
    ssr: false,
    ssrManifest: false,
    reportCompressedSize: true,
    chunkSizeWarningLimit: 500,
    watch: null,
    commonjsOptions: { include: [Array], extensions: [Array] },
    dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }
  },
  preview: {
    port: undefined,
    strictPort: undefined,
    host: undefined,
    https: undefined,
    open: undefined,
    proxy: undefined,
    cors: undefined
  },
  env: { BASE_URL: '/', MODE: 'development', DEV: false, PROD: true },
  assetsInclude: [Function: assetsInclude],
  logger: {
    hasWarned: false,
    info: [Function: info],
    warn: [Function: warn],
    warnOnce: [Function: warnOnce],
    error: [Function: error],
    clearScreen: [Function: clearScreen],
    hasErrorLogged: [Function: hasErrorLogged]
  },
  packageCache: Map(0) {},
  createResolver: [Function: createResolver]
}

If we look closely at mode and env.mode, both have the values of development, which is weird given the following code:
https://github.com/vitejs/vite/blob/b2d972e53b59329695f74e01893b21ec5c136ffd/packages/vite/src/node/config.ts#L391-L395

Seems to me that the issue here is on Vite. Our softfix for now would be to use config.mode !== 'production' instead of !config.isProduction.

[lxsmnsyc]

This PR might be related: vitejs/vite#6302

[lxsmnsyc]

Fun stuff

[lxsmnsyc]

Investigated a little bit further, Vite looks up to the first .env file it could find down to the root of the disk. Whoever thought this was a good idea?

[electroheadfx]

I have the same issue, when I add refresh in vite config :

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
import solidRefresh from 'solid-refresh/babel';

export default defineConfig({
  plugins: [solidPlugin({
    babel: {
        plugins: [
          [solidRefresh, { bundler: 'vite'}],
        ],
      },
  })],
  build: {
    target: 'esnext',
    polyfillDynamicImport: false,
  },
});

I got this error:

12:18:44 [vite] Internal server error: Duplicate plugin/preset detected.
If you'd like to use two separate instances of a plugin,
they need separate names, e.g.

  plugins: [
    ['some-plugin', {}],
    ['some-plugin', {}, 'some unique name'],
  ]

Duplicates detected are:
[
  {
    "alias": "base$0",
    "options": {
      "bundler": "vite"
    },
    "dirname": "/Users/efxair/Desktop/dev/solidtuts/my-app",
    "ownPass": false
  },
  {
    "alias": "base$1",
    "options": {
      "bundler": "vite"
    },
    "dirname": "/Users/efxair/Desktop/dev/solidtuts/my-app",
    "ownPass": false
  }
]
  Plugin: solid
  File: /Users/efxair/Desktop/dev/solidtuts/my-app/src/index.jsx
      at assertNoDuplicates (/Users/efxair/Desktop/dev/solidtuts/my-app/node_modules/@babel/core/lib/config/config-descriptors.js:239:13)
      at createDescriptors (/Users/efxair/Desktop/dev/solidtuts/my-app/node_modules/@babel/core/lib/config/config-descriptors.js:147:3)
      at createDescriptors.next (<anonymous>)
      at createPluginDescriptors (/Users/efxair/Desktop/dev/solidtuts/my-app/node_modules/@babel/core/lib/config/config-descriptors.js:138:17)
      at createPluginDescriptors.next (<anonymous>)
      at /Users/efxair/Desktop/dev/solidtuts/my-app/node_modules/@babel/core/lib/config/config-descriptors.js:94:32
      at Generator.next (<anonymous>)
      at Function.<anonymous> (/Users/efxair/Desktop/dev/solidtuts/my-app/node_modules/@babel/core/lib/gensync-utils/async.js:25:3)
      at Generator.next (<anonymous>)
      at step (/Users/efxair/Desktop/dev/solidtuts/my-app/node_modules/gensync/index.js:261:32)

[lxsmnsyc]

@electroheadfx solid-refresh is already included in the plugin, hence why you experience that problem.

[electroheadfx]

you are right. in my setup:

npx degit solidjs/templates/js my-app
cd my-app/
npm i
code .
npm run dev

I have not browser refreshing when I modify the app file. It refresh only if I add : /* @refresh reload */ at app file header. Sorry for the confusion.