Unable To Import Scoped Styles

[ghost]

For some weird Reasons, Rollup Crashes whenever i try to import the scoped scss, says file not found, and the file path always ends with a query like Gallery\gallery.scoped.scss?scope=f4b9bc0b

[cmseguin]

Can you share your configs, I have to be honest, I haven't got as far as doing test on projects that are not using vite.

[ghost]

import babel from "rollup-plugin-babel";
import commonjs from "rollup-plugin-commonjs";
import external from "rollup-plugin-peer-deps-external";
import postcss from "rollup-plugin-postcss";
import resolve from "rollup-plugin-node-resolve";
import url from "rollup-plugin-url";
import reactScopedCssPlugin from "rollup-plugin-react-scoped-css";

import pkg from "./package.json";

const reactScopedPlugins = reactScopedCssPlugin();

export default {
  input: "src/index.js",
  output: [
    {
      file: pkg.main,
      format: "cjs",
      sourcemap: true,
    },
    {
      file: pkg.module,
      format: "es",
      sourcemap: true,
    },
  ],
  plugins: [
    reactScopedPlugins[0],
    external(),
    postcss({
      modules: true,
    }),
    url(),
    babel({
      exclude: "node_modules/**",
      plugins: ["external-helpers"],
    }),
    resolve(),
    commonjs(),
    reactScopedPlugins[1],
  ],
};

[cmseguin]

I will try work on replicating your project in the examples tonight and will try to work on a fix ASAP. Feel free to open a PR if you want to setup the example repo so we can better resolve this issue! :)

Is your project using JSX in any form?

[ghost]

I will try work on replicating your project in the examples tonight and will try to work on a fix ASAP. Feel free to open a PR if you want to setup the example repo so we can better resolve this issue! :)

Is your project using JSX in any form?

without jsx, this error doesn't come up and scoped css doesn't seem to work...

I am currently trying to modify this project react-shimmer-effects. The styles used in this project were causing conflicts with tailwinds in a project i am currently using it on. so i am trying to fix the issue by scoping the styles used

[cmseguin]

Thank you! I didn't really have a usecase to use react without vite but this is a great example !👍 I will try to work on it ASAP and find a solution!

[cmseguin]

I am trying to install the example and can't even install the dependency from react-shimmer-effects. Also one thing I noticed is that the react file are in .js extension so for sure you would have to add options to specify your jsx is located in .js files or convert your files to .jsx

const reactScopedPlugins = reactScopedCssPlugin({
  jsxFileExtensions: ['js', 'jsx', 'ts', 'tsx']
})

[ghost]

To Install The Dependency ensure to use npm, with package.lock files intact, some packages used are not compatible with the most recent versions on react eg react script.

[ghost]

let me set up a stable example copy of the react-shimmer for you to work it,

[ghost]

I am trying to install the example and can't even install the dependency from react-shimmer-effects. Also one thing I noticed is that the react file are in .js extension so for sure you would have to add options to specify your jsx is located in .js files or convert your files to .jsx

const reactScopedPlugins = reactScopedCssPlugin({
  jsxFileExtensions: ['js', 'jsx', 'ts', 'tsx']
})

yeah i had to change some of the files to jsx extensions, will probably use the above approach later, and then i realised that moving the second part of the react-scoped-plugin just below the postcss plugin, in the rollup config file fixed the stylesheet not found issue, but reactScopedCssPlugin started throwing some jsx related syntax errror.

[cmseguin]

I published a new version of the plugin recently (0.6.1) and i ended up changing a few things... now my testing is done by compiling code using babel which is probably closer to your setup.

I am wondering if this issue is still present?

[ghost]

Oh, I had to find an alternative to react-shimmer-effects, will try the new version out later and see if it fixes it

[shaniqwa]

I have the same issue. any updates on this? tnx

[vinimarcili]

Same problem here