bluwy / create-vite-extra Goto Github PK

Problem

deno run -A npm:create-vite-extra

 deno run -A npm:create-vite-extra
√ Project name: ... 1
√ Select a template: » deno-react

Scaffolding project in E:\GithubE\1...

Done. Now run:

  cd 1
  deno task dev

I am not getting asked the variant, and it is generating jsx files.

I can run this in pnpm:

√ Project name: ... vite-project
√ Select a template: » deno-react
√ Select a variant: » TypeScript

I get asked the variant and it generates .tsx files

This does not happen when running in WSL on Windows, where I correctly get asked the variant.

Versions

Deno: 1.36.4
OS: Windows 10
Terminal: Powershell in Windows Terminal v1.17.11461.0

It's better to have a step that users can select:

• Default: Don't include state management
• Pinia: Using Pinia as the default store
• VueX: Using VueX as the default store

Thank you for providing the deno-lit template.

I would like to report an issue though. When I am trying to build the example, with:

deno task built

I get:

Name in package.json is required if option "build.lib.fileName" is not provided.
error during build:
Error: Name in package.json is required if option "build.lib.fileName" is not provided.

Anu chance adding it?

Unable to move up and down.
OS version: Windows 11 22H2

I'am using the ssr-react-ts template under Windows 10.

entry-server.tsx:

...
import App from './App'
...

TS Error:

TS6307: File
D:/work/vite-extra-project/src/App.tsx
is not listed within the file list of project
D:/work/vite-extra-project/tsconfig.node.json
. Projects must list all files or use an include pattern.

tsconfig.node.json:

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true,
    "jsx": "preserve"
  },
  "include": [
    "vite.config.ts",
    "src/entry-server.tsx",
    "src/vite-env.d.ts"
  ]
}

目前 deno 仍然是模拟的 node 环境来运行 vite, 而 vite 并没有为 deno 的使用方式重新设计.

deno-vue 模板中移除了 package.json, 只能靠 deno 的自动收集依赖并生成 node_modules 来给 vue 项目使用.

所以当你为 vue 项目添加一些依赖时, 如 lodash, 你需要在 vue.config.js 中 import 一些 deno 运行环境并不需要的包, 导致 dep 和 devDep 混在了一起.

改进

创建 dep.mjs 专门用来管理前端依赖并生成 node_modules.

import 'npm:vue'
// import 'npm:lodash' // 如果需要 lodash 的话, 直接添加本行
                       // 另外支持 import 'npm:lodash@latest' 或 import 'npm:lodash@2' 指定依赖版本号

运行在 deno 环境下的 vite 自身则不需要生成在 node_modules 中.

deno.json 中的 task 配置修改如下:

{
  "tasks": {
    "install": "deno cache --unstable --node-modules-dir ./dep.mjs",
    "dev": "deno task install && deno run -A --unstable npm:vite"
    "build": "deno task install && deno run -A --unstable npm:vite build",
    "preview": "deno run -A --unstable npm:vite preview",
    "serve": "deno run --allow-net --allow-read https://deno.land/[email protected]/http/file_server.ts dist/"
  }
}

而对于 parceljs 这种自动收集依赖并安装的 cli 工具, 就不需要 deno 来考虑 node_modules 了, 只不过 parceljs 仍然是依赖了 npm/yarn 来进行的依赖安装.

期待 vite 内置自动收集依赖能力, 并基于 deno 的实现.

Just creating a new Preact Vite project results in a page that won't load.

In case its relevant, my OS is Windows 11, using windows terminal on powershell core 7 profile.

steps I followed

>deno --version
deno 1.34.3 (release, x86_64-pc-windows-msvc)
v8 11.5.150.2
typescript 5.0.4

>deno run -A npm:create-vite-extra@latest
test
deno-preact

# tried both JavaScript and TypeScript

cd test
deno task dev

  VITE v4.3.9  ready in 5272 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
Cannot find package '@babel/plugin-transform-react-jsx-development' imported from C:\Users\█████████████████████\\test\babel-virtual-resolve-base.js
12:05:36 AM [vite] Internal server error: Cannot find package '@babel/plugin-transform-react-jsx-development' imported from C:\Users\█████████████████████\test\babel-virtual-resolve-base.js

I get the vite error screen with a blank white page behind it, error shows as:

[plugin:vite:preact-jsx] Cannot find package '@babel/plugin-transform-react-jsx-development' imported from C:\Users\█████████████████████\test\babel-virtual-resolve-base.js

Reproduce Step

deno run -A npm:create-vite-extra --template deno-react-ts
# Project name: example
cd example
deno task dev

Result

Environment

macOS 12.6.2 arm64
deno 1.29.1

Environment

• Ubuntu 22.04.1 LTS (WSL)
• deno 1.28.3
• v8 10.9.194.5
• typescript 4.8.3

Step to reproduce

• Create project using deno run -A npm:create-vite-extra
  • Enter a project name
  • Choose deno-react
  • Choose Typescript + SWC
• Go to the created directory
• run deno task dev

Output

Task dev deno run -A --node-modules-dir npm:vite
Unstable API 'node-api'. The --unstable flag must be provided.

Tests

The deno-react-ts template (without swc) works fine in my environment.

Hello team,

I decided to try a preact template with typescript and deno, but when I run the project with the command deno task dev I get a package error... Apparently it has to do with babel.

logs

Cannot find package '@babel/plugin-transform-react-jsx-development'

more info

Issue

JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. errors are popping OOTB.

this may be related to denoland/deno#9425.

How to reproduce

1. follow the installation steps.

$ deno run --allow-read --allow-write --allow-env npm:create-vite-extra@latest
✔ Project name: … vite-project
✔ Select a template: › deno-react
✔ Select a variant: › TypeScript

Scaffolding project in /home/scarf/repo/cata/vite-project...

Done. Now run:

  cd vite-project
  deno task dev

2. enable deno for the workspace.
   

System Information

ubuntu 23.04
vscode 1.78.1, with deno extension v3.17.0

When i try to create a deno + framework template it gives me this error when running the app.

I originally wanted to try react but after it not working i tried it for svelte too with the same error. Please tell me how to fix it and correct the issue.

deno: 1.33.1
node: 16.14.2
Os: Windows 10

Remix now works with Vite (since version 2.2.0, see here). Can we add a Remix template for Node.js and Deno projects that use Vite? This would help people start new projects more easily.

System

Windows 10
deno 1.26.1

Reproduction

1. deno run -A --unstable npm:create-vite-extra
2. select deno-vue
3. cd into folder
4. run deno task dev

Full logs:

Warning deno task is unstable and may drastically change in the future
Task dev deno run -A --unstable --node-modules-dir npm:vite
✘ [ERROR] [plugin externalize-deps] EINVAL: invalid argument, stat

    vite.config.mjs:2:16:
      2 │ import vue from 'npm:@vitejs/plugin-vue'
        ╵                 ~~~~~~~~~~~~~~~~~~~~~~~~

