fwouts / previewjs Goto Github PK

Preview UI components in your IDE instantly

License: Other

HTML 4.82% TypeScript 73.83% CSS 5.40% JavaScript 4.60% Kotlin 3.18% Less 0.07% SCSS 0.25% Vue 2.18% Svelte 2.27% Shell 0.04% MDX 3.36%

react preview vscode vue intellij solid preact svelte

previewjs's Introduction

Preview.js lets you preview React, Preact, Solid, Svelte, Vue components and Storybook stories instantly in your IDE (or in your browser via the CLI).

Get started

Preview.js is available for:

Documentation

Read the docs to learn more

Contributing

Please see the contributing guide.

License

Preview.js is divided into multiple packages, each licensed under either AGPL-3.0 or MIT.

Preview.js Pro is proprietary and not available under an open source license.

Please refer to LICENSE under each directory to find out which license applies.

previewjs's People

Contributors

Stargazers

Watchers

Forkers

davidlozzi ingridamilsina davidmeirlevy der-ofenmeister keul poundhu moussariad naseemsm gridaco chelestewang ringozzt zhixiaoqiang jesika630 jkalio52 mushan-hub hchlq xandrkat envistacom liangruile-michela d-bryan wangzhengbo spaceblocks franciraldo jiangtao tnhu marckux84 krofdrakula dohooo fairhopeweb hnjm saurabhnemade productinfo trautmannp pruge fegg kongweiying2 royaljain code-parrot-ai dickyvio44 jllahi rob256 joenix tonyduke-sjtu linecode

previewjs's Issues

esbuild-darwin-64 missing (Apple Silicon)

Describe the bug

Attempting to preview an element causes React Preview to complain that esbuild-darwin-64 is missing. However, the package is not compatible with Apple Silicon as it is for x64 not ARM64.

Reproduction

Click on Open React Element in React Preview

React Preview version

v0.7.1

System Info

System:
    OS: macOS 11.6
    CPU: (8) arm64 Apple M1
    Memory: 159.30 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.10.0 - /opt/homebrew/bin/node
    npm: 7.24.0 - /opt/homebrew/bin/npm
  IDEs:
    Nano: 2.0.6 - /usr/bin/nano
    VSCode: 1.60.2 - /usr/local/bin/code
    Vim: 8.2 - /opt/homebrew/bin/vim
    Xcode: 13.0/13A233 - /usr/bin/xcodebuild
  Browsers:
    Chrome: 94.0.4606.71
    Safari: 15.0

Used Package Manager

npm

Extension logs (useful for crashes)

added 107 packages, and audited 108 packages in 14s

23 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities


Bootstrapped successfully.
React Preview Server running at http://localhost:3140.
Error: The package "esbuild-darwin-64" could not be found, and is needed by esbuild.

If you are installing esbuild with npm, make sure that you don't specify the
"--no-optional" flag. The "optionalDependencies" package.json feature is used
by esbuild to install the correct binary executable for your current platform.
    at generateBinPath (/Users/admin/.vscode/extensions/zenclabs.reactpreview-0.7.1/dist/server/node_modules/esbuild/lib/main.js:1642:15)
    at esbuildCommandAndArgs (/Users/admin/.vscode/extensions/zenclabs.reactpreview-0.7.1/dist/server/node_modules/esbuild/lib/main.js:1698:11)
    at ensureServiceIsRunning (/Users/admin/.vscode/extensions/zenclabs.reactpreview-0.7.1/dist/server/node_modules/esbuild/lib/main.js:1855:25)
    at Object.build (/Users/admin/.vscode/extensions/zenclabs.reactpreview-0.7.1/dist/server/node_modules/esbuild/lib/main.js:1748:26)
    at /Users/admin/.vscode/extensions/zenclabs.reactpreview-0.7.1/dist/server/node_modules/vite/dist/node/chunks/dep-24231913.js:50679:54
    at Array.map (<anonymous>)
    at scanImports (/Users/admin/.vscode/extensions/zenclabs.reactpreview-0.7.1/dist/server/node_modules/vite/dist/node/chunks/dep-24231913.js:50679:31)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async optimizeDeps (/Users/admin/.vscode/extensions/zenclabs.reactpreview-0.7.1/dist/server/node_modules/vite/dist/node/chunks/dep-24231913.js:71133:30)
    at async runOptimize (/Users/admin/.vscode/extensions/zenclabs.reactpreview-0.7.1/dist/server/node_modules/vite/dist/node/chunks/dep-24231913.js:74997:48)
events.js:292
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE: address already in use :::3140
    at Server.setupListenHandle [as _listen2] (net.js:1318:16)
    at listenInCluster (net.js:1366:12)
    at Server.listen (net.js:1452:7)
    at Function.v.listen (/Users/admin/.vscode/extensions/zenclabs.reactpreview-0.7.1/dist/server/node_modules/@reactpreview/core/lib/635.js:2:246900)
    at /Users/admin/.vscode/extensions/zenclabs.reactpreview-0.7.1/dist/server/node_modules/@reactpreview/core/lib/index.js:1:29647
    at new Promise (<anonymous>)
    at t.ReactPreviewServer.start (/Users/admin/.vscode/extensions/zenclabs.reactpreview-0.7.1/dist/server/node_modules/@reactpreview/core/lib/index.js:1:29601)
    at /Users/admin/.vscode/extensions/zenclabs.reactpreview-0.7.1/dist/server/node_modules/@reactpreview/core/lib/index.js:1:27437
    at async t.Previewer.startFromStopped (/Users/admin/.vscode/extensions/zenclabs.reactpreview-0.7.1/dist/server/node_modules/@reactpreview/core/lib/index.js:1:27521)
    at async t.Previewer.start (/Users/admin/.vscode/extensions/zenclabs.reactpreview-0.7.1/dist/server/node_modules/@reactpreview/core/lib/index.js:1:26400)
Emitted 'error' event on Server instance at:
    at emitErrorNT (net.js:1345:8)
    at processTicksAndRejections (internal/process/task_queues.js:80:21) {
  code: 'EADDRINUSE',
  errno: -48,
  syscall: 'listen',
  address: '::',
  port: 3140
}
[Info  - 9:13:06 PM] Connection to server got closed. Server will restart.
Bootstrapped successfully.
React Preview Server running at http://localhost:3140.
Error: The package "esbuild-darwin-64" could not be found, and is needed by esbuild.

If you are installing esbuild with npm, make sure that you don't specify the
"--no-optional" flag. The "optionalDependencies" package.json feature is used
by esbuild to install the correct binary executable for your current platform.
    at generateBinPath (/Users/admin/.vscode/extensions/zenclabs.reactpreview-0.7.1/dist/server/node_modules/esbuild/lib/main.js:1642:15)
    at esbuildCommandAndArgs (/Users/admin/.vscode/extensions/zenclabs.reactpreview-0.7.1/dist/server/node_modules/esbuild/lib/main.js:1698:11)
    at ensureServiceIsRunning (/Users/admin/.vscode/extensions/zenclabs.reactpreview-0.7.1/dist/server/node_modules/esbuild/lib/main.js:1855:25)
    at Object.build (/Users/admin/.vscode/extensions/zenclabs.reactpreview-0.7.1/dist/server/node_modules/esbuild/lib/main.js:1748:26)
    at /Users/admin/.vscode/extensions/zenclabs.reactpreview-0.7.1/dist/server/node_modules/vite/dist/node/chunks/dep-24231913.js:50679:54
    at Array.map (<anonymous>)
    at scanImports (/Users/admin/.vscode/extensions/zenclabs.reactpreview-0.7.1/dist/server/node_modules/vite/dist/node/chunks/dep-24231913.js:50679:31)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async optimizeDeps (/Users/admin/.vscode/extensions/zenclabs.reactpreview-0.7.1/dist/server/node_modules/vite/dist/node/chunks/dep-24231913.js:71133:30)
    at async runOptimize (/Users/admin/.vscode/extensions/zenclabs.reactpreview-0.7.1/dist/server/node_modules/vite/dist/node/chunks/dep-24231913.js:74997:48)
events.js:292
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE: address already in use :::3140
    at Server.setupListenHandle [as _listen2] (net.js:1318:16)
    at listenInCluster (net.js:1366:12)
    at Server.listen (net.js:1452:7)
    at Function.v.listen (/Users/admin/.vscode/extensions/zenclabs.reactpreview-0.7.1/dist/server/node_modules/@reactpreview/core/lib/635.js:2:246900)
    at /Users/admin/.vscode/extensions/zenclabs.reactpreview-0.7.1/dist/server/node_modules/@reactpreview/core/lib/index.js:1:29647
    at new Promise (<anonymous>)
    at t.ReactPreviewServer.start (/Users/admin/.vscode/extensions/zenclabs.reactpreview-0.7.1/dist/server/node_modules/@reactpreview/core/lib/index.js:1:29601)
    at /Users/admin/.vscode/extensions/zenclabs.reactpreview-0.7.1/dist/server/node_modules/@reactpreview/core/lib/index.js:1:27437
    at async t.Previewer.startFromStopped (/Users/admin/.vscode/extensions/zenclabs.reactpreview-0.7.1/dist/server/node_modules/@reactpreview/core/lib/index.js:1:27521)
    at async t.Previewer.start (/Users/admin/.vscode/extensions/zenclabs.reactpreview-0.7.1/dist/server/node_modules/@reactpreview/core/lib/index.js:1:26400)
Emitted 'error' event on Server instance at:
    at emitErrorNT (net.js:1345:8)
    at processTicksAndRejections (internal/process/task_queues.js:80:21) {
  code: 'EADDRINUSE',
  errno: -48,
  syscall: 'listen',
  address: '::',
  port: 3140
}
[Info  - 9:15:23 PM] Connection to server got closed. Server will restart.
Bootstrapped successfully.
React Preview Server running at http://localhost:3140.

Preview logs (useful for rendering errors)

No response

Anything else?

No response

No styles with Vite and TailwindCSS

Describe the bug
When using tailwind and vite, the preview opens but doesn't have any styles.

To Reproduce
Try running this project I'm working on https://github.com/valtism/music-list

I think that this may be because Vite doesn't really produce an output css file. It takes the inputs and processes them with postCSS, but then hides the output somewhere that is still available in dev mode.

Desktop (please complete the following information):

OS: macOS
Extension version: 0.2.2

The React Preview server crashes

Describe the bugv
The React Preview server crashes and won't start. This after a installing the extension and restarting VSCode

The React Preview server crashed 5 times in the last 3 minutes. The server will not be restarted.

To Reproduce
Install the extension. Look down in the corner. Message from VSCode saying the server crashes and won't restart.

Screenshots

Extension logs (useful for crashes)
Error: Cannot find module 'typescript'
Require stack:

