SolidJS•10mo ago

Vite 5.2.x / Vitest 1.5.x: How to Resolve Multiple Instances of Solid

I am nearing my wits end trying to resolve these error messages I receive when trying to run my SolidJS tests with @solidjs/testing-library and vitest

stderr | file:~/Developer/github/.../nm/node_modules/solid-js/dist/dev.js:1932:13
You appear to have multiple instances of Solid. This can lead to unexpected behavior.

stderr | src/__tests__/App.test.tsx > <App /> > it will render an text input and a button
computations created outside a `createRoot` or `render` will never be disposed

stderr | file:~/Developer/github/.../nm/node_modules/solid-js/dist/dev.js:1932:13
You appear to have multiple instances of Solid. This can lead to unexpected behavior.

stderr | src/__tests__/App.test.tsx > <App /> > it will render an text input and a button
computations created outside a `createRoot` or `render` will never be disposed

I do not know what else to try and need assistance if anyone can help. I have the following vite.config.ts

/// <reference types="vitest" />
/// <reference types="vite/client" />

import { defineConfig } from "vite";
import solidPlugin from "vite-plugin-solid";
import { configDefaults } from "vitest/config";

export default defineConfig({
  plugins: [solidPlugin()],
  server: {
    port: 3000,
    proxy: {
      // Proxy API requests to the backend port in development
      "/api": "http://localhost:8000",
    },
  },
  build: {
    target: "esnext",
    copyPublicDir: false,
  },
  resolve: {
    conditions: ["development", "browser"],
  },
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: ["./setupTests.ts"],
    testTransformMode: { web: ["/.[jt]sx?$/"] },
    server: {
      deps: {
        inline: [/solid-js/],
      },
    },
    deps: {
      optimizer: {
        web: {
          enabled: true,
          include: ['solid-js'],
        }
      }
    },
    coverage: {
      all: true,
      provider: "istanbul",
      thresholds: {
        "100": true,
      },
    },
  },
});

/// <reference types="vitest" />
/// <reference types="vite/client" />

import { defineConfig } from "vite";
import solidPlugin from "vite-plugin-solid";
import { configDefaults } from "vitest/config";

export default defineConfig({
  plugins: [solidPlugin()],
  server: {
    port: 3000,
    proxy: {
      // Proxy API requests to the backend port in development
      "/api": "http://localhost:8000",
    },
  },
  build: {
    target: "esnext",
    copyPublicDir: false,
  },
  resolve: {
    conditions: ["development", "browser"],
  },
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: ["./setupTests.ts"],
    testTransformMode: { web: ["/.[jt]sx?$/"] },
    server: {
      deps: {
        inline: [/solid-js/],
      },
    },
    deps: {
      optimizer: {
        web: {
          enabled: true,
          include: ['solid-js'],
        }
      }
    },
    coverage: {
      all: true,
      provider: "istanbul",
      thresholds: {
        "100": true,
      },
    },
  },
});

In my package.json these are the dependencies I have:

{
  "dependencies": {
    "@elysiajs/static": "^1.0.3",
    "elysia": "^1.0.15",
    "solid-js": "^1.8.17"
  },
  "devDependencies": {
    "@elysiajs/eden": "^1.0.12",
    "@solidjs/testing-library": "^0.8.7",
    "@testing-library/jest-dom": "^6.4.2",
    "@testing-library/user-event": "^14.5.2",
    "@types/bun": "^1.1.0",
    "@types/node": "20.10.0",
    "@typescript-eslint/eslint-plugin": "^7.7.1",
    "@typescript-eslint/parser": "^7.7.1",
    "@vitest/coverage-istanbul": "^1.5.2",
    "eslint": "^8.56.0",
    "eslint-plugin-simple-import-sort": "^12.1.0",
    "eslint-plugin-solid": "^0.14.0",
    "jsdom": "^24.0.0",
    "prettier": "^3.2.5",
    "typescript": "5.4.5",
    "vite": "^5.2.10",
    "vite-plugin-solid": "^2.10.2",
    "vitest": "^1.5.2"
  },
}

{
  "dependencies": {
    "@elysiajs/static": "^1.0.3",
    "elysia": "^1.0.15",
    "solid-js": "^1.8.17"
  },
  "devDependencies": {
    "@elysiajs/eden": "^1.0.12",
    "@solidjs/testing-library": "^0.8.7",
    "@testing-library/jest-dom": "^6.4.2",
    "@testing-library/user-event": "^14.5.2",
    "@types/bun": "^1.1.0",
    "@types/node": "20.10.0",
    "@typescript-eslint/eslint-plugin": "^7.7.1",
    "@typescript-eslint/parser": "^7.7.1",
    "@vitest/coverage-istanbul": "^1.5.2",
    "eslint": "^8.56.0",
    "eslint-plugin-simple-import-sort": "^12.1.0",
    "eslint-plugin-solid": "^0.14.0",
    "jsdom": "^24.0.0",
    "prettier": "^3.2.5",
    "typescript": "5.4.5",
    "vite": "^5.2.10",
    "vite-plugin-solid": "^2.10.2",
    "vitest": "^1.5.2"
  },
}

4 Replies

MaveriX89OP•10mo ago

Ended up solving it by updating my vite.config.ts with the following:

server: {
  deps: {
    external: [/solid-js/],
  },
},

server: {
  deps: {
    external: [/solid-js/],
  },
},

Alex Lohr•10mo ago

Most of the test config shouldn't be necessary anymore.

Alex Lohr•10mo ago

https://github.com/solidjs/vite-plugin-solid/blob/main/src/index.ts#L211

GitHub

vite-plugin-solid/src/index.ts at main · solidjs/vite-plugin-solid

A simple integration to run solid-js with vite. Contribute to solidjs/vite-plugin-solid development by creating an account on GitHub.

Alex Lohr•10mo ago

We automatically configure everything that is required to test your solid code with vitest. including server.deps.external.

Gaming

Programming

Vite 5.2.x / Vitest 1.5.x: How to Resolve Multiple Instances of Solid

Did you find this page helpful?