Comments (10)
ovidiuch
commented on May 28, 2024
1
@ambadyanands thanks for reporting this!
The Vite plugin is still early days but luckily the issue was easy to fix (see #1453 if you're curious).
Also fixed the example from the docs where the fixture should import the Hello component from a sibling path:
-import { Hello } from '../Hello';
+import { Hello } from './Hello';That said, pushed a fix in 6.0.0-alpha.14 so please install react-cosmos@next react-cosmos-plugin-vite@next again and let me know if you experience other issues.
from react-cosmos.
ambadyanands
commented on May 28, 2024
1
@skidding Thanks a lot, that fixed the issue 👍
from react-cosmos.
crobinson42
commented on May 28, 2024
1
@ovidiuch I have this issue following the docs for Vite with a basic fixture:
from react-cosmos.
AlexEscalante
commented on May 28, 2024
I am having the same exact problem, but I went even more basic and my Basic.fixture.tsx is only:
export default <h1>Hello world!</h1>;
My cosmos.config.json:
{
"plugins": ["react-cosmos-plugin-vite"],
"staticPath": "./public/"
}
Cosmos seems to run without issues, and it even detects my vite.config.ts:
> cosmos
[Cosmos] Using cosmos config found at cosmos.config.json
[Cosmos] Found 1 plugin: Vite
[Cosmos] Serving static files from public
[Cosmos] See you at http://localhost:5000
[Cosmos] Using vite config found at vite.config.ts
My vite.config.ts is here also, maybe there is something Cosmos doesn't like?:
import legacy from '@vitejs/plugin-legacy';
import react from '@vitejs/plugin-react';
import basicSsl from '@vitejs/plugin-basic-ssl';
import { VitePWA } from 'vite-plugin-pwa';
import { compression } from 'vite-plugin-compression2';
import { defineConfig, loadEnv } from 'vite';
export default defineConfig(({ command: _, mode }) => {
const env = loadEnv(mode, process.cwd(), 'IRON_');
return {
build: {
sourcemap: true, // Needed for Sentry
},
plugins: [
react(),
legacy(),
basicSsl(),
compression({ algorithm: 'gzip' }),
VitePWA({
strategies: 'injectManifest',
srcDir: 'src',
filename: 'service-worker.ts',
registerType: 'autoUpdate',
workbox: {
clientsClaim: true,
skipWaiting: true,
globPatterns: ['**/*.{gz,css,html,ico,png,svg}'],
},
}),
],
test: {
globals: true,
environment: 'jsdom',
setupFiles: './src/setupTests.ts',
},
define: {
'process.env': JSON.stringify(env),
},
server: {
port: 8100,
},
environment: 'jsdom',
setupFiles: './src/setupTests.ts',
};
});
I will certainly appreciate any help! 😄
from react-cosmos.
ovidiuch
commented on May 28, 2024
@AlexEscalante Thanks for sharing your data! The easiest way for me to debug is if you create a public repo with this setup that replicates your issue because I can clone it and inspect the code directly. Let me know if you can provide that and I'll look into it.
from react-cosmos.
ovidiuch
commented on May 28, 2024
@crobinson42 I don't know how to reproduce that locally. Do you have a public repo for me to look at?
from react-cosmos.
crobinson42
commented on May 28, 2024
@ovidiuch here you go: https://github.com/crobinson42/react-cosmos-vite-issue pull, npm install, run npm run cosmos you'll see 1 fixture "Button" that fails to load in the network tab.
I also tried to use webpack and the same issue occurs where it waits for the renderer forever.
My env: Mac M3 Node v20.9.0 NPM v10.2.5.
from react-cosmos.
ovidiuch
commented on May 28, 2024
@crobinson42 It seems like your Vite app is missing an index.html.
If I add this index.html in your repo root:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/index.ts"></script>
</body>
</html>The vite renderer loads but now has some alias errors:
[plugin:vite:import-analysis] Failed to resolve import "@/components/ui/button" from "src/components/ui/button.fixture.tsx". Does the file exist?
/Users/[redacted]/Work/crobinson42/react-cosmos-vite-issue/src/components/ui/button.fixture.tsx:1:21
I'm guessing you need to configure some aliases in your Vite config.
Maybe it isn't visible enough but the Vite guide starts with this mention:
from react-cosmos.
crobinson42
commented on May 28, 2024
Thank you @ovidiuch - it's a component lib so i need or think to add an index.html file 😶🌫️ it would be could if react-cosmos provided it automagically but probably not the responsible of the lib, just a nice-to-have.
from react-cosmos.
ovidiuch
commented on May 28, 2024
Thank you @ovidiuch - it's a component lib so i need or think to add an index.html file 😶🌫️ it would be could if react-cosmos provided it automagically but probably not the responsible of the lib, just a nice-to-have.
That's fair. The Vite plugin should do this as bundlers are rather different so this would be Vite specific. For example webpack has the html-webpack-plugin which creates the html automatically but I don't know if there is something similar for Vite. It would be nice if we could surface this issue more clearly, though.
from react-cosmos.
Related Issues (20)
- Increase awareness of the ability to override Webpack config HOT 1
- Webpack emits DefinePlugin warning on a fresh install with create-react-app HOT 2
- Props tab show nothing when decorator for fixture not include `children` in response HOT 7
- Alert shows the wrong port number (minor) HOT 2
- Cosmos cannot find Vite configuration file with "ts" extension HOT 4
- Respect SSL option when connecting to websocket HOT 4
- fixture fails to enter fullscreen mode HOT 6
- Can't get cosmos to run with or without babel-loader or ts-loader HOT 4
- `cosmos --expose-imports` seems to have stopped building imports at some point HOT 3
- Cosmos.imports.ts isn't created nor updated on subsequent runs of npm run cosmos HOT 3
- Unable to use alias Preact in `next` branch HOT 9
- Fixture Error : Lazy element type must resolve to a class or function HOT 3
- Build fails with node@20 HOT 4
- Next.js 14 no longer allows 'use client' and generateStaticParams() to be used together HOT 3
- Does not show multi fixture with custom bundler (Parcel) HOT 4
- Getting "Waiting for renderer" - how troubleshoot HOT 4
- Stop firing keyboard shortcuts when typing inside contenteditable
- No support for non-server components in Next.js HOT 2
- No preview when using custom renderer with `--root-dir=`... HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-cosmos.