/Users/einarlove/.vscode/extensions/zenclabs.reactpreview-0.2.2/dist/server/bundle.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:934:15)
at Module._load (internal/modules/cjs/loader.js:779:27)
at Function.f._load (electron/js2c/asar_bundle.js:5:12684)
at Module.require (internal/modules/cjs/loader.js:1006:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.8519 (/Users/einarlove/.vscode/extensions/zenclabs.reactpreview-0.2.2/dist/server/bundle.js:2:794421)
at webpack_require (/Users/einarlove/.vscode/extensions/zenclabs.reactpreview-0.2.2/dist/server/bundle.js:2:794857)
at Object.6810 (/Users/einarlove/.vscode/extensions/zenclabs.reactpreview-0.2.2/dist/server/bundle.js:2:549479)
at webpack_require (/Users/einarlove/.vscode/extensions/zenclabs.reactpreview-0.2.2/dist/server/bundle.js:2:794857)
at Object.1031 (/Users/einarlove/.vscode/extensions/zenclabs.reactpreview-0.2.2/dist/server/bundle.js:2:561507) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/Users/einarlove/.vscode/extensions/zenclabs.reactpreview-0.2.2/dist/server/bundle.js'
]
}
[Info - 12:07:08 PM] Connection to server got closed. Server will restart.
Error: Cannot find module 'typescript'
Require stack:
/Users/einarlove/.vscode/extensions/zenclabs.reactpreview-0.2.2/dist/server/bundle.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:934:15)
at Module._load (internal/modules/cjs/loader.js:779:27)
at Function.f._load (electron/js2c/asar_bundle.js:5:12684)
at Module.require (internal/modules/cjs/loader.js:1006:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.8519 (/Users/einarlove/.vscode/extensions/zenclabs.reactpreview-0.2.2/dist/server/bundle.js:2:794421)
at webpack_require (/Users/einarlove/.vscode/extensions/zenclabs.reactpreview-0.2.2/dist/server/bundle.js:2:794857)
at Object.6810 (/Users/einarlove/.vscode/extensions/zenclabs.reactpreview-0.2.2/dist/server/bundle.js:2:549479)
at webpack_require (/Users/einarlove/.vscode/extensions/zenclabs.reactpreview-0.2.2/dist/server/bundle.js:2:794857)
at Object.1031 (/Users/einarlove/.vscode/extensions/zenclabs.reactpreview-0.2.2/dist/server/bundle.js:2:561507) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/Users/einarlove/.vscode/extensions/zenclabs.reactpreview-0.2.2/dist/server/bundle.js'
]
}
[Info - 12:07:08 PM] Connection to server got closed. Server will restart.
Error: Cannot find module 'typescript'
Require stack:
/Users/einarlove/.vscode/extensions/zenclabs.reactpreview-0.2.2/dist/server/bundle.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:934:15)
at Module._load (internal/modules/cjs/loader.js:779:27)
at Function.f._load (electron/js2c/asar_bundle.js:5:12684)
at Module.require (internal/modules/cjs/loader.js:1006:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.8519 (/Users/einarlove/.vscode/extensions/zenclabs.reactpreview-0.2.2/dist/server/bundle.js:2:794421)
at webpack_require (/Users/einarlove/.vscode/extensions/zenclabs.reactpreview-0.2.2/dist/server/bundle.js:2:794857)
at Object.6810 (/Users/einarlove/.vscode/extensions/zenclabs.reactpreview-0.2.2/dist/server/bundle.js:2:549479)
at webpack_require (/Users/einarlove/.vscode/extensions/zenclabs.reactpreview-0.2.2/dist/server/bundle.js:2:794857)
at Object.1031 (/Users/einarlove/.vscode/extensions/zenclabs.reactpreview-0.2.2/dist/server/bundle.js:2:561507) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/Users/einarlove/.vscode/extensions/zenclabs.reactpreview-0.2.2/dist/server/bundle.js'
]
}
[Info - 12:07:08 PM] Connection to server got closed. Server will restart.
Error: Cannot find module 'typescript'
Require stack:
/Users/einarlove/.vscode/extensions/zenclabs.reactpreview-0.2.2/dist/server/bundle.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:934:15)
at Module._load (internal/modules/cjs/loader.js:779:27)
at Function.f._load (electron/js2c/asar_bundle.js:5:12684)
at Module.require (internal/modules/cjs/loader.js:1006:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.8519 (/Users/einarlove/.vscode/extensions/zenclabs.reactpreview-0.2.2/dist/server/bundle.js:2:794421)
at webpack_require (/Users/einarlove/.vscode/extensions/zenclabs.reactpreview-0.2.2/dist/server/bundle.js:2:794857)
at Object.6810 (/Users/einarlove/.vscode/extensions/zenclabs.reactpreview-0.2.2/dist/server/bundle.js:2:549479)
at webpack_require (/Users/einarlove/.vscode/extensions/zenclabs.reactpreview-0.2.2/dist/server/bundle.js:2:794857)
at Object.1031 (/Users/einarlove/.vscode/extensions/zenclabs.reactpreview-0.2.2/dist/server/bundle.js:2:561507) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/Users/einarlove/.vscode/extensions/zenclabs.reactpreview-0.2.2/dist/server/bundle.js'
]
}
[Info - 12:07:08 PM] Connection to server got closed. Server will restart.
Error: Cannot find module 'typescript'
Require stack:
/Users/einarlove/.vscode/extensions/zenclabs.reactpreview-0.2.2/dist/server/bundle.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:934:15)
at Module._load (internal/modules/cjs/loader.js:779:27)
at Function.f._load (electron/js2c/asar_bundle.js:5:12684)
at Module.require (internal/modules/cjs/loader.js:1006:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.8519 (/Users/einarlove/.vscode/extensions/zenclabs.reactpreview-0.2.2/dist/server/bundle.js:2:794421)
at webpack_require (/Users/einarlove/.vscode/extensions/zenclabs.reactpreview-0.2.2/dist/server/bundle.js:2:794857)
at Object.6810 (/Users/einarlove/.vscode/extensions/zenclabs.reactpreview-0.2.2/dist/server/bundle.js:2:549479)
at webpack_require (/Users/einarlove/.vscode/extensions/zenclabs.reactpreview-0.2.2/dist/server/bundle.js:2:794857)
at Object.1031 (/Users/einarlove/.vscode/extensions/zenclabs.reactpreview-0.2.2/dist/server/bundle.js:2:561507) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/Users/einarlove/.vscode/extensions/zenclabs.reactpreview-0.2.2/dist/server/bundle.js'
]
}
[Error - 12:07:09 PM] Connection to server got closed. Server will not be restarted.

Desktop (please complete the following information):

OS: Macbook 13" M1
Extension version: 0.2.2

Vanilla-extract CSS-in-TS support

Hi, are you considering to add support for .css.ts files that vanilla-extract uses? It doesn't seem to work at the moment.

Option to open in browser by default, preview tab not required.

Currently a preview tab is always opened in a vscode tab, and if you want to instead view it in a browser you need to click the link, and then move the preview tab out of its split pane (but not close it).

I'm wondering if an option to open in browser by default would be worthwhile, and the possibility to not require a preview tab in-app to have the preview running? Maybe not worthwhile.. but something like the floating debugger bar could be an option?

Just throwing ideas around, not sure what the ideal approach is here. I do think currently it is a little clunky if you don't want to have the preview in-app. Low priority regardless.

Not compatible with the latest WebStorm 2021.3

Describe the bug

Latest WebStorm 2021.3 is not supported. Unable to install the plugin.

Reproduction

Get WebStorm 2021.3
Go to https://plugins.jetbrains.com/plugin/17569-react-preview-beta-

React Preview version

n/a

System Info

n/a

Used Package Manager

yarn

React Preview control-plane.log (useful for crashes)

No response

Preview logs (useful for rendering errors)

No response

Anything else?

waiting too long to access 'https://reactpreview.com' when preview the component

Describe the bug

I am a developer living in Shanghai, China. it takes too long to access 'https://reactpreview.com' when i preview the component. （may be affected by GFW）

Reproduction

See description

React Preview version

v0.7.1

System Info

System:
    OS: macOS 11.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 1.04 GB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 12.18.4 - ~/.nvm/versions/node/v12.18.4/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.6 - ~/.nvm/versions/node/v12.18.4/bin/npm
  IDEs:
    Nano: 2.0.6 - /usr/bin/nano
    VSCode: 1.61.2 - /usr/local/bin/code
    Vim: 8.2 - /usr/bin/vim
    Xcode: 13.0/13A233 - /usr/bin/xcodebuild
  Browsers:
    Chrome: 95.0.4638.54
    Firefox: 89.0.2
    Safari: 15.0

Used Package Manager

yarn

Extension logs (useful for crashes)

No response

Preview logs (useful for rendering errors)

No response

Anything else?

No response

CSS Not being applied

Describe the bug

I'm getting this error in the preview and getting my react components with no CSS styling:

TypeError: Failed to fetch dynamically imported module: http://localhost:3140/preview/__reactpreview__/Wrapper.tsx

Reproduction

// react-review.config.js

module.exports = {
  // Aliasing of paths to directories.
  //
  // Note: tsconfig.json path aliases are automatically detected, they can be omitted.
  alias: {
    // app: "src",
  },

  // Public assets directory.
  publicDir: "public",

  // SVGR configuration.
  svgr: {
    componentName: "ReactComponent",  // use "default" for default exports
  },

  // Wrapper file configuration.
  wrapper: {
    path: "__reactpreview__/Wrapper.tsx",
    componentName: "Wrapper",
  },
};

// Wrapper.tsx

import "styles.css";
import React from "react";

export const Wrapper = React.Fragment;

React Preview version

v.0.7.1

System Info

VS Code

Used Package Manager

npm

Extension logs (useful for crashes)

No response

Preview logs (useful for rendering errors)

No response

Anything else?

No response

CSS compilation errors are overly intrusive and don't disappear when fixed

Currently as you're typing something new into your CSS, while the code is invalid a big red error banner appears at the top of the page. This banner then doesn't seem to disappear when the code becomes valid.

I don't think it really makes sense to have such an intrusive indication that your code is invalid when you're in the middle of typing something out. If it was more subtle, and didn't change the position of the page (maybe living in the console area) that would be one thing, but the way it is currently, it gets in the way of seeing how your CSS updates might have subtly changed the way your page is rendered.

The fact that it doesn't disappear once compilation is successful just seems like a bug.

Not working on mac

Describe the bug

I have copied your Greeting component to try the extension, nothing works...

Installed from your website on vscode.

Reproduction

Open a component using the preview button

React Preview version

v0.7.1

System Info

Macbook pro

Used Package Manager

yarn

Extension logs (useful for crashes)

No response

Preview logs (useful for rendering errors)

No response

