Question

Hey, not sure if I'm doing something wrong though I cannot get vite dev server (/@vite/client.js) to come through to templates.

Additional context

As you have highlighted here, the php container cannot access the vite container on localhost:3000 so needs a different URL to check, like your comment I setup:

// VITE_DEV_SERVER_INTERNAL=http://vite:3000/
'devServerInternal' => App::env('VITE_DEV_SERVER_INTERNAL'),
    'checkDevServer' => true,

When I run xdebug, I can see content in this fetch methodhttps://github.com/nystudio107/craft-plugin-vite/blob/v1/src/services/ViteService.php#L366 it appears to be getting the contents of client.js file so it should be coming through without me needing to do anything else right?

Thanks for your work on this.

Question

Hello, I got similar issue at the below ticket. https://github.com/nystudio107/craft-vite/issues/1#issue-876796855

[vite] connecting..., then [vite] server connection lost. polling for restart...

This endless repeats. It seems to be not working with my local environment using Lalavel valet with secure option (https). If I unsecure the site to make it to http, it works OK.

Any configuration on settings to make it work with https on valet?

Additional context

// vite.php
<?php

use craft\helpers\App;

return [
    'useDevServer' => App::env('ENVIRONMENT') === 'dev',
    'manifestPath' => '@webroot/dist/manifest.json',
    'devServerPublic' => 'http://localhost:3000/',
    'serverPublic' => App::env('PRIMARY_SITE_URL') . '/dist/',
    'errorEntry' => '',
    'cacheKeySuffix' => '',
    'devServerInternal' => '',
    'checkDevServer' => false,
];

// vite.config.js
import legacy from '@vitejs/plugin-legacy'
import ViteRestart from 'vite-plugin-restart';

export default ({ command }) => ({
  base: command === 'serve' ? '' : '/dist/',
  build: {
    manifest: true,
    outDir: './web/dist/',
    rollupOptions: {
      input: {
        app: '/src/app.js',
      }
    },
  },
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11']
    }),
    ViteRestart({
      reload: [
          './templates/**/*',
      ],
    }),
  ],
 server: {
    host: '0.0.0.0',
  },
});

While intentional or not, the devServerInternal config option let me set that to the Docker container running the Vite dev server and allowed me to leave useDevServer always set to 1 as it would automatically figure out if I was expecting a manifest.json or the devserver url. (I think because you were checking if the devserver responded)

This let me run the Vite dev script or the build script without any sort of .env or config file change on the Craft side.

With the removal of that setting, now I have to explicitly set useDevServer, which while manageable, means I can't just switch between a devserver or a production build locally. Maybe my desire is in the minority but figured I'd ask 🤷🏻‍♂️

Thanks for the work on this!

Question

Following the docs I don't really understand how the whole static assets work if they are not imported using CSS or Javascript. I use the rollup-plugin-copy as mentioned but do I also use the {{ craft.vite.asset("...") }}?

In build mode with the .env ENVIRONMENT = production it shows a (unknown) as the src of the image.

Additional context

I notice if I import the image in my app.js and console.log the image it puts the image in the manifest.json and it works. Maybe I'm missing some step of configuration here?

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

Ability to use React components with HMR, currently this will error with the following during development: Uncaught Error: @vitejs/plugin-react-refresh can't detect preamble. Something is wrong.

Describe the solution you would like

