Module '"rollup-plugin-react-scoped-css"' has no exported member 'reactScopedCssPlugin'

[Pandazaur]

Hello,

I'm trying to use this package with Vite + React but I'cant start my dev server when I'm adding the README config.

I tried to change my import to: import reactScopedCssPlugin from 'rollup-plugin-react-scoped-css' which seems to be better in my IDE but then, when I'm trying to npm run dev, I have this error:

failed to load config from /Users/x/Programmation/cryptopots/private/vite.config.ts
error when starting dev server:
TypeError: reactScopedCssPlugin is not a function
    at file:///Users/x/Programmation/cryptopots/private/vite.config.ts.timestamp-1667637649251.mjs:8:22
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
    at async loadConfigFromBundledFile (file:///Users/x/Programmation/cryptopots/private/node_modules/vite/dist/node/chunks/dep-c842e491.js:64010:21)
    at async loadConfigFromFile (file:///Users/x/Programmation/cryptopots/private/node_modules/vite/dist/node/chunks/dep-c842e491.js:63895:28)
    at async resolveConfig (file:///Users/x/Programmation/cryptopots/private/node_modules/vite/dist/node/chunks/dep-c842e491.js:63519:28)
    at async createServer (file:///Users/x/Programmation/cryptopots/private/node_modules/vite/dist/node/chunks/dep-c842e491.js:62819:20)
    at async CAC.<anonymous> (file:///Users/x/Programmation/cryptopots/private/node_modules/vite/dist/node/cli.js:707:24)

---

My package.json

{
  "name": "private",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "classnames": "^2.3.2",
    "localforage": "^1.10.0",
    "match-sorter": "^6.3.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.4.2",
    "sort-by": "^1.2.0"
  },
  "devDependencies": {
    "@types/node": "^18.11.8",
    "@types/react": "^18.0.22",
    "@types/react-dom": "^18.0.7",
    "@vitejs/plugin-react": "^2.2.0",
    "rollup-plugin-react-scoped-css": "^0.6.1",
    "sass": "^1.55.0",
    "typescript": "^4.6.4",
    "vite": "^3.2.0"
  }
}

I'm using typescript in my project. Do you have any idea about how to fix this ?

Thanks

[Pandazaur]

I found out that the problem is linked to the "package.json" with type: "module". When I remove it, it works.

I don't know if it's intended to work like this. You might specify it in the README

[cmseguin]

Hi if you try using 0.7.0 I think it should be fixed! :)

[cmseguin]

@Pandazaur Can you confirm that this issue is resolved for you on 0.7.0. I removed default exports so it should not be a problem now, you would just have to change

import reactScopedCssPlugin from "rollup-plugin-react-scoped-css";

to

import { reactScopedCssPlugin } from "rollup-plugin-react-scoped-css";