Anything else?

No response

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Warning

These dependencies are deprecated:

Datasource	Name	Replacement PR?
npm	`@types/prettier`
npm	`vsce`

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

fix(deps): update playwright monorepo to ^1.46.0 (@playwright/test, playwright)

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

chore(deps): update dependency next to v14 [security]
chore(deps): update node.js to v20 (node, @types/node)
fix(deps): update dependency prettier to v3 (prettier, @types/prettier)
fix(deps): update dependency vue to v3

Detected dependencies

github-actions

.github/workflows/merge-gatekeeper.yml

upsidr/merge-gatekeeper v1@09af7a82c1666d0e64d2bd8c01797a0bcfd3bb5d

.github/workflows/release-cli.yaml

actions/checkout v4@692973e3d937129bcbf40652eb9f2f61becf3332

actions/setup-node v4@60edb5dd545a775178f52524783378180af0d1f8

actions/cache v4@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9

pnpm/action-setup v4.0.0@fe02b34f77f8bc703788d5817da081398fad5dd2

sergeysova/jq-action v2.3.0@a3f0d4ff59cc1dddf023fc0b325dd75b10deec58

.github/workflows/release-components.yaml

actions/checkout v4@692973e3d937129bcbf40652eb9f2f61becf3332

actions/setup-node v4@60edb5dd545a775178f52524783378180af0d1f8

actions/cache v4@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9

pnpm/action-setup v4.0.0@fe02b34f77f8bc703788d5817da081398fad5dd2

.github/workflows/release-intellij-plugin.yaml

actions/checkout v4@692973e3d937129bcbf40652eb9f2f61becf3332

actions/setup-node v4@60edb5dd545a775178f52524783378180af0d1f8

actions/cache v4@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9

pnpm/action-setup v4.0.0@fe02b34f77f8bc703788d5817da081398fad5dd2

actions/setup-java v4@99b8673ff64fbf99d8d325f52d9a5bdedb8483e9

actions/upload-artifact v4@65462800fd760344b1a7b4382951275a0abb4808

.github/workflows/release-vscode-extension.yaml

actions/checkout v4@692973e3d937129bcbf40652eb9f2f61becf3332

actions/setup-node v4@60edb5dd545a775178f52524783378180af0d1f8

actions/cache v4@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9

pnpm/action-setup v4.0.0@fe02b34f77f8bc703788d5817da081398fad5dd2

sergeysova/jq-action v2.3.0@a3f0d4ff59cc1dddf023fc0b325dd75b10deec58

.github/workflows/release-vscodium-extension.yaml

actions/checkout v4@692973e3d937129bcbf40652eb9f2f61becf3332

actions/setup-node v4@60edb5dd545a775178f52524783378180af0d1f8

actions/cache v4@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9

pnpm/action-setup v4.0.0@fe02b34f77f8bc703788d5817da081398fad5dd2

sergeysova/jq-action v2.3.0@a3f0d4ff59cc1dddf023fc0b325dd75b10deec58

.github/workflows/test-app-e2e.yaml

actions/checkout v4@692973e3d937129bcbf40652eb9f2f61becf3332

actions/setup-node v4@60edb5dd545a775178f52524783378180af0d1f8

actions/cache v4@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9

pnpm/action-setup v4.0.0@fe02b34f77f8bc703788d5817da081398fad5dd2

.github/workflows/test-cli.yaml

actions/checkout v4@692973e3d937129bcbf40652eb9f2f61becf3332

actions/setup-node v4@60edb5dd545a775178f52524783378180af0d1f8

actions/cache v4@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9

pnpm/action-setup v4.0.0@fe02b34f77f8bc703788d5817da081398fad5dd2

.github/workflows/test-core-components.yaml

actions/checkout v4@692973e3d937129bcbf40652eb9f2f61becf3332

actions/setup-node v4@60edb5dd545a775178f52524783378180af0d1f8

actions/cache v4@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9

pnpm/action-setup v4.0.0@fe02b34f77f8bc703788d5817da081398fad5dd2

.github/workflows/test-intellij.yaml

actions/checkout v4@692973e3d937129bcbf40652eb9f2f61becf3332

actions/setup-node v4@60edb5dd545a775178f52524783378180af0d1f8

actions/setup-java v4@99b8673ff64fbf99d8d325f52d9a5bdedb8483e9

actions/cache v4@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9

pnpm/action-setup v4.0.0@fe02b34f77f8bc703788d5817da081398fad5dd2

.github/workflows/test-vscode.yaml

actions/checkout v4@692973e3d937129bcbf40652eb9f2f61becf3332

actions/setup-node v4@60edb5dd545a775178f52524783378180af0d1f8

actions/cache v4@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9

pnpm/action-setup v4.0.0@fe02b34f77f8bc703788d5817da081398fad5dd2

gradle

integrations/intellij/gradle.properties

integrations/intellij/settings.gradle.kts

integrations/intellij/build.gradle.kts

org.jetbrains.kotlin.jvm 2.0.0

org.jetbrains.intellij 1.17.4

io.gitlab.arturbosch.detekt 1.23.6

org.jlleitschuh.gradle.ktlint 12.1.1

io.gitlab.arturbosch.detekt:detekt-formatting 1.23.6

com.squareup.moshi:moshi 1.15.1

com.squareup.moshi:moshi-kotlin 1.15.1

com.squareup.retrofit2:retrofit 2.11.0

com.squareup.retrofit2:converter-moshi 2.11.0

gradle-wrapper

integrations/intellij/gradle/wrapper/gradle-wrapper.properties

gradle 8.8

npm

analyzer/api/package.json

pino ^8.21.0

pino-pretty ^11.2.1

typescript ^5.5.2

unbuild ^2.0.0

analyzer/react/package.json

@previewjs/analyzer-api ^0.1.6

@vitejs/plugin-react ^4.3.1

typescript ^5.5.2

@types/prop-types ^15.7.12

@types/react ^18.3.3

@types/react-dom ^18.3.0

pino ^8.21.0

pino-pretty ^11.2.1

react ^18.3.1

rimraf ^5.0.7

shx ^0.3.4

unbuild ^2.0.0

vitest ^1.6.0

api/package.json

axios ^1.7.2

typescript ^5.5.2

unbuild ^2.0.0

app/package.json

express ^4.19.2

@types/express ^4.17.21

@types/fs-extra ^11.0.4

@types/node ^20.10.6

cross-env ^7.0.3

fs-extra ^11.2.0

typescript ^5.5.2

unbuild ^2.0.0

vite ^5.3.1

chromeless/package.json

express ^4.19.2

pino ^8.21.0

playwright ^1.43.1

typescript ^5.5.2

@types/express ^4.17.21

rimraf ^5.0.7

unbuild ^2.0.0

vite ^5.3.1

config-helpers/nextjs/package.json

@types/react ^18.3.3

next ^13.4.7

react ^18.3.1

typescript ^5.5.2

unbuild ^2.0.0

next *

react *

config/package.json

vite ^5.3.1

@types/node ^20.10.6

typescript ^5.5.2

unbuild ^2.0.0

core/package.json

@fwouts/vite-tsconfig-paths ^4.2.1

@previewjs/analyzer-api ^0.1.6

assert-never ^1.2.1

axios ^1.7.2

esbuild-plugin-polyfill-node ^0.3.0

exclusive-promises ^1.0.3

express ^4.19.2

fs-extra ^11.2.0

globby ^14.0.1

html-escaper ^3.0.3

http-terminator ^3.2.0

pino ^8.21.0

pino-pretty ^11.2.1

rollup-plugin-friendly-type-imports ^1.0.3

ts-node ^10.9.2

tsconfig-paths ^4.2.0

typescript ^5.5.2

vite ^5.3.1

zod ^3.23.8

@rollup/plugin-alias ^5.1.0

@types/express ^4.17.21

@types/fs-extra ^11.0.4

@types/html-escaper ^3.0.2

shx ^0.3.4

unbuild ^2.0.0

vitest ^1.6.0

daemon/package.json

@types/node ^20.10.6

exclusive-promises ^1.0.3

rimraf ^5.0.7

ts-node ^10.9.2

typescript ^5.5.2

unbuild ^2.0.0

dev-workspace/package.json

framework-plugins/preact/package.json

@previewjs/analyzer-api ^0.1.6

typescript ^5.5.2

@playwright/test ^1.43.1

pino ^8.21.0

pino-pretty ^11.2.1

preact ^10.22.0

rimraf ^5.0.7

unbuild ^2.0.0

vite ^5.3.1

vitest ^1.6.0

framework-plugins/react/package.json

@previewjs/analyzer-react ^0.1.8

@vitejs/plugin-react ^4.3.1

@playwright/test ^1.43.1

@types/react ^18.3.3

@types/react-dom ^18.3.0

pino ^8.21.0

pino-pretty ^11.2.1

react ^18.3.1

unbuild ^2.0.0

vite ^5.3.1

framework-plugins/solid/package.json

@previewjs/analyzer-api ^0.1.6

typescript ^5.5.2

vite-plugin-solid ^2.10.2

@playwright/test ^1.43.1

pino ^8.21.0

pino-pretty ^11.2.1

solid-js ^1.8.17

unbuild ^2.0.0

vite ^5.3.1

vitest ^1.6.0

framework-plugins/svelte/package.json

@previewjs/analyzer-api ^0.1.6

@sveltejs/vite-plugin-svelte ^3.1.1

fs-extra ^11.2.0

svelte ^4.2.18

typescript ^5.5.2

vite ^5.3.1

@playwright/test ^1.43.1

@sveltejs/kit ^2.5.17

@types/fs-extra ^11.0.4

pino ^8.21.0

pino-pretty ^11.2.1

unbuild ^2.0.0

vitest ^1.6.0

framework-plugins/vue2/package.json

@nuxt/config ^2.17.4

@previewjs/analyzer-api ^0.1.6

@vitejs/plugin-vue2 ^2.3.1

@vitejs/plugin-vue2-jsx ^1.1.1

fs-extra ^11.2.0

typescript ^5.5.2

vue ^2.7.16

vue-template-compiler ^2.7.16

@playwright/test ^1.43.1

@types/fs-extra ^11.0.4

pino ^8.21.0

pino-pretty ^11.2.1

rimraf ^5.0.7

shx ^0.3.4

unbuild ^2.0.0

vite ^5.3.1

vitest ^1.6.0

framework-plugins/vue3/package.json

@previewjs/analyzer-api ^0.1.6

@vitejs/plugin-vue ^5.0.5

@vitejs/plugin-vue-jsx ^4.0.0

@vue/compiler-sfc ^3.4.29

fs-extra ^11.2.0

typescript ^5.5.2

vue ^3.4.29

@playwright/test ^1.43.1

@types/fs-extra ^11.0.4

