cmseguin / rollup-plugin-react-scoped-css

A rollup plugin designed to allow scoped css to be run in react (Compatible with vite and rollup)
38 stars 6 forks source link

Build failed with typescript #33

Closed nmchgx closed 2 years ago

nmchgx commented 2 years ago

Hello, I can use the plugin to run vite, but cannot run vite build.I hope to get your help.

Error

vite v2.4.3 building for production...
✓ 189 modules transformed.
Could not load /code/client/src/components/top-nav/styles/index.scoped.less?scope=b8709f7c (imported by src/components/top-nav/index.tsx): ENOENT: no such file or directory, open '/code/client/src/components/top-nav/styles/index.scoped.less?scope=b8709f7c'
error during build:
Error: Could not load /code/client/src/components/top-nav/styles/index.scoped.less?scope=b8709f7c (imported by src/components/top-nav/index.tsx): ENOENT: no such file or directory, open '/code/client/src/components/top-nav/styles/index.scoped.less?scope=b8709f7c'
error Command failed with exit code 1.

vite.config.ts

import { defineConfig } from 'vite';
import path from 'path';
import react from '@vitejs/plugin-react';
import reactScopedCssPlugin from 'rollup-plugin-react-scoped-css';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    reactScopedCssPlugin() as any,
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
});

package.json

{
  "name": "client",
  "version": "1.0.0",
  "scripts": {
    "start": "vite",
    "build": "tsc && vite build"
  },
  "engines": {
    "node": "12",
    "yarn": ">= 1.19.1"
  },
  "dependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-router-dom": "^5.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.16.12",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-router-dom": "^5.1.8",
    "@typescript-eslint/eslint-plugin": "^4.28.5",
    "@typescript-eslint/parser": "^4.28.5",
    "@vitejs/plugin-react": "^1.1.4",
    "eslint": "^7.31.0",
    "eslint-plugin-react": "^7.24.0",
    "less": "^4.1.2",
    "rollup-plugin-react-scoped-css": "^0.6.1",
    "typescript": "^4.3.2",
    "vite": "^2.4.3"
  }
}
cmseguin commented 2 years ago

Hi! :) I am sorry this is happening. I will look into this hopefully today or tomorrow! I will let you know!

cmseguin commented 2 years ago

I have looked into it and could not reproduce with my setup... The only thing that is different from yours is my build command:

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
  },

Is there a reason why you are running tsc before vite build? I think vite is supposed to handle typescript for you.

nmchgx commented 2 years ago

The build is successful! Thank you for your timely reply. I think the reason is the vite version.

Before

vite v2.4.3 building for production...
✓ 189 modules transformed.
Could not load /code/client/src/components/top-nav/styles/index.scoped.less?scope=b8709f7c (imported by src/components/top-nav/index.tsx): ENOENT: no such file or directory, open '/code/client/src/components/top-nav/styles/index.scoped.less?scope=b8709f7c'
error during build:
Error: Could not load /code/client/src/components/top-nav/styles/index.scoped.less?scope=b8709f7c (imported by src/components/top-nav/index.tsx): ENOENT: no such file or directory, open '/code/client/src/components/top-nav/styles/index.scoped.less?scope=b8709f7c'
error Command failed with exit code 1.

After

vite v2.7.13 building for production...
✓ 1719 modules transformed.
dist/index.html                     6.00 KiB
dist/assets/index.ae41ccc4.css      5.83 KiB / gzip: 1.36 KiB
dist/assets/index.9d2dad9a.js       22.04 KiB / gzip: 6.40 KiB
dist/assets/vendor.da5dbdfa.js      1690.96 KiB / gzip: 414.89 KiB
cmseguin commented 2 years ago

Ah sweet 👍 Thank you!