failed to load config from D:\deno-vite-test2\vite.config.mjs
error when starting dev server:
Error: Build failed with 1 error:
vite.config.mjs:2:16: ERROR: [plugin: externalize-deps] EINVAL: invalid argument, stat
    at failureErrorWithLog (file:///D:/deno-vite-test2/node_modules/.deno/[email protected]/node_modules/esbuild/lib/main.js:1566:15)
    at file:///D:/deno-vite-test2/node_modules/.deno/[email protected]/node_modules/esbuild/lib/main.js:1024:28
    at runOnEndCallbacks (file:///D:/deno-vite-test2/node_modules/.deno/[email protected]/node_modules/esbuild/lib/main.js:1438:61)
    at buildResponseToResult (file:///D:/deno-vite-test2/node_modules/.deno/[email protected]/node_modules/esbuild/lib/main.js:1022:7)
    at file:///D:/deno-vite-test2/node_modules/.deno/[email protected]/node_modules/esbuild/lib/main.js:1134:14
    at responseCallbacks.<computed> (file:///D:/deno-vite-test2/node_modules/.deno/[email protected]/node_modules/esbuild/lib/main.js:671:9)
    at handleIncomingPacket (file:///D:/deno-vite-test2/node_modules/.deno/[email protected]/node_modules/esbuild/lib/main.js:726:9)
    at w.readFromStdout (file:///D:/deno-vite-test2/node_modules/.deno/[email protected]/node_modules/esbuild/lib/main.js:647:7)
    at w.emit (https://deno.land/[email protected]/node/_events.mjs:379:28)
    at ot (https://deno.land/[email protected]/node/_stream.mjs:10:32715)

Additional Info

Not sure if this is a bug with create-vite-extra or denos npm implementation etc. I'm happy to create an issue upstream where needed....

i don't know why error :Unsupported scheme "npm" for module "npm:create-vite-extra". Supported schemes: [
"data",
"blob",
"file",
"http",
"https",
]
Does deno not support npm?

https://vitejs.dev/guide/migration.html#manifest-files-are-now-generated-in-vite-directory-by-default

It's hard to update the deps now, especially with Deno's "version-in-import-path" syntax. It would be nice to figure out how to update all to latest at once.

I've used https://github.com/antfu/taze for updates but it doesn't work for Deno.

Deno version used was 1.28.3

deno task dev throws the following error in the browser console
Error for Firefox is Loading module from “http://localhost:5173/src/my-element.js” was blocked because of a disallowed MIME type (“”)
Error for Chrome is GET http://localhost:5173/src/my-element.js net::ERR_ABORTED 404 (Not Found)

deno task build just fails and gives the following error in the terminal
Could not resolve entry module "src/my-element.js".
error during build
RollupError: Could not resolve entry module "src/my-element.js".`

I tried vite-deno-svelte-ts template, it works (nice!), but the lsp get really confused,

svelte.config.js -> should be linted with deno lsp
vite.config.mts -> should be linted with tsserver ?
./src -> should be linted with svelte ? but also if I enable svelte there it gets confused because of the import syntax inside svelte.config.js

Is it the case of things currently , or are there ways to handle this ?

I'm using Deno to create a React.js + TS + SWC Vite project, but in the generated vite.config.mts file, it wants a SWC version that doesn't exist today. (the latest version is 3.5.0, but it wants ^4.0.0)

I have to manually change to ^3.5.0 to get this working.

To produce this:

1. deno run --allow-read --allow-write --allow-env npm:create-vite-extra@latest
2. Select a template: › deno-react
3. Select a variant: › TypeScript + SWC
4. Inside the project directory, run deno task dev
5. Then it throws an error: TypeError: Could not find npm package '@vitejs/plugin-react-swc' matching '^4.0.0'.

My setup:

% deno --version
deno 1.39.2 (release, aarch64-apple-darwin)
v8 12.0.267.8
typescript 5.3.3

The vite setup used in the deno-lit template ignores mappings defined in the deno import_map.json file.
Supporting this would be a fantastic DX enhancement.

Hello,
server.js line 7:

const port = process.env.PORT || 5173

This does not read configuration from vite.config.ts.
The port defaults to 5173 even if we specify it in config file:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    strictPort: true
  }
})

Any ideas on why I can't run this? I updated node and the npm global install to latest LTS versions and tried a few other things.

~/projects/deno-solid
❯ deno task dev
Task dev deno run -A --node-modules-dir npm:vite
error when starting dev server:
Error: EPERM: operation not permitted, readdir
    at __node_internal_captureLargerStackTrace (https://deno.land/[email protected]/node/internal/errors.ts:113:11)
    at __node_internal_uvException (https://deno.land/[email protected]/node/internal/errors.ts:250:10)
    at denoErrorToNodeError (https://deno.land/[email protected]/node/internal/errors.ts:2500:14)
    at https://deno.land/[email protected]/node/_fs/_fs_readdir.ts:75:16

Hi @bluwy,
I want to ask for a favor.
Could you create a template of Vite + Vue + Streaming SSR ?

FYI, I have created one, but I'm not sure if it is correct. Maybe if you have some spare time, I hope you could take a look and review it too. You can check it in my repo (vite-vue-streaming-ssr).

Hope you have a nice day and night

I copied the template template-deno-solid, but when running this command I got the following error:

$ deno task dev
Task dev deno run -A --node-modules-dir npm:vite
error when starting dev server:
Error: Cannot find package.json from /home/danielkurz/code/deno-solid
    at crawlFrameworkPkgs (file:///home/danielkurz/code/deno-solid/node_modules/.deno/[email protected]/node_modules/vitefu/src/index.js:17:11)
    at async config (file:///home/danielkurz/code/deno-solid/node_modules/.deno/[email protected]/node_modules/vite-plugin-solid/dist/esm/index.mjs:52:31)
    at async runConfigHook (file:///home/danielkurz/code/deno-solid/node_modules/.deno/[email protected]/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:62870:25)
    at async resolveConfig (file:///home/danielkurz/code/deno-solid/node_modules/.deno/[email protected]/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:62379:14)
    at async createServer (file:///home/danielkurz/code/deno-solid/node_modules/.deno/[email protected]/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:61641:20)
    at async CAC.<anonymous> (file:///home/danielkurz/code/deno-solid/node_modules/.deno/[email protected]/node_modules/vite/dist/node/cli.js:707:24)

And when you go to the code where the error originates, it makes sense why it throws an error:

// /node_modules/.deno/[email protected]/node_modules/vitefu/src/index.js:17:11
export async function crawlFrameworkPkgs(options) {
  const pkgJsonPath = await findClosestPkgJsonPath(options.root)
  if (!pkgJsonPath) {
    throw new Error(`Cannot find package.json from ${options.root}`)
  }

I fixed it by running "yarn init" so just creating a simple and mostly empty package.json. I'll create another issue with the vite-solid-plugin, since this repo will not address this problem, but maybe you should add an empty package.json in this repo aswell.

deno run -A --unstable npm:create-vite-extra --template deno-solid deno-solid

Scaffolding project in C:\Users\drewbitt\GitHub\MyStuff\deno-solid...

Done. Now run:

cd deno-solid
deno task dev

PS C:\Users\drewbitt\GitHub\MyStuff> cd .\deno-solid
PS C:\Users\drewbitt\GitHub\MyStuff\deno-solid> deno task dev

error when starting dev server:
Error: Cannot find package.json from C:\Users\drewbitt\GitHub\MyStuff\deno-solid
    at crawlFrameworkPkgs (file:///C:/Users/drewbitt/GitHub/MyStuff/deno-solid/node_modules/.deno/[email protected]/node_modules/vitefu/src/index.js:17:11)
    at async config (file:///C:/Users/drewbitt/GitHub/MyStuff/deno-solid/node_modules/.deno/[email protected]/node_modules/vite-plugin-solid/dist/esm/index.mjs:52:31)
    at async runConfigHook (file:///C:/Users/drewbitt/GitHub/MyStuff/deno-solid/node_modules/.deno/[email protected]/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:62865:25)
    at async resolveConfig (file:///C:/Users/drewbitt/GitHub/MyStuff/deno-solid/node_modules/.deno/[email protected]/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:62374:14)
    at async createServer (file:///C:/Users/drewbitt/GitHub/MyStuff/deno-solid/node_modules/.deno/[email protected]/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:61636:20)
    at async CAC.<anonymous> (file:///C:/Users/drewbitt/GitHub/MyStuff/deno-solid/node_modules/.deno/[email protected]/node_modules/vite/dist/node/cli.js:707:24)

PS C:\Users\drewbitt\GitHub\MyStuff\deno-solid> deno -V
deno 1.27.2

I think template-* pattern doesn't work in new node anymore. I got the best results by just removing "files" section, but that causes .* files to be added in the root, which isn't probably that big of a problem. You can see on the screenshot that only README is getting sent from the template