@vue/compiler-core ^3.4.29

@vue/reactivity ^3.4.29

@vue/runtime-core ^3.4.29

@vue/runtime-dom ^3.4.29

@vue/shared ^3.4.29

pino ^8.21.0

pino-pretty ^11.2.1

rimraf ^5.0.7

shx ^0.3.4

unbuild ^2.0.0

vite ^5.3.1

vitest ^1.6.0

iframe/package.json

assert-never ^1.2.1

immer ^10.1.1

typescript ^5.5.2

unbuild ^2.0.0

vite ^5.3.1

integrations/cli/package.json

@types/node ^20.10.6

chalk ^5.3.0

commander ^12.1.0

cross-env ^7.0.3

esbuild ^0.21.5

nodemon ^3.1.4

open ^10.1.0

rimraf ^5.0.7

ts-node ^10.9.2

typescript ^5.5.2

node >=18.20.3

integrations/intellij/daemon/package.json

esbuild ^0.21.5

rimraf ^5.0.7

typescript ^5.5.2

integrations/vscode/package.json

cross-env ^7.0.3

esbuild ^0.21.5

exclusive-promises ^1.0.3

execa ^8.0.1

get-port ^7.1.0

ovsx ^0.9.1

rimraf ^5.0.7

strip-ansi ^7.1.0

typescript ^5.5.2

vsce ^2.15.0

loader/package.json

@types/fs-extra ^11.0.4

assert-never ^1.2.1

exclusive-promises ^1.0.3

execa ^8.0.1

fs-extra ^11.2.0

pino ^8.21.0

pino-pretty ^11.2.1

pnpm ^8.15.8

rimraf ^5.0.7

typescript ^5.5.2

package.json

@types/inquirer ^9.0.7

@types/license-checker ^25.0.6

@types/node ^20.10.6

@typescript-eslint/eslint-plugin ^7.13.1

@typescript-eslint/parser ^7.13.1

assert-never ^1.2.1

depcheck ^1.4.7

eslint ^8.57.0

eslint-config-prettier ^9.1.0

execa ^8.0.1

inquirer ^9.2.23

license-checker ^25.0.1

prettier ^2.8.8

ts-node ^10.9.2

turbo ^2.0.4

typescript ^5.5.2

pnpm 8.15.8

properties/package.json

typescript ^5.5.2

unbuild ^2.0.0

vite ^5.3.1

vitest ^1.6.0

screenshot/package.json

@previewjs/analyzer-api ^0.1.6

globby ^14.0.1

playwright ^1.43.1

@types/node ^20.10.6

typescript ^5.5.2

unbuild ^2.0.0

node >=18.20.3

screenshot/test-app/package.json

react ^18.3.1

react-dom ^18.3.1

@types/react ^18.3.3

@types/react-dom ^18.3.0

@vitejs/plugin-react ^4.3.1

playwright ^1.43.1

typescript ^5.5.2

vite ^5.3.1

serializable-values/package.json

@faker-js/faker ^8.4.1

assert-never ^1.2.1

prettier ^2.8.8

typescript ^5.5.2

@types/prettier ^2.7.3

unbuild ^2.0.0

vite ^5.3.1

vitest ^1.6.0

storybook-helpers/package.json

@previewjs/analyzer-api ^0.1.6

typescript ^5.5.2

unbuild ^2.0.0

vite ^5.3.1

vitest ^1.6.0

testing/package.json

@playwright/test ^1.43.1

assert-never ^1.2.1

fs-extra ^11.2.0

get-port ^7.1.0

@types/fs-extra ^11.0.4

rimraf ^5.0.7

typescript ^5.5.2

unbuild ^2.0.0

type-analyzer/package.json

assert-never ^1.2.1

globby ^14.0.1

prettier ^2.8.8

typescript ^5.5.2

@types/lodash ^4.17.5

@types/prettier ^2.7.3

lodash ^4.17.21

unbuild ^2.0.0

vite ^5.3.1

vitest ^1.6.0

vfs/package.json

assert-never ^1.2.1

chokidar ^3.6.0

fs-extra ^11.2.0

@types/fs-extra ^11.0.4

typescript ^5.5.2

unbuild ^2.0.0

vite ^5.3.1

vitest ^1.6.0

Check this box to trigger a request for Renovate to run again on this repository

Styled components with theming

Describe the bug

using latest nextjs project.
I have covered my app in ThemeProvider to use global colors and I got an error about theming.

Error: Cannot read property 'container' of undefined
TypeError: Cannot read property 'container' of undefined

code example

const Container = styled.header`
  height: 101px;
  background-color: ${({ theme }) => theme.colors.container};
  filter: drop-shadow(3px 3px 35px rgba(45, 73, 226, 0.071));
  padding: 10px;
`;

Types declared in styled.d.ts

Also react preview doesnt see my style.css file for common styles.

Reproduction

Unfortunately it is not in github, it is like a simple playground project for myself. I just created nextjs app with typescript template and styled some component with styled components.

React Preview version

0.7.0

System Info

System:
    OS: macOS 11.2.3
    CPU: (8) x64 Apple M1
    Memory: 37.14 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.18.0 - /usr/local/bin/node
    Yarn: 1.22.15 - /usr/local/bin/yarn
    npm: 6.14.15 - /usr/local/bin/npm
  IDEs:
    Nano: 2.0.6 - /usr/bin/nano
    Vim: 8.2 - /usr/bin/vim
    WebStorm: 2021.2.2
    Xcode: /undefined - /usr/bin/xcodebuild
  Browsers:
    Chrome: 94.0.4606.71
    Safari: 14.0.3

Used Package Manager

yarn

React Preview control-plane.log (useful for crashes)

No response

Preview logs (useful for rendering errors)

No response

Anything else?

No response

SVGR imports don't work

Heya François! Thanks for the beta invite 😃

SyntaxError: The requested module '/preview/src/images/enter.svg?import' does not provide an export named 'ReactComponent'

I am using vite-plugin-svgr to import svg images as react components like import { ReactComponent as EnterIcon } from "../images/enter.svg"

Unsure if this is also an issue in create-react-app which uses SVGR by default under the hood.

"React Preview" Output had to be opened before I saw the "View in React Preview"

I didn't see the feature until I selected React Preview output pane. Then it said "Bootstrapped sucessfully" and then I could preview

Aliased imports by use of `baseUrl` are not resolved

Example:
tsconfig.json has "baseUrl": "src"

import logger from 'utils/logger';

should resolve to ./src/utils/logger

Too broad error message leaves little room for troubleshooting

Describe the bug

I'm the following error when my component uses some complex context in my project:

TypeError: Failed to fetch dynamically imported module: http://localhost:3140/preview/components/XXX/snackbars/Hey.tsx

Is there any chance to supply more details about the error, in order to make the troubleshooting process easier? The logs in React Preview's Output panel in VSCode show nothing helpful for this.

Reproduction

This produced the above error most of the time, but for a short while the specific error was produced somehow. Still worth a try:

Create a component to preview:

import React from 'react';
import Module2 from './Module2';

const Component = () => {
    const x = Module2;

    return <div>{x}</div>;
};

Create a second module with an error:

throw new Error('some specific error');
export default 5;

Try to preview Component

React Preview version

0.7.1

System Info

I'll add it if you think it's relevant to this specific problem

Used Package Manager

yarn

Extension logs (useful for crashes)

No response

Preview logs (useful for rendering errors)

No response

Anything else?

No response

Rename project to Component Preview

If you think adding support for different components other than React would be feasible in the future, a more generic name would be more suitable.

Preview indefinite loading

Describe the bug

I think the problem is with my computer and not the project. I recently installed the tool on my pc and I just created a new react project with the command :
npx create-react-app portfolio-react --template typescript

When I try to preview the app.tsx file or any other file, I get an infinite change. And when I try to display it in a browser (Edge), it returns the following error:
Failed to load resource: the server responded with a status of 404 (Not Found)

And went I will reload :
GET http://localhost:3120/preview/@vite/client net::ERR_ABORTED 404 (Not Found)

Reproduction

run npx create-react-app portfolio-react --template typescript
Install React Preview (beta)
And that all
portfolio-react.zip

System Info

System:
    OS: Windows 10 10.0.19042
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 21.82 GB / 31.81 GB
  IDEs:
    VSCode: 1.58.2 - C:\Users\willi\AppData\Local\Programs\Microsoft VS Code\bin\code.CMD
    Visual Studio: 16.9.31112.23 (Visual Studio Community�2019)
  Browsers:
    Edge: Spartan (44.19041.1023.0), Chromium (91.0.864.67)
    Internet Explorer: 11.0.19041.1

Used Package Manager

npm

Extension logs (useful for crashes)