Injected the following script to allow ViteJS to modify HTML via the @vitejs/plugin-react-refresh plugin (https://vitejs.dev/guide/backend-integration.html#backend-integration). Would be nice if the script respected the dev server that has been configured in vite.php config

<script type="module">
  import RefreshRuntime from 'http://localhost:3000/@react-refresh'
  RefreshRuntime.injectIntoGlobalHook(window)
  window.$RefreshReg$ = () => {}
  window.$RefreshSig$ = () => (type) => type
  window.__vite_plugin_react_preamble_installed__ = true
</script>

Describe alternatives you have considered

Currently we are manually including the above script block conditionally when in DEV mode to enable HMR of React components.

Describe the bug

We get the message of [an error occurred while processing the directive][an error occurred while processing the directive] printed at the the of all pages. Assets still update (HMR) fine but this message appears at the top of each page just under the opening <body> tag.

Using XDEBUG with DDEV I can see Guzzle has issues reaching the address http://localhost:3000/__vite_ping followed by the error "cURL error 7: Failed to connect to localhost port 3000: Connection refused (see https://curl.haxx.se/libcurl/c/libcurl-errors.html) for http://localhost:3000/__vite_ping"

I think this is somewhat related to https://github.com/nystudio107/craft-vite/issues/37 but I can get assets to build and update fine. Setting checkDevServer to false has no effect. It's just this message that appears.

To reproduce

Steps to reproduce the behaviour:

1. Open any templated page.

Expected behaviour

No error at all

Versions

• Plugin version: 1.0.28
• Craft version: 3.7.57

Describe the bug

I know this has been an issue in the past, but possibly showing up again... Vite dev server is running, and navigating to localhost:3000/src/main.ts shows the right file, but localhost:3000/@vite/client is dead, thus dev server is not being detected as running if checkDevServer => true. What makes this difficult to repro is it seems pretty spotty.

Ultimately, I don't think this is an issue with craft-vite, but with vite itself, though I wonder if there's an alternative method to dev server detection.

Versions

• Plugin version: 4.0.0-beta.4
• Craft version: 4.0.2
• Vite version: 2.9.9

Describe the bug

On a blank installation of Craft 4, this plugin fails to install

To reproduce

Steps to reproduce the behaviour:

1. Create craft instance with composer create-project craftcms/craft my/project/path dev-craft4
2. Use nitro add to initialize local environment
3. In Control panel, try to install the Vite plugin

Then got this error

Composer output: Loading composer repositories with package information
Updating dependencies
Your requirements could not be resolved to an installable set of packages.

Problem 1
- nystudio107/craft-vite 4.0.0-beta.4 requires nystudio107/craft-plugin-vite ^4.0.0-beta.3 -> found nystudio107/craft-plugin-vite[4.0.0-beta.3, v4.x-dev] but it does not match your minimum-stability.
- Root composer.json requires nystudio107/craft-vite 4.0.0-beta.4 -> satisfiable by nystudio107/craft-vite[4.0.0-beta.4].

Running update with --no-dev does not mean require-dev is ignored, it just means the packages will not be installed. If dev requirements are blocking the update you have to resolve those problems.

I added the following to get past that error

  "minimum-stability": "dev",
  "prefer-stable": true

But that only brought me to the next error

Error: Composer\Util\Filesystem::filePutContentsIfModified(): Argument #2 ($content) must be of type string, bool given, called in /app/vendor/composer/composer/src/Composer/Repository/FilesystemRepository.php on line 165

Composer output: Loading composer repositories with package information
Updating dependencies
Lock file operations: 2 installs, 93 updates, 0 removals
- Upgrading cebe/markdown (1.2.1 9bac5e9 => 1.2.1)
- Upgrading commerceguys/addressing (v1.3.0 566febd => v1.3.0)
- Upgrading composer/ca-bundle (1.3.1 4c67918 => 1.3.1)
- Upgrading composer/composer (2.3.5 50c47b1 => 2.3.5)
- Upgrading composer/metadata-minifier (1.0.0 c549d23 => 1.0.0)
- Upgrading composer/pcre (3.0.0 e300eb6 => 3.0.0)
- Upgrading composer/semver (3.3.2 3953f23 => 3.3.2)
- Upgrading composer/spdx-licenses (1.5.6 a30d487 => 1.5.6)
- Upgrading composer/xdebug-handler (3.0.3 ced2996 => 3.0.3)
- Upgrading craftcms/cms (4.0.0-RC1 daac7c1 => 4.0.0-RC1)
- Upgrading craftcms/oauth2-craftid (1.0.0.1 3f18364 => 1.0.0.1)
- Upgrading craftcms/plugin-installer (1.5.7 23ec472 => 1.5.7)
- Upgrading craftcms/server-check (2.1.4 c262ebd => 2.1.4)
- Upgrading creocoder/yii2-nested-sets (0.9.0 cb8635a => 0.9.0)
- Upgrading defuse/php-encryption (v2.3.1 7788048 => v2.3.1)
- Upgrading doctrine/collections (1.6.8 1958a74 => 1.6.8)
- Upgrading doctrine/lexer (1.2.3 c268e88 => 1.2.3)
- Upgrading egulias/email-validator (3.1.2 ee0db30 => 3.1.2)
- Upgrading elvanto/litemoji (3.0.1 acd6fd9 => 3.0.1)
- Upgrading enshrined/svg-sanitize (0.15.4 e50b83a => 0.15.4)
- Upgrading ezyang/htmlpurifier (v4.14.0 12ab42b => v4.14.0)
- Upgrading guzzlehttp/guzzle (7.4.2 ac1ec1c => 7.4.2)
- Upgrading guzzlehttp/promises (1.5.1 fe752ae => 1.5.1)
- Upgrading guzzlehttp/psr7 (2.2.1 c94a94f => 2.2.1)
- Upgrading illuminate/collections (v9.9.0 03fc7ae => v9.9.0)
- Upgrading illuminate/conditionable (v9.9.0 56b4ba1 => v9.9.0)
- Upgrading illuminate/contracts (v9.9.0 de08787 => v9.9.0)
- Upgrading illuminate/macroable (v9.9.0 25a2c6d => v9.9.0)
- Upgrading justinrainbow/json-schema (5.2.12 ad87d5a => 5.2.12)
- Upgrading league/oauth2-client (2.6.1 2334c24 => 2.6.1)
- Upgrading mikehaertl/php-shellcommand (1.6.4 3488d78 => 1.6.4)
- Upgrading moneyphp/money (v4.0.3 d945f77 => v4.0.3)
- Upgrading monolog/monolog (2.5.0 4192345 => 2.5.0)
- Locking nystudio107/craft-plugin-vite (4.0.0-beta.3)
- Locking nystudio107/craft-vite (4.0.0-beta.4)
- Upgrading paragonie/random_compat (v9.99.100 996434e => v9.99.100)
- Upgrading phpdocumentor/reflection-common (2.2.0 1d01c49 => 2.2.0)
- Upgrading phpdocumentor/reflection-docblock (5.3.0 622548b => 5.3.0)
- Upgrading phpdocumentor/type-resolver (1.6.1 77a3251 => 1.6.1)
- Upgrading pixelandtonic/imagine (1.2.4.2 5ee4b6a => 1.2.4.2)
- Upgrading psr/container (2.0.2 c71ecc5 => 2.0.2)
- Upgrading psr/event-dispatcher (1.0.0 dbefd12 => 1.0.0)
- Upgrading psr/http-client (1.0.1 2dfb5f6 => 1.0.1)
- Upgrading psr/http-factory (1.0.1 12ac7fc => 1.0.1)
- Upgrading psr/http-message (1.0.1 f6561bf => 1.0.1)
- Upgrading psr/log (1.1.4 d49695b => 1.1.4)
- Upgrading psr/simple-cache (3.0.0 764e0b3 => 3.0.0)
- Upgrading ralouphie/getallheaders (3.0.3 120b605 => 3.0.3)
- Upgrading react/promise (v2.9.0 234f8fd => v2.9.0)
- Upgrading samdark/yii2-psr-log-target (1.1.3 ccb29ec => 1.1.3)
- Upgrading seld/cli-prompt (1.0.4 b8dfcf0 => 1.0.4)
- Upgrading seld/jsonlint (1.9.0 4211420 => 1.9.0)
- Upgrading seld/phar-utils (1.2.0 9f3452c => 1.2.0)
- Upgrading symfony/console (v5.4.7 9002752 => v5.4.7)
- Upgrading symfony/deprecation-contracts (v3.0.1 26954b3 => v3.0.1)
- Upgrading symfony/event-dispatcher (v6.0.3 6472ea2 => v6.0.3)
- Upgrading symfony/event-dispatcher-contracts (v3.0.1 7bc61cc => v3.0.1)
- Upgrading symfony/filesystem (v6.0.7 6c9e4c4 => v6.0.7)
- Upgrading symfony/finder (v6.0.3 8661b74 => v6.0.3)
- Upgrading symfony/http-client (v6.0.7 a7930c4 => v6.0.7)
- Upgrading symfony/http-client-contracts (v3.0.1 f752577 => v3.0.1)
- Upgrading symfony/mailer (v6.0.7 f7343f9 => v6.0.7)
- Upgrading symfony/mime (v6.0.7 74266e3 => v6.0.7)
- Upgrading symfony/polyfill-ctype (v1.25.0 3088518 => v1.25.0)
- Upgrading symfony/polyfill-iconv (v1.25.0 f1aed61 => v1.25.0)
- Upgrading symfony/polyfill-intl-grapheme (v1.25.0 81b86b5 => v1.25.0)
- Upgrading symfony/polyfill-intl-idn (v1.25.0 749045c => v1.25.0)
- Upgrading symfony/polyfill-intl-normalizer (v1.25.0 8590a5f => v1.25.0)
- Upgrading symfony/polyfill-mbstring (v1.25.0 0abb51d => v1.25.0)
- Upgrading symfony/polyfill-php72 (v1.25.0 9a14221 => v1.25.0)
- Upgrading symfony/polyfill-php73 (v1.25.0 cc5db0e => v1.25.0)
- Upgrading symfony/polyfill-php80 (v1.25.0 4407588 => v1.25.0)
- Upgrading symfony/process (v5.4.7 38a44b2 => v5.4.7)
- Upgrading symfony/service-contracts (v3.0.1 e517458 => v3.0.1)
- Upgrading symfony/string (v6.0.3 522144f => v6.0.3)
- Upgrading symfony/var-dumper (v5.4.6 294e9da => v5.4.6)
- Upgrading symfony/yaml (v5.4.3 e80f87d => v5.4.3)
- Upgrading theiconic/name-parser (v1.2.11 9a54a71 => v1.2.11)
- Upgrading true/punycode (v2.1.1 a4d0c11 => v2.1.1)
- Upgrading twig/twig (v3.3.10 8442df0 => v3.3.10)
- Upgrading voku/anti-xss (4.1.39 64a59ba => 4.1.39)
- Upgrading voku/arrayy (7.9.1 11509d5 => 7.9.1)
- Upgrading voku/email-check (3.1.0 6ea8429 => 3.1.0)
- Upgrading voku/portable-ascii (2.0.1 b56450e => 2.0.1)
- Upgrading voku/portable-utf8 (6.0.4 f6c78e4 => 6.0.4)
- Upgrading voku/stop-words (2.0.1 8e63c0a => 2.0.1)
- Upgrading voku/stringy (6.5.3 c453c88 => 6.5.3)
- Upgrading voku/urlify (5.0.7 014b207 => 5.0.7)
- Upgrading webmozart/assert (1.10.0 6964c76 => 1.10.0)
- Upgrading webonyx/graphql-php (v14.11.6 6070542 => v14.11.6)
- Upgrading yiisoft/yii2 (2.0.45 e2223d4 => 2.0.45)
- Upgrading yiisoft/yii2-composer (2.0.10 94bb3f6 => 2.0.10)
- Upgrading yiisoft/yii2-debug (2.1.19 84d20d7 => 2.1.19)
- Upgrading yiisoft/yii2-queue (2.3.4 ed30b5f => 2.3.4)
- Upgrading yiisoft/yii2-symfonymailer (2.0.3 77baddf => 2.0.3)
Writing lock file
Installing dependencies from lock file
Package operations: 2 installs, 93 updates, 3 removals
- Removing yiisoft/yii2-shell (2.0.4)
- Removing psy/psysh (v0.10.12)
- Removing nikic/php-parser (v4.13.2)
- Upgrading craftcms/plugin-installer (1.5.7 23ec472 => 1.5.7): Extracting archive
- Upgrading yiisoft/yii2-composer (2.0.10 94bb3f6 => 2.0.10): Extracting archive
- Upgrading cebe/markdown (1.2.1 9bac5e9 => 1.2.1): Extracting archive
- Upgrading doctrine/collections (1.6.8 1958a74 => 1.6.8): Extracting archive
- Upgrading commerceguys/addressing (v1.3.0 566febd => v1.3.0): Extracting archive
- Upgrading symfony/polyfill-php80 (v1.25.0 4407588 => v1.25.0): Extracting archive
- Upgrading symfony/process (v5.4.7 38a44b2 => v5.4.7): Extracting archive
- Upgrading symfony/polyfill-php73 (v1.25.0 cc5db0e => v1.25.0): Extracting archive
- Upgrading symfony/finder (v6.0.3 8661b74 => v6.0.3): Extracting archive
- Upgrading symfony/polyfill-mbstring (v1.25.0 0abb51d => v1.25.0): Extracting archive
- Upgrading symfony/polyfill-ctype (v1.25.0 3088518 => v1.25.0): Extracting archive
- Upgrading symfony/filesystem (v6.0.7 6c9e4c4 => v6.0.7): Extracting archive
- Upgrading symfony/polyfill-intl-normalizer (v1.25.0 8590a5f => v1.25.0): Extracting archive
- Upgrading symfony/polyfill-intl-grapheme (v1.25.0 81b86b5 => v1.25.0): Extracting archive
- Upgrading symfony/string (v6.0.3 522144f => v6.0.3): Extracting archive
- Upgrading psr/container (2.0.2 c71ecc5 => 2.0.2): Extracting archive
- Upgrading symfony/service-contracts (v3.0.1 e517458 => v3.0.1): Extracting archive
- Upgrading symfony/deprecation-contracts (v3.0.1 26954b3 => v3.0.1): Extracting archive
- Upgrading symfony/console (v5.4.7 9002752 => v5.4.7): Extracting archive
- Upgrading seld/phar-utils (1.2.0 9f3452c => 1.2.0): Extracting archive
- Upgrading seld/jsonlint (1.9.0 4211420 => 1.9.0): Extracting archive
- Upgrading react/promise (v2.9.0 234f8fd => v2.9.0): Extracting archive
- Upgrading psr/log (1.1.4 d49695b => 1.1.4): Extracting archive
- Upgrading justinrainbow/json-schema (5.2.12 ad87d5a => 5.2.12): Extracting archive
- Upgrading composer/pcre (3.0.0 e300eb6 => 3.0.0): Extracting archive
- Upgrading composer/xdebug-handler (3.0.3 ced2996 => 3.0.3): Extracting archive
- Upgrading composer/spdx-licenses (1.5.6 a30d487 => 1.5.6): Extracting archive
- Upgrading composer/semver (3.3.2 3953f23 => 3.3.2): Extracting archive
- Upgrading composer/metadata-minifier (1.0.0 c549d23 => 1.0.0): Extracting archive
- Upgrading composer/ca-bundle (1.3.1 4c67918 => 1.3.1): Extracting archive
- Upgrading composer/composer (2.3.5 50c47b1 => 2.3.5): Extracting archive
- Upgrading paragonie/random_compat (v9.99.100 996434e => v9.99.100): Extracting archive
- Upgrading psr/http-message (1.0.1 f6561bf => 1.0.1): Extracting archive
- Upgrading psr/http-client (1.0.1 2dfb5f6 => 1.0.1): Extracting archive
- Upgrading ralouphie/getallheaders (3.0.3 120b605 => 3.0.3): Extracting archive
- Upgrading psr/http-factory (1.0.1 12ac7fc => 1.0.1): Extracting archive
- Upgrading guzzlehttp/psr7 (2.2.1 c94a94f => 2.2.1): Extracting archive
- Upgrading guzzlehttp/promises (1.5.1 fe752ae => 1.5.1): Extracting archive
- Upgrading guzzlehttp/guzzle (7.4.2 ac1ec1c => 7.4.2): Extracting archive
- Upgrading league/oauth2-client (2.6.1 2334c24 => 2.6.1): Extracting archive
- Upgrading craftcms/oauth2-craftid (1.0.0.1 3f18364 => 1.0.0.1): Extracting archive
- Upgrading craftcms/server-check (2.1.4 c262ebd => 2.1.4): Extracting archive
- Upgrading ezyang/htmlpurifier (v4.14.0 12ab42b => v4.14.0): Extracting archive
- Upgrading yiisoft/yii2 (2.0.45 e2223d4 => 2.0.45): Extracting archive
- Upgrading symfony/polyfill-php72 (v1.25.0 9a14221 => v1.25.0): Extracting archive
- Upgrading symfony/polyfill-intl-idn (v1.25.0 749045c => v1.25.0): Extracting archive
- Upgrading symfony/mime (v6.0.7 74266e3 => v6.0.7): Extracting archive
- Upgrading psr/event-dispatcher (1.0.0 dbefd12 => 1.0.0): Extracting archive
- Upgrading symfony/event-dispatcher-contracts (v3.0.1 7bc61cc => v3.0.1): Extracting archive
- Upgrading symfony/event-dispatcher (v6.0.3 6472ea2 => v6.0.3): Extracting archive
- Upgrading doctrine/lexer (1.2.3 c268e88 => 1.2.3): Extracting archive
- Upgrading egulias/email-validator (3.1.2 ee0db30 => 3.1.2): Extracting archive
- Upgrading symfony/mailer (v6.0.7 f7343f9 => v6.0.7): Extracting archive
- Upgrading yiisoft/yii2-symfonymailer (2.0.3 77baddf => 2.0.3): Extracting archive
- Upgrading yiisoft/yii2-queue (2.3.4 ed30b5f => 2.3.4): Extracting archive
- Upgrading yiisoft/yii2-debug (2.1.19 84d20d7 => 2.1.19): Extracting archive
- Upgrading webonyx/graphql-php (v14.11.6 6070542 => v14.11.6): Extracting archive
- Upgrading voku/stop-words (2.0.1 8e63c0a => 2.0.1): Extracting archive
- Upgrading voku/portable-ascii (2.0.1 b56450e => 2.0.1): Extracting archive
- Upgrading symfony/polyfill-iconv (v1.25.0 f1aed61 => v1.25.0): Extracting archive
- Upgrading voku/portable-utf8 (6.0.4 f6c78e4 => 6.0.4): Extracting archive
- Upgrading voku/urlify (5.0.7 014b207 => 5.0.7): Extracting archive
- Upgrading voku/email-check (3.1.0 6ea8429 => 3.1.0): Extracting archive
- Upgrading webmozart/assert (1.10.0 6964c76 => 1.10.0): Extracting archive
- Upgrading phpdocumentor/reflection-common (2.2.0 1d01c49 => 2.2.0): Extracting archive
- Upgrading phpdocumentor/type-resolver (1.6.1 77a3251 => 1.6.1): Extracting archive
- Upgrading phpdocumentor/reflection-docblock (5.3.0 622548b => 5.3.0): Extracting archive
- Upgrading voku/arrayy (7.9.1 11509d5 => 7.9.1): Extracting archive
- Upgrading voku/anti-xss (4.1.39 64a59ba => 4.1.39): Extracting archive
- Upgrading defuse/php-encryption (v2.3.1 7788048 => v2.3.1): Extracting archive
- Upgrading voku/stringy (6.5.3 c453c88 => 6.5.3): Extracting archive
- Upgrading twig/twig (v3.3.10 8442df0 => v3.3.10): Extracting archive
- Upgrading true/punycode (v2.1.1 a4d0c11 => v2.1.1): Extracting archive
- Upgrading theiconic/name-parser (v1.2.11 9a54a71 => v1.2.11): Extracting archive
- Upgrading symfony/yaml (v5.4.3 e80f87d => v5.4.3): Extracting archive
- Upgrading symfony/var-dumper (v5.4.6 294e9da => v5.4.6): Extracting archive
- Upgrading symfony/http-client-contracts (v3.0.1 f752577 => v3.0.1): Extracting archive
- Upgrading symfony/http-client (v6.0.7 a7930c4 => v6.0.7): Extracting archive
- Upgrading seld/cli-prompt (1.0.4 b8dfcf0 => 1.0.4): Extracting archive
- Upgrading samdark/yii2-psr-log-target (1.1.3 ccb29ec => 1.1.3): Extracting archive
- Upgrading pixelandtonic/imagine (1.2.4.2 5ee4b6a => 1.2.4.2): Extracting archive
- Upgrading monolog/monolog (2.5.0 4192345 => 2.5.0): Extracting archive
- Upgrading moneyphp/money (v4.0.3 d945f77 => v4.0.3): Extracting archive
- Upgrading mikehaertl/php-shellcommand (1.6.4 3488d78 => 1.6.4): Extracting archive
- Upgrading illuminate/macroable (v9.9.0 25a2c6d => v9.9.0): Extracting archive
- Upgrading psr/simple-cache (3.0.0 764e0b3 => 3.0.0): Extracting archive
- Upgrading illuminate/contracts (v9.9.0 de08787 => v9.9.0): Extracting archive
- Upgrading illuminate/conditionable (v9.9.0 56b4ba1 => v9.9.0): Extracting archive
- Upgrading illuminate/collections (v9.9.0 03fc7ae => v9.9.0): Extracting archive
- Upgrading enshrined/svg-sanitize (0.15.4 e50b83a => 0.15.4): Extracting archive
- Upgrading elvanto/litemoji (3.0.1 acd6fd9 => 3.0.1): Extracting archive
- Upgrading creocoder/yii2-nested-sets (0.9.0 cb8635a => 0.9.0): Extracting archive
- Upgrading craftcms/cms (4.0.0-RC1 daac7c1 => 4.0.0-RC1): Extracting archive
- Installing nystudio107/craft-plugin-vite (4.0.0-beta.3): Extracting archive
- Installing nystudio107/craft-vite (4.0.0-beta.4): Extracting archive

Versions

• Plugin version: 4.0.0-beta.4
• Craft version: 4.0.0-beta@dev (also tried with ^4.0.0-alpha@dev)
• Composer version: 2.3.5

Question

I have spent hours pouring over all the documentation I can find, tweaking parameters, but cannot seem to get my Vite server running within my DDEV environment.

I have successfully run npm run dev / vite both on local and within my container. However, any url of the form 127.0.0.1:3000/... returns a 502, as does craft.ddev.site:3000/.... This happens whether I load the url manually or through twig: {{ craft.vite.script("src/ts/index.ts") }}. The markup generated by this tag seems to be correct: <script type="module" src="https://craft.ddev.site:3000/src/ts/index.ts"></script>

Also, I have confirmed through {{ craft.vite.devServerRunning() }} that the dev server is running, though if i make 'checkDevServer' => true,, the devServerRunning tag says that it's not. So not sure what to make of that. Anyway, below are my configs - let me know if something seems off, and Thanks!

vite.php

use craft\helpers\App;

return [
    'useDevServer' => App::env('CRAFT_ENVIRONMENT') === 'dev',
    'manifestPath' => '@webroot/dist/manifest.json',
    'devServerPublic' => App::env('PRIMARY_SITE_URL') . ':3000',
    'serverPublic' => App::env('PRIMARY_SITE_URL') . '/dist/',
    'errorEntry' => '',
    'cacheKeySuffix' => '',
    'devServerInternal' => 'http://localhost:3000',
    'checkDevServer' => false,
    'includeReactRefreshShim' => false,
    'includeModulePreloadShim' => true,
    // 'criticalPath' => '@webroot/dist/criticalcss',
    // 'criticalSuffix' =>'_critical.min.css',
];

vite.config.js

export default ({ command }) => ({
  base: command === 'serve' ? '' : '/dist/',
  build: {
    cssCodeSplit: false,
    emptyOutDir: true,
    manifest: true,
    outDir: './web/dist/',
    rollupOptions: {
      input: {
        app: './src/ts/index.ts',
      },
      output: {
        sourcemap: true,
      },
    },
  },
  plugins: [
    ViteRestart({
      restart: [
          './templates/**/*',
      ],
    }),
    mkcert(),
  ],
  server: {
    host: '0.0.0.0',
    port: 3000,
    https: true,
  },
  css: {
    postcss: postcssConfig,
  },
});

docker-compose.vite.yaml

version: '3.6'
services:
  web:
    ports:
      - '3000'
    environment:
      - HTTP_EXPOSE=${DDEV_ROUTER_HTTP_PORT}:80,${DDEV_MAILHOG_PORT}:8025,3001:3000
      - HTTPS_EXPOSE=${DDEV_ROUTER_HTTPS_PORT}:80,${DDEV_MAILHOG_HTTPS_PORT}:8025,3000:3000

src/ts/index.ts

import Alpine from 'alpinejs'
import '../css/index.css'
if (import.meta.hot) {
  import.meta.hot.accept(() => {
    console.log("HMR")
  });
}
window.Alpine = Alpine
Alpine.start()
alert('hello world')

Question

I'm trying out craft-vite with react component. The assets path which imported in react components are resolved fine in production build, but they aren't while dev server running. Is there any way I can solve it?

Thanks,

Example

#app.tsx

import React, { useState } from 'react'
import logo from './logo.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Hello Vite + React!!</p>

Question

Hi! I am having issues trying to run this using Homestead. When running npm run dev I can view the site, see my JS and CSS working, and in the browser console can see [vite] connecting..., then [vite] server connection lost. polling for restart..., and then finally an error WebSocket network error: The operation couldn’t be completed. Connection refused. It then tries to reload and this repeats until I stop it.

As I'm running it via Homestead, do I need to use the devServerInternal and checkDevServer options? I'm not really sure what to put in there or what I'd need to configure on the Homestead VM.

My config files are below. Apologies if I'm being stupid.

Thanks! Plugin looks great and am excited to try Vite.

Additional context

// vite.php
<?php

use craft\helpers\App;

return [
    'useDevServer' => App::env('ENVIRONMENT') === 'dev',
    'manifestPath' => '@webroot/dist/manifest.json',
    'devServerPublic' => 'http://localhost:3000/',
    'serverPublic' => App::env('PRIMARY_SITE_URL') . '/dist/',
    'errorEntry' => '',
    'cacheKeySuffix' => '',
    'devServerInternal' => '',
    'checkDevServer' => false,
];

// vite.config.js
import ViteRestart from 'vite-plugin-restart';
export default ({ command }) => ({
  base: command === 'serve' ? '' : '/dist/',
  build: {
    manifest: true,
    outDir: 'craft/web/dist/',
    rollupOptions: {
      input: {
        app: 'src/js/app.js',
      }
    },
  },
  plugins: [
    ViteRestart({
      reload: [
          '/craft/templates/**/*',
      ],
    }),
  ],
});

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

Importing styles via Javascript causes a flash of unstyled content on every page load in development and creates difficult-to-reproduce differences in styling and animation behavior between development and production versions of the site.

Describe the solution you would like

The ability to reference styles in Twig separately from scripts, in the same way you can do in a standard, non-Craft Vite setup.

Additional context

I've been building projects with Vite outside of Craft since the very early days of Vite 2, and I almost always pull my styles into the index.html file directly vs. importing them into my Javascript. For instance…

<!-- in index.html -->
<link rel='stylesheet' href='/src/styles/index.scss'>

vs.

// in index.js
import '/src/styles/index.scss';

This works perfectly, is a fully-supported behavior in Vite, and has a significant advantage over importing them in your Javascript entry file in that the injection of these styles are not blocked by Javascript and so there is no FOUC on every single page load in development. Importing in this way also does not prevent you from preprocessing your styles (you can see that I'm importing a Sass file above) and I have yet to find a single significant downside to this approach unless you are using some sort of CSS-in-JS approach which requires your styles to be imported via JS.

The FOUC content that appears on every page refresh in development isn't just annoying, it actually breaks animations and transitions that are supposed to happen immediately on page load, because those elements already exist and are rendered by the time the styles load and apply any initial state to them.

Relying on Javascript to import your styles also creates a distinct difference in behavior in development vs production, which makes it harder to troubleshoot edge-case issues around styling and animation behavior.

It would be amazing if Craft Vite would allow me to insert my styles in Twig separately from my scripts in the same way I'm able to do in a standard Vite setup.

<head>
{{ craft.vite.link("src/styles/index.scss") }}
{{ craft.vite.script("src/scripts/index.ts") }}
</head>

It looks like similar requests have been made in other issues, but none of them for the exact same reasons as mine. Hopefully this rationale makes sense.

Thank you for your hard work on bringing Vite to Craft!