[2021-07-16 14:52:31.638] [exthost] [info] extension host started
[2021-07-16 14:52:31.639] [exthost] [info] Skipping acquiring lock for c:\Users\willi\AppData\Roaming\Code\User\workspaceStorage\5811598c8c8e89aa9d787c601fdf240b.
[2021-07-16 14:52:31.764] [exthost] [info] ExtensionService#_doActivateExtension vscode.microsoft-authentication {"startup":false,"extensionId":{"value":"vscode.microsoft-authentication","_lower":"vscode.microsoft-authentication"},"activationEvent":"onAuthenticationRequest:microsoft"}
[2021-07-16 14:52:31.764] [exthost] [info] ExtensionService#loadCommonJSModule file:///c:/Users/willi/AppData/Local/Programs/Microsoft VS Code/resources/app/extensions/microsoft-authentication/dist/extension.js
[2021-07-16 14:52:31.778] [exthost] [info] ExtensionService#_doActivateExtension vscode.typescript-language-features {"startup":false,"extensionId":{"value":"vscode.typescript-language-features","_lower":"vscode.typescript-language-features"},"activationEvent":"onLanguage:typescriptreact"}
[2021-07-16 14:52:31.778] [exthost] [info] ExtensionService#loadCommonJSModule file:///c:/Users/willi/AppData/Local/Programs/Microsoft VS Code/resources/app/extensions/typescript-language-features/dist/extension
[2021-07-16 14:52:31.796] [exthost] [info] ExtensionService#_doActivateExtension zenclabs.reactpreview {"startup":false,"extensionId":{"value":"zenclabs.reactpreview","_lower":"zenclabs.reactpreview"},"activationEvent":"onLanguage:typescriptreact"}
[2021-07-16 14:52:31.796] [exthost] [info] ExtensionService#loadCommonJSModule file:///c:/Users/willi/.vscode/extensions/zenclabs.reactpreview-0.3.0/dist/client/bundle
[2021-07-16 14:52:31.807] [exthost] [info] ExtensionService#_doActivateExtension vscode.debug-auto-launch {"startup":true,"extensionId":{"value":"vscode.debug-auto-launch","_lower":"vscode.debug-auto-launch"},"activationEvent":"*"}
[2021-07-16 14:52:31.807] [exthost] [info] ExtensionService#loadCommonJSModule file:///c:/Users/willi/AppData/Local/Programs/Microsoft VS Code/resources/app/extensions/debug-auto-launch/dist/extension
[2021-07-16 14:52:31.813] [exthost] [info] ExtensionService#_doActivateExtension vscode.git {"startup":true,"extensionId":{"value":"vscode.github","_lower":"vscode.github"},"activationEvent":"*"}
[2021-07-16 14:52:31.813] [exthost] [info] ExtensionService#loadCommonJSModule file:///c:/Users/willi/AppData/Local/Programs/Microsoft VS Code/resources/app/extensions/git/dist/main
[2021-07-16 14:52:31.832] [exthost] [info] ExtensionService#_doActivateExtension vscode.npm {"startup":true,"extensionId":{"value":"vscode.npm","_lower":"vscode.npm"},"activationEvent":"workspaceContains:package.json"}
[2021-07-16 14:52:31.833] [exthost] [info] ExtensionService#loadCommonJSModule file:///c:/Users/willi/AppData/Local/Programs/Microsoft VS Code/resources/app/extensions/npm/dist/npmMain
[2021-07-16 14:52:32.327] [exthost] [info] ExtensionService#_doActivateExtension vscode.github {"startup":true,"extensionId":{"value":"vscode.github","_lower":"vscode.github"},"activationEvent":"*"}
[2021-07-16 14:52:32.327] [exthost] [info] ExtensionService#loadCommonJSModule file:///c:/Users/willi/AppData/Local/Programs/Microsoft VS Code/resources/app/extensions/github/dist/extension.js
[2021-07-16 14:52:32.459] [exthost] [info] ExtensionService#_doActivateExtension ms-vscode.js-debug {"startup":false,"extensionId":{"value":"ms-vscode.js-debug","_lower":"ms-vscode.js-debug"},"activationEvent":"onCommand:extension.js-debug.clearAutoAttachVariables"}
[2021-07-16 14:52:32.460] [exthost] [info] ExtensionService#loadCommonJSModule file:///c:/Users/willi/AppData/Local/Programs/Microsoft VS Code/resources/app/extensions/ms-vscode.js-debug/src/extension.js
[2021-07-16 14:52:32.634] [exthost] [info] ExtensionService#_doActivateExtension vscode.github-authentication {"startup":false,"extensionId":{"value":"vscode.github-authentication","_lower":"vscode.github-authentication"},"activationEvent":"onAuthenticationRequest:github"}
[2021-07-16 14:52:32.635] [exthost] [info] ExtensionService#loadCommonJSModule file:///c:/Users/willi/AppData/Local/Programs/Microsoft VS Code/resources/app/extensions/github-authentication/dist/extension.js
[2021-07-16 14:52:32.663] [exthost] [info] eager extensions activated
[2021-07-16 14:52:32.677] [exthost] [info] ExtensionService#_doActivateExtension vscode.emmet {"startup":false,"extensionId":{"value":"vscode.emmet","_lower":"vscode.emmet"},"activationEvent":"onStartupFinished"}
[2021-07-16 14:52:32.678] [exthost] [info] ExtensionService#loadCommonJSModule file:///c:/Users/willi/AppData/Local/Programs/Microsoft VS Code/resources/app/extensions/emmet/dist/node/emmetNodeMain
[2021-07-16 14:52:32.691] [exthost] [info] ExtensionService#_doActivateExtension vscode.merge-conflict {"startup":false,"extensionId":{"value":"vscode.merge-conflict","_lower":"vscode.merge-conflict"},"activationEvent":"onStartupFinished"}
[2021-07-16 14:52:32.691] [exthost] [info] ExtensionService#loadCommonJSModule file:///c:/Users/willi/AppData/Local/Programs/Microsoft VS Code/resources/app/extensions/merge-conflict/dist/mergeConflictMain
[2021-07-16 14:52:32.699] [exthost] [info] ExtensionService#_doActivateExtension ms-vscode-remote.remote-wsl-recommender {"startup":false,"extensionId":{"value":"ms-vscode-remote.remote-wsl-recommender","_lower":"ms-vscode-remote.remote-wsl-recommender"},"activationEvent":"onStartupFinished"}
[2021-07-16 14:52:32.699] [exthost] [info] ExtensionService#loadCommonJSModule file:///c:/Users/willi/AppData/Local/Programs/Microsoft VS Code/resources/app/extensions/ms-vscode-remote.remote-wsl-recommender/dist/extension.js
[2021-07-16 14:52:32.711] [exthost] [info] ExtensionService#_doActivateExtension vscode.testing-editor-contributions {"startup":false,"extensionId":{"value":"vscode.testing-editor-contributions","_lower":"vscode.testing-editor-contributions"},"activationEvent":"onStartupFinished"}
[2021-07-16 14:52:32.711] [exthost] [info] ExtensionService#loadCommonJSModule file:///c:/Users/willi/AppData/Local/Programs/Microsoft VS Code/resources/app/extensions/testing-editor-contributions/dist/extension.js
[2021-07-16 14:52:32.715] [exthost] [info] ExtensionService#_doActivateExtension esbenp.prettier-vscode {"startup":false,"extensionId":{"value":"esbenp.prettier-vscode","_lower":"esbenp.prettier-vscode"},"activationEvent":"onStartupFinished"}
[2021-07-16 14:52:32.715] [exthost] [info] ExtensionService#loadCommonJSModule file:///c:/Users/willi/.vscode/extensions/esbenp.prettier-vscode-8.0.1/dist/extension
[2021-07-16 14:52:32.783] [exthost] [info] ExtensionService#_doActivateExtension ms-vscode-remote.remote-wsl {"startup":false,"extensionId":{"value":"ms-vscode-remote.remote-wsl","_lower":"ms-vscode-remote.remote-wsl"},"activationEvent":"onStartupFinished"}
[2021-07-16 14:52:32.784] [exthost] [info] ExtensionService#loadCommonJSModule file:///c:/Users/willi/.vscode/extensions/ms-vscode-remote.remote-wsl-0.58.2/dist/extension
[2021-07-16 14:52:34.943] [exthost] [info] ExtensionService#_doActivateExtension vscode.configuration-editing {"startup":false,"extensionId":{"value":"vscode.configuration-editing","_lower":"vscode.configuration-editing"},"activationEvent":"onLanguage:jsonc"}
[2021-07-16 14:52:34.944] [exthost] [info] ExtensionService#loadCommonJSModule file:///c:/Users/willi/AppData/Local/Programs/Microsoft VS Code/resources/app/extensions/configuration-editing/dist/configurationEditingMain
[2021-07-16 14:52:34.951] [exthost] [info] ExtensionService#_doActivateExtension vscode.json-language-features {"startup":false,"extensionId":{"value":"vscode.json-language-features","_lower":"vscode.json-language-features"},"activationEvent":"onLanguage:jsonc"}
[2021-07-16 14:52:34.951] [exthost] [info] ExtensionService#loadCommonJSModule file:///c:/Users/willi/AppData/Local/Programs/Microsoft VS Code/resources/app/extensions/json-language-features/client/dist/node/jsonClientMain
[2021-07-16 15:06:29.238] [exthost] [info] ExtensionService#_doActivateExtension vscode.extension-editing {"startup":false,"extensionId":{"value":"vscode.extension-editing","_lower":"vscode.extension-editing"},"activationEvent":"onLanguage:typescript"}
[2021-07-16 15:06:29.241] [exthost] [info] ExtensionService#loadCommonJSModule file:///c:/Users/willi/AppData/Local/Programs/Microsoft VS Code/resources/app/extensions/extension-editing/dist/extensionEditingMain
[2021-07-16 15:19:02.989] [exthost] [info] ExtensionService#_doActivateExtension eg2.vscode-npm-script {"startup":false,"extensionId":{"value":"eg2.vscode-npm-script","_lower":"eg2.vscode-npm-script"},"activationEvent":"onLanguage:json"}
[2021-07-16 15:19:02.992] [exthost] [info] ExtensionService#loadCommonJSModule file:///c:/Users/willi/.vscode/extensions/eg2.vscode-npm-script-0.3.22/dist/extension

Preview logs (useful for rendering errors)

`Failed to load resource: the server responded with a status of 404 (Not Found)`

And went I will reload :
`GET http://localhost:3120/preview/@vite/client net::ERR_ABORTED 404 (Not Found)`

Anything else?

React not defined

I intermittently get this error. It seems to be non-deterministic since the good ol' trick of restarting VSCode seems to fix this issue.

ReferenceError: React is not defined at Loading (http://localhost:54018/preview/@id/__x00__virtual:/Users/conwayying/stultus-studios/sydney-social-sport/__reactpreview_internal__/Loading.tsx:1:1008) at renderWithHooks (http://localhost:54018/preview/node_modules/.vite/chunk-WFCGXZQ5.js?v=01b3bec3:11067:26) at mountIndeterminateComponent (http://localhost:54018/preview/node_modules/.vite/chunk-WFCGXZQ5.js?v=01b3bec3:13187:21) at beginWork (http://localhost:54018/preview/node_modules/.vite/chunk-WFCGXZQ5.js?v=01b3bec3:13974:22) at HTMLUnknownElement.callCallback2 (http://localhost:54018/preview/node_modules/.vite/chunk-WFCGXZQ5.js?v=01b3bec3:3677:22) at Object.invokeGuardedCallbackDev (http://localhost:54018/preview/node_modules/.vite/chunk-WFCGXZQ5.js?v=01b3bec3:3702:24) at invokeGuardedCallback (http://localhost:54018/preview/node_modules/.vite/chunk-WFCGXZQ5.js?v=01b3bec3:3736:39) at beginWork$1 (http://localhost:54018/preview/node_modules/.vite/chunk-WFCGXZQ5.js?v=01b3bec3:17083:15) at performUnitOfWork (http://localhost:54018/preview/node_modules/.vite/chunk-WFCGXZQ5.js?v=01b3bec3:16311:20) at workLoopSync (http://localhost:54018/preview/node_modules/.vite/chunk-WFCGXZQ5.js?v=01b3bec3:16265:13)

Currently using the extension like this:

const Preview = async () => {
  const mockData = {
    richText: "<p>Hello Friendly World! 🌎️</p>",
    graphicUrl: "./public/venues_sbhs.jpg"
  }
  return (
    <Card {...mockData} />
  );
};

tsconfig.json baseUrl not correctly supported

Hi,

The extension looks great, but it seems to have a problem with not recognizing baseUrl in tsconfig.json.

I have all my sources in a src folder and the following line in my tsonfig.json:
"baseUrl": "src",

This forces me to put the reactpreview folder into the root folder.

I use Tailwind and my wrapper file looks like this:

import '../src/css/index.css';

import React from 'react';

export const Wrapper = React.Fragment;

The component I want to preview looks like this (somewhere in the src folder):

import React from 'react';

type Props = { label?: string; unit?: string };

const Label = ({ label = '', unit = '' }: Props): JSX.Element => {
  return (
    <label
      data-testid="label-text"
      className="truncate bg-red-500 outline-none pointer-events-none">
      <span className="text-xs ">{label}</span>
      {unit && <span className="text-xs">{` (${unit})`}</span>}
    </label>
  );
};

export default Label;

Somehow React Preview Server still has problems loading the src/css/index.css file, the extension output looks like this:

React Preview Server running at http://localhost:3120.
Unable to load d:/proj/AtlasCopco/EnsoUi/src/css/index.css

There definitely is a index.css file at this path :)

Strangely, if a put a copy of my index.css in a css folder in the root (not in src anymore), the preview works,

Extension doesn't load when language mode isn't set correctly

I am able to install the extension but I am not able to get it to load in my .jsx files. It just doesn't show up.

To reproduce, I'm not sure. I just installed it, opened a few projects and it won't recognise the files.

PostCSS @apply (for tailwindCSS classes) doesn't work

I'm guessing postCSS isn't being run. Is there a chance support for this could be added? Or are there any workarounds?

The bug bash

A series of bugs, errors and features that need to be implemented all written in one issue.

Bug 1: CSS doesn't load

~~CSS isn't loading for my Home component defined here~~

Was just missing configuration, create a __reactpreview__/Wrapper.tsx, add the following code:

import React from 'react';
import '../src/styles/globals.css';

export const Wrapper = React.Fragment;

Bug 2: Routing doesn't work

pJEdJr17.mp4

Bug 3: Next support is lacking

Support for NextJS is a bit lacking. Would be better if there was a way to preview a whole Next app.

Bug 4: Open Preview text doesn't move with code moving

~~The text saying Open Home in React Preview doesn't move when I move the code.~~

Visual Studio Code Remote support

Is your feature request related to a problem? Please describe.
It is related to a issue I noticed. If you use it with a remote ssh server, the preview still tries to connect to your localhost, which results with a blank page(since the port isn't accessible on your localhost, but yes the remote server localhost).

Describe the solution you'd like
I noticed that forwarding the port 3140 through VS Code's Built-in Port Forwarder does indeed solve the issue and I'm able to use it with no issues. Maybe it could setup this port forward automatically?

Describe alternatives you've considered
One alternative would be to use the host IP address(yet some people use theses servers outside of intranet and opening a port like this could be a security risk. Port forward sounds more secure than normal open port

Additional context
I only used Remote development through SSH with the React Preview. Haven't tested with containers, I believe it could end up on the same thought

Cannot inspect object properties in console

I am building a drawing component with canvas and i was attempting to log mouse positions stored in an array, it would be great if we could inspect the properties in those objects, also I have to manually import the root css file to make tailwindcss work in the component.

Fish shell support

Describe the bug

Recieved this error message in the event log.

2021/10/07
10:39	React Preview failed to install dependencies.
			Please report this issue at https://github.com/zenclabs/reactpreview/issues
			
			java.lang.Error: Please install 'brew' first!
			TERM environment variable not set.
			TERM environment variable not set.
			fish: Unknown command: il
			fish: 
			il
			^
			at com.reactpreview.intellij.plugin.services.ReactPreviewSharedService.install(ReactPreviewSharedService.kt:138)
			at com.reactpreview.intellij.plugin.services.ReactPreviewSharedService.access$install(ReactPreviewSharedService.kt:25)
			at com.reactpreview.intellij.plugin.services.ReactPreviewSharedService$actor$1.invokeSuspend(ReactPreviewSharedService.kt:56)
			at kotlin.coroutines.jvm.internal.BaseContinuationImpl.resumeWith(ContinuationImpl.kt:33)
			at kotlinx.coroutines.DispatchedTask.run(DispatchedTask.kt:106)
			at kotlinx.coroutines.scheduling.CoroutineScheduler.runSafely(CoroutineScheduler.kt:571)
			at kotlinx.coroutines.scheduling.CoroutineScheduler$Worker.executeTask(CoroutineScheduler.kt:750)
			at kotlinx.coroutines.scheduling.CoroutineScheduler$Worker.runWorker(CoroutineScheduler.kt:678)
			at kotlinx.coroutines.scheduling.Coroutin... (show balloon)

Reproduction

I assume this has to do with my usage of fishshell so the install script cannot find homebrew, I have homebrew correctly installed and use it regularly.

React Preview version

0.7.0

System Info

System:
    OS: macOS 11.6
    CPU: (8) arm64 Apple M1
    Memory: 73.63 MB / 16.00 GB
    Shell: 3.3.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 16.4.2 - ~/.asdf/installs/nodejs/16.4.2/bin/node
    npm: 7.21.0 - ~/Development/settings-frontend/node_modules/.bin/npm
  IDEs:
    Nano: 2.0.6 - /usr/bin/nano
    Vim: 8.2 - /usr/bin/vim
    Xcode: 13.0/13A233 - /usr/bin/xcodebuild
  Browsers:
    Chrome: 94.0.4606.71
    Firefox: 91.0.2
    Safari: 15.0

Used Package Manager

npm

React Preview control-plane.log (useful for crashes)

No response

Preview logs (useful for rendering errors)

No response

Anything else?

I think this can probably be fixed by telling the install script to use /bin/sh or similar rather than using whatever the user has installed on their system as a default shell.

Add a key command for "Show React Preview for current component"

I may not always have the preview open for the component I'm working on.

I think it makes sense to have a key command available that opens the preview for the current component that you are editing the body of. That way I can be editing a component and not have to grab the mouse to preview it.

Any love for the "css" prop in styled components?

Styled components appear to work great apart from this one small aspect. I have a couple large projects that make great use of this property, so a lot of my components styles just aren't showing up.

My understanding is that the styled-components babel plugin automatically converts elements like so:

<div css={`background: red`} />

Into this:

const StyledComponent = styled.div`background: red;`
// ...
<StyledComponent />

I'm not that familiar with Vite's plugin architecture or how you're currently integrating with styled components. I've tried a few hacky solutions myself, writing my own transform on the raw TS code, but maybe using the official integration is more straightforward than I think?

Simply attempting to use the example above with the div should give you a simple enough reproduction.

Here's their docs on the prop https://styled-components.com/docs/api#css-prop

ReactNative indefinite loading

From this comment
https://www.reddit.com/r/reactjs/comments/o70663/react_preview_for_visual_studio_code/h2yhvcg

[vite] connecting...
[vite] connected.
Wrapper.tsx:1 -> Uncaught SyntaxError: The requested module '/preview/node_modules/react/index.js?t=1624593115326' does not provide an export named 'default'
editor.main.js:2 -> Uncaught (in promise) Error: Could not find source file: 'inmemory://model/1'.
    at y (:3120/vs/language/typescript/tsWorker.js:3)
    at Object.getSyntacticDiagnostics (:3120/vs/language/typescript/tsWorker.js:3)
    at eval (:3120/vs/language/typescript/tsWorker.js:3)
    at eval (:3120/vs/language/typescript/tsWorker.js:3)
    at Object.eval [as next] (:3120/vs/language/typescript/tsWorker.js:3)
    at eval (:3120/vs/language/typescript/tsWorker.js:3)
    at new Promise (<anonymous>)
    at __awaiter (:3120/vs/language/typescript/tsWorker.js:3)
    at e.getSyntacticDiagnostics (:3120/vs/language/typescript/tsWorker.js:3)
    at _.fmr (workerMain.js:2)

package.json

"react": "17.0.2",
"react-native": "0.64.1",
"typescript": "^4.2.4",

I apologize if React Native isn't support at the moment, so feel free to close it. But will help out in any way that I can :)

Edit: A little bit of context so you can try it

export default function RetrySection() {
	return (
		<View style={styles.container}></View>
	);
}

interface Style {
	container: ViewStyle;
}

const styles = StyleSheet.create<Style>({
  container: {
	  height: 112,
	  width: 335,
	  borderStyle: "dashed",
	  borderColor: "rgb(249, 203, 119)",
	  alignItems: "center",
	  borderWidth: 1,
  },
});

Infinite Loading When Opening Extension

Describe the bug

When I upgraded to 0.6.0 and open a component, I get the 3 dots pulsing indefinitely. Restarting VSCode doesn't seem to reliably solve the infinite loading issue (It worked once, but didn't work the other several times I tried). This issue seems to happen across multiple of my .tsx components, ranging from relatively simple to more complex.

Reproduction

Create a simple test component
Use either the blue button or the text above a component to open React Preview
Bug should happen upon load

React Preview version

v0.6.0

System Info

System:
    OS: macOS 11.5.2
    CPU: (8) x64 Intel(R) Core(TM) i7-4850HQ CPU @ 2.30GHz
    Memory: 123.39 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 15.0.1 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.0.3 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  IDEs:
    Nano: 2.0.6 - /usr/bin/nano
    VSCode: 1.60.1 - /usr/local/bin/code
    Vim: 8.2 - /usr/bin/vim
    Xcode: /undefined - /usr/bin/xcodebuild
  Browsers:
    Chrome: 93.0.4577.82
    Safari: 14.1.2

Used Package Manager

yarn

Extension logs (useful for crashes)

Bootstrapped successfully.
React Preview Server running at http://localhost:3140.
6:40:12 PM [vite] new dependencies found: react, react-dom, updating...
6:40:13 PM [vite] ✨ dependencies updated, reloading page...
6:40:14 PM [vite] new dependencies found: @material-ui/core/Paper, @material-ui/core, framer-motion, @mui/icons-material/Person, updating...
 > node_modules/@mui/icons-material/utils/createSvgIcon.js:13:21: error: Could not resolve "@mui/material/utils" (mark it as external to exclude it from the bundle, or surround it with try/catch to handle the failure at run-time)
    13 │ var _utils = require("@mui/material/utils");
       ╵                      ~~~~~~~~~~~~~~~~~~~~~

6:40:17 PM [vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/@mui/icons-material/utils/createSvgIcon.js:13:21: error: Could not resolve "@mui/material/utils" (mark it as external to exclude it from the bundle, or surround it with try/catch to handle the failure at run-time)
    at failureErrorWithLog (/Users/conwayying/.vscode/extensions/zenclabs.reactpreview-0.6.0/dist/server/node_modules/esbuild/lib/main.js:1478:15)
    at /Users/conwayying/.vscode/extensions/zenclabs.reactpreview-0.6.0/dist/server/node_modules/esbuild/lib/main.js:1136:28
    at runOnEndCallbacks (/Users/conwayying/.vscode/extensions/zenclabs.reactpreview-0.6.0/dist/server/node_modules/esbuild/lib/main.js:926:63)
    at buildResponseToResult (/Users/conwayying/.vscode/extensions/zenclabs.reactpreview-0.6.0/dist/server/node_modules/esbuild/lib/main.js:1134:7)
    at /Users/conwayying/.vscode/extensions/zenclabs.reactpreview-0.6.0/dist/server/node_modules/esbuild/lib/main.js:1243:14
    at /Users/conwayying/.vscode/extensions/zenclabs.reactpreview-0.6.0/dist/server/node_modules/esbuild/lib/main.js:614:9
    at handleIncomingPacket (/Users/conwayying/.vscode/extensions/zenclabs.reactpreview-0.6.0/dist/server/node_modules/esbuild/lib/main.js:711:9)
    at Socket.readFromStdout (/Users/conwayying/.vscode/extensions/zenclabs.reactpreview-0.6.0/dist/server/node_modules/esbuild/lib/main.js:581:7)
    at Socket.emit (events.js:315:20)
    at Socket.EventEmitter.emit (domain.js:467:12)
React Preview Server stopped.
React Preview Server running at http://localhost:3140.
10:36:27 AM [vite] new dependencies found: react, react-dom, updating...
10:36:27 AM [vite] ✨ dependencies updated, reloading page...
10:36:29 AM [vite] new dependencies found: @material-ui/core/Paper, @material-ui/core, framer-motion, @mui/icons-material/Person, updating...
 > node_modules/@mui/icons-material/utils/createSvgIcon.js:13:21: error: Could not resolve "@mui/material/utils" (mark it as external to exclude it from the bundle, or surround it with try/catch to handle the failure at run-time)
    13 │ var _utils = require("@mui/material/utils");
       ╵                      ~~~~~~~~~~~~~~~~~~~~~

10:36:29 AM [vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/@mui/icons-material/utils/createSvgIcon.js:13:21: error: Could not resolve "@mui/material/utils" (mark it as external to exclude it from the bundle, or surround it with try/catch to handle the failure at run-time)
    at failureErrorWithLog (/Users/conwayying/.vscode/extensions/zenclabs.reactpreview-0.6.0/dist/server/node_modules/esbuild/lib/main.js:1478:15)
    at /Users/conwayying/.vscode/extensions/zenclabs.reactpreview-0.6.0/dist/server/node_modules/esbuild/lib/main.js:1136:28
    at runOnEndCallbacks (/Users/conwayying/.vscode/extensions/zenclabs.reactpreview-0.6.0/dist/server/node_modules/esbuild/lib/main.js:926:63)
    at buildResponseToResult (/Users/conwayying/.vscode/extensions/zenclabs.reactpreview-0.6.0/dist/server/node_modules/esbuild/lib/main.js:1134:7)
    at /Users/conwayying/.vscode/extensions/zenclabs.reactpreview-0.6.0/dist/server/node_modules/esbuild/lib/main.js:1243:14
    at /Users/conwayying/.vscode/extensions/zenclabs.reactpreview-0.6.0/dist/server/node_modules/esbuild/lib/main.js:614:9
    at handleIncomingPacket (/Users/conwayying/.vscode/extensions/zenclabs.reactpreview-0.6.0/dist/server/node_modules/esbuild/lib/main.js:711:9)
    at Socket.readFromStdout (/Users/conwayying/.vscode/extensions/zenclabs.reactpreview-0.6.0/dist/server/node_modules/esbuild/lib/main.js:581:7)
    at Socket.emit (events.js:315:20)
    at Socket.EventEmitter.emit (domain.js:467:12)
10:39:03 AM [vite] hmr update /render.jsx?p=src%2Fcomponents%2FCard.tsx&c=DetailCard&d=JTdCJTdE&s=JTNDRGV0YWlsQ2FyZCUyMCUyRiUzRQ==&i=1
10:39:34 AM [vite] hmr update /render.jsx?p=src%2Fcomponents%2FCard.tsx&c=DetailCard&d=JTdCJTdE&s=JTNDRGV0YWlsQ2FyZCUyMCUyRiUzRQ==&i=1 (x2)
10:39:34 AM [vite] hmr update /render.jsx?p=src%2Fcomponents%2FCard.tsx&c=DetailCard&d=JTdCJTdE&s=JTNDRGV0YWlsQ2FyZCUyMCUyRiUzRQ==&i=1 (x3)

Preview logs (useful for rendering errors)

[Log] [vite] connecting... (preview, line 31)
[Log] [vite] connected. (preview, line 31)
[Error] SyntaxError: Importing binding name 'default' cannot be resolved by star export entries.
	link
	linkAndEvaluateModule

Anything else?

No response

Copy-paste from VS Code webview does not work

See bug report in #6 (comment)

This is likely due to the usage of nested iframes and should be solvable with the approach recommended in microsoft/vscode#65452 (comment).

"export default" component is not detected

Describe the bug

When a component is defined the following way, it is not detected as a component:

Reproduction

Create a new file with the following content:

import React from 'react';

export default () => <div>Hello World</div>

Try to preview it

React Preview version

0.7.1

System Info

Irrelevant?

Used Package Manager

yarn

Extension logs (useful for crashes)

No response

Preview logs (useful for rendering errors)

No response

Anything else?

No response

Transform failed

Describe the bug

When I edit an in line css style, this error pops up. It's solved by closing the preview window and reopening it.

Reproduction

Paste this code into a new VSCode file Text.tsx

const Test = () => { return <div style={{width: 30}}> Testing </div> }
2. Open the component in VSCode.
3. Position the cursor after the "30".
4. Backspace the "30" and replace with "20".
5. Error should pop up

System Info

System:
    OS: macOS 11.4
    CPU: (8) x64 Intel(R) Core(TM) i7-4850HQ CPU @ 2.30GHz
    Memory: 1.40 GB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 15.0.1 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.0.3 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  IDEs:
    Android Studio: 3.4 AI-183.6156.11.34.5692245
    Nano: 2.0.6 - /usr/bin/nano
    VSCode: 1.58.2 - /usr/local/bin/code
    Vim: 8.2 - /usr/bin/vim
    Xcode: /undefined - /usr/bin/xcodebuild
  Browsers:
    Chrome: 93.0.4577.63
    Safari: 14.1.1

Used Package Manager

yarn

Extension logs (useful for crashes)

7:44:40 PM [vite] Internal server error: Transform failed with 1 error:
src/view/Portal.tsx:2:9: error: Expected identifier but found ","
      at failureErrorWithLog (/Users/conwayying/.vscode/extensions/zenclabs.reactpreview-0.4.2/dist/server/node_modules/esbuild/lib/main.js:1451:15)
      at /Users/conwayying/.vscode/extensions/zenclabs.reactpreview-0.4.2/dist/server/node_modules/esbuild/lib/main.js:1262:29
      at /Users/conwayying/.vscode/extensions/zenclabs.reactpreview-0.4.2/dist/server/node_modules/esbuild/lib/main.js:609:9
      at handleIncomingPacket (/Users/conwayying/.vscode/extensions/zenclabs.reactpreview-0.4.2/dist/server/node_modules/esbuild/lib/main.js:706:9)
      at Socket.readFromStdout (/Users/conwayying/.vscode/extensions/zenclabs.reactpreview-0.4.2/dist/server/node_modules/esbuild/lib/main.js:576:7)
      at Socket.emit (events.js:315:20)
      at Socket.EventEmitter.emit (domain.js:467:12)
      at addChunk (internal/streams/readable.js:309:12)
      at readableAddChunk (internal/streams/readable.js:284:9)
      at Socket.Readable.push (internal/streams/readable.js:223:10)

Preview logs (useful for rendering errors)

No response

Anything else?

No response

Other options to open a preview tab

I'm hovering over a react component and there is no link pop-up to open preview. Help

Error using theme property with styled components

Describe the bug
I'm using styled components in a project, but when using theme variables the react preview returns an error that the variable is undefined

To Reproduce
Steps to reproduce the behavior:

Go to component
Click on 'Open Card2 in React Preview'
See error

Expected behavior
I would expect React preview to be able to take the values that were defined in my theme file and use them as properties for the styled components.

Screenshots

Preview logs (useful for rendering errors)
Uncaught TypeError: Cannot read property 'textColor' of undefined

at styled.div.theme.theme (styles.ts:12)
at Ne (Keyframes.js:20)
at e2.generateAndInjectStyles (isStaticRules.js:6)
at Keyframes.js:20
at Keyframes.js:20
at O2 (Keyframes.js:20)
at renderWithHooks (react-dom.development.js:14985)
at updateForwardRef (react-dom.development.js:17044)
at beginWork (react-dom.development.js:19098)
at HTMLUnknownElement.callCallback2 (react-dom.development.js:3945)

logs.ts:6 The above error occurred in the <styled.div> component:

at O2 (http://localhost:3120/preview/node_modules/.vite/styled-components.js?v=ae551d2b:1420:6)
at Card (http://localhost:3120/preview/src/components/Card/index.tsx?t=1624637127447:19:21)
at Card3
at ComponentLoader (http://localhost:3120/preview/@id/__x00__virtual:c:/Users/maria/JOS3S/nlw06/nlw06-letmeask/__reactpreview_internal__/ComponentLoader.tsx:7:3)
at ErrorBoundary (http://localhost:3120/preview/@id/__x00__virtual:c:/Users/maria/JOS3S/nlw06/nlw06-letmeask/__reactpreview_internal__/ErrorBoundary.tsx:9:5)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
(anonymous) @ logs.ts:6

logs.ts:6 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

at ComponentLoader (http://localhost:3120/preview/@id/__x00__virtual:c:/Users/maria/JOS3S/nlw06/nlw06-letmeask/__reactpreview_internal__/ComponentLoader.tsx:7:3)

Desktop (please complete the following information):

Windows 10
Extension version: 2004

Cannot find module 'typescript'

After installing this extension and opening a .tsx or .jsx file, VS Code shows the following alerts:

A request has failed. See the output for more information. Source: React Preview (beta) (Extension)

The React Preview server crashed 5 times in the last 3 minutes. The server will not be restarted. Source: React Preview (beta) (Extension)

Looking into the React Preview output, the following error is present 5 times:

Error: Cannot find module 'typescript'
Require stack:
- /Users/adamhill/.vscode/extensions/zenclabs.reactpreview-0.2.1/dist/server/bundle.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:934:15)
    at Module._load (internal/modules/cjs/loader.js:779:27)
    at Function.f._load (electron/js2c/asar_bundle.js:5:12684)
    at Module.require (internal/modules/cjs/loader.js:1006:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.8519 (/Users/adamhill/.vscode/extensions/zenclabs.reactpreview-0.2.1/dist/server/bundle.js:2:794199)
    at __webpack_require__ (/Users/adamhill/.vscode/extensions/zenclabs.reactpreview-0.2.1/dist/server/bundle.js:2:794635)
    at Object.6810 (/Users/adamhill/.vscode/extensions/zenclabs.reactpreview-0.2.1/dist/server/bundle.js:2:549479)
    at __webpack_require__ (/Users/adamhill/.vscode/extensions/zenclabs.reactpreview-0.2.1/dist/server/bundle.js:2:794635)
    at Object.1031 (/Users/adamhill/.vscode/extensions/zenclabs.reactpreview-0.2.1/dist/server/bundle.js:2:561507) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/adamhill/.vscode/extensions/zenclabs.reactpreview-0.2.1/dist/server/bundle.js'
  ]
}

This occurs consistently across multiple React/Next projects and reloading VS Code does not solve the issue. Let me know if you need any more details.

Publishing on Open VSX Registry (VS Code)

Is your feature request related to a problem? Please describe.
I'm currently in the process of moving from the official build VS Code to VSCodium. However, it doesn't seem like the React Preview extension is published on the Open VSX Registry (the open-source version of the VS Code Marketplace).

Describe the solution you'd like
Would it be possible for y'all to publish the extension on the public registry? Instructions are here.

Describe alternatives you've considered
The alternative is to directly download the VSIX and upload it manually, but that's not as fun as downloading from the marketplace.

Additional context
Looking forward to checking out React Preview!

style.module.scss is not loading

Trying to load component that uses style.module.scss and shows this error

Can you customize the server/webpack config?

I have a React Native project where I use Expo to render web versions of the components. It would be great to use this extension but the expo webpack config is pretty complex so it would be great to be able to supply a custom webpack config for cases like this.

Ability to disable open buttons above component name

Is your feature request related to a problem? Please describe.
I have large project and when I'm trying to select some lines of code height of viewport changes due to rendering of "Open Component in React Preview", very frustrating to me.

Describe the solution you'd like
Ability to disable such behaviour and open preview from command palette or from other places, not sure about that, but for example from left side, around line numbers maybe.

Support global vars injected by webpack.DefinePlugin

Is your feature request related to a problem? Please describe.
I'm getting undefined errors from some of my code that uses global vars defined with
webpack.DefinePlugin https://webpack.js.org/plugins/define-plugin/

Describe the solution you'd like
I want my vars to be loaded from the Wrapper component.

Describe alternatives you've considered
Manually set up the vars, but that would be cumbersome and add code duplication.

Additional context
None

The installation of the extension got blocked by BitDefender anti-virus

Describe the bug

Reproduction

try to install the extenstion in VS Code on Windows 10 + BitDefender Total Security

React Preview version

v0.7.1 (Beta)

System Info

System:
    OS: Windows 10 10.0.19043
    CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
    Memory: 1.98 GB / 15.96 GB
  Binaries:
    Node: 16.13.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
  IDEs:
    Visual Studio: 17.0.31912.275 (Visual Studio Community 2022), 16.11.31911.196 (Visual Studio Community 2019)
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (97.0.1072.55)
    Internet Explorer: 11.0.19041.1202

Used Package Manager

npm

Extension logs (useful for crashes)

No response

Preview logs (useful for rendering errors)

No response

Anything else?

No response

Preview for Sveltejs

Is there any plan to release preview extension for Sveltejs?

Allow CSS preprocessor configuration

We use Ant in one of our projects and we load their uncompiled .less styles instead of .css in order to do some customizations. Unfortunately Ant uses inline JavaScript in their .less files which has to be explicitly enabled. But ReactPreview doesn't allow this because the related Vite config options aren't available at this time.

From what I see in the other issues, I understand a fully custom Vite config is not doable at the moment. But allowing the customization of Vite's CSS preprocessor configurations would solve the problem and allow the use of Ant, “the second most popular React component library”.

Conflicting issue when npm library same as folder path

Describe the bug

We are using redux, importing like

import { bindActionCreators } from 'redux';

but we also have a folder called redux:

import history from 'redux/history';

the app is erroring with

 > node_modules/redux-devtools-extension/index.js:3:22: error: Cannot read file "src/redux": is a directory
    3 │ var compose = require('redux').compose;
      ╵                       ~~~~~~~

any way around this? other than renaming my folder?

Reproduction

see notes above

React Preview version

0.7.1

System Info

System:
    OS: macOS 11.6
    CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
    Memory: 31.73 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.22.1 - ~/.nvs/node/10.22.1/x64/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.6 - ~/.nvs/node/10.22.1/x64/bin/npm
  IDEs:
    IntelliJ: 2021.1.1
    Nano: 2.0.6 - /usr/bin/nano
    VSCode: 1.61.2 - /usr/local/bin/code
    Vim: 8.2 - /usr/bin/vim
    Xcode: /undefined - /usr/bin/xcodebuild
  Browsers:
    Chrome: 95.0.4638.54
    Firefox: 88.0.1
    Safari: 15.0

Used Package Manager

npm

Extension logs (useful for crashes)

No response

Preview logs (useful for rendering errors)

No response

Anything else?

No response

Unique names for default generated props

Is your feature request related to a problem? Please describe.

Two problems:

Sometimes I have multiple prop fields that will be used as keys in child components (e.g. an id field). I will often get the Each child in a list should have a unique "key" prop error as they all end up with id as the key.
This is less of an issue, but if there are duplicated field names in different sub-objects (in my case school.name and subject.name) they both have the same generated value ("name") so it's not obvious if I've put the correct one in the right place or made some copy-paste error.

Describe the solution you'd like

I was thinking that default-generated props could have unique names, maybe just appending + incrementing a number to the ones that are already there. Or perhaps the generated name includes the parent field name (e.g. "school.name" instead of just "name") or the name of the fn they were returned from.

Preview doesn't work in Firefox

Seems to be caused by use of location.ancestorOrigins which isn't supported by Firefox.

Failed to resolve force included dependency React/React Dom

Describe the bug

I have a react component library with the package.json like this:

"peerDependencies": {
    "react": "^17.0.2"
  },
"devDependencies": {
    "@types/react": "^17.0.5",
  },

notes that react is peerDependencies(not devDependencies or dependencies), and then i get the error

Reproduction

preview in react component library with peerDependencies react

React Preview version

v0.7.1

System Info

System:
    OS: macOS 11.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 5.51 GB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 12.18.4 - ~/.nvm/versions/node/v12.18.4/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.6 - ~/.nvm/versions/node/v12.18.4/bin/npm
  IDEs:
    Nano: 2.0.6 - /usr/bin/nano
    VSCode: 1.61.1 - /usr/local/bin/code
    Vim: 8.2 - /usr/bin/vim
    Xcode: 13.0/13A233 - /usr/bin/xcodebuild
  Browsers:
    Chrome: 94.0.4606.81
    Firefox: 89.0.2
    Safari: 15.0

Used Package Manager

yarn

CLI logs (useful for crashes)

No response

Preview logs (useful for rendering errors)

No response

Anything else?

No response

How to ref a file in the root of src

Describe the bug

We have a config.js file in the root of our src, i.e. src/config.js.

In our components we we refer to it like import CONFIG from 'config';

In the config I have

  alias: {
    components: 'src/components',
    assets: 'src/assets',
    config: 'src/config.js'
  },

In the output in VSCode I see the following error

2:50:15 PM [vite] Internal server error: Failed to resolve import "config" from "src/components/CardActionsMenu/CardActionsMenu.js". Does the file exist?
  Plugin: vite:import-analysis
  File: /Users/david.lozzi/git/search/src/components/CardActionsMenu/CardActionsMenu.js
  1  |  import React, { useState } from "react";
  2  |  import PropTypes from "prop-types";
  3  |  import CONFIG from "config";
     |                      ^

Also, I am seeing Unable to import config {} over and over again in the output, not sure if its related or not.

Reproduction

See notes above

React Preview version

0.7.1

System Info

System:
    OS: macOS 11.6
    CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
    Memory: 332.23 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 14.17.1 - ~/.nvs/node/14.17.1/x64/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.13 - ~/.nvs/node/14.17.1/x64/bin/npm
  IDEs:
    IntelliJ: 2021.1.1
    Nano: 2.0.6 - /usr/bin/nano
    VSCode: 1.61.2 - /usr/local/bin/code
    Vim: 8.2 - /usr/bin/vim
    Xcode: /undefined - /usr/bin/xcodebuild
  Browsers:
    Chrome: 95.0.4638.54
    Firefox: 88.0.1
    Safari: 15.0

Used Package Manager

npm

Extension logs (useful for crashes)

No response

Preview logs (useful for rendering errors)

No response

Anything else?

No response

can't resolve import path with jsconfig.json path

Describe the bug

error when import component with jsconfig path
Failed to resolve import "@components/Navbar" from "components/Layout.jsx". Does the file exist?

Reproduction

setup path with jsconfig.json file
{ "compilerOptions": { "baseUrl": "./", "paths": { "@components/*": ["components/*"], "@styles/*": ["styles/*"] } } }
import inside component
import Navbar from '@components/Navbar'
open in ReactPreview

fwouts / previewjs Goto Github PK

previewjs's Introduction

Get started

Documentation

Contributing

Sponsors

License

previewjs's People

Contributors

Stargazers

Watchers

Forkers

previewjs's Issues

Describe the bug

Reproduction

React Preview version

System Info

Used Package Manager

Extension logs (useful for crashes)

Preview logs (useful for rendering errors)

Anything else?

Describe the bug

Reproduction

React Preview version

System Info

Used Package Manager

React Preview control-plane.log (useful for crashes)

Preview logs (useful for rendering errors)

Anything else?

Describe the bug

Reproduction

React Preview version

System Info

Used Package Manager

Extension logs (useful for crashes)

Preview logs (useful for rendering errors)

Anything else?

Describe the bug

Reproduction

React Preview version

System Info

Used Package Manager

Extension logs (useful for crashes)

Preview logs (useful for rendering errors)

Anything else?

Describe the bug

Reproduction

React Preview version

System Info

Used Package Manager

Extension logs (useful for crashes)

Preview logs (useful for rendering errors)

Anything else?

Rate-Limited

Edited/Blocked

Open

Ignored or Blocked

Detected dependencies

Describe the bug

Reproduction

React Preview version

System Info

Used Package Manager

React Preview control-plane.log (useful for crashes)

Preview logs (useful for rendering errors)

Anything else?

Describe the bug

Reproduction

React Preview version

System Info

Used Package Manager

Extension logs (useful for crashes)

Preview logs (useful for rendering errors)

Anything else?

Describe the bug

Reproduction

System Info

Used Package Manager

Extension logs (useful for crashes)

Preview logs (useful for rendering errors)