Getting CORS and mim-type not allowed error with ddev

[ousiadigital]

Describe the bug

When installing CraftCMS and Craft-Vite and configuring it as indicated in the documentation a CORS error occurs.

To reproduce

Steps to reproduce the behaviour:

1. Setup CraftCMS with ddev as recommended in the official docs.
2. Create Vite with Typescript scaffold in another folder and move package.json, tsconfig.json and src folder to project root folder
3. Install and configure craft-vite plugin according to documentation

Expected behaviour

Assets should get loaded with the local dev website

Screenshots

If applicable, add screenshots to help explain your problem.

Versions

• Plugin version: 4.0.6
• Craft version: 4.4.0

Never had any issues when using a docker environment with a bundler so far. I have read that there is a workaround to allow all cross origin assets in the nginx config of the ddevs containers, but this didn't work.

Here is my setup:

tsconfig.json

{ "compilerOptions": { "target": "ES2020", "useDefineForClassFields": true, "module": "ESNext", "lib": ["ES2020", "DOM", "DOM.Iterable"], "skipLibCheck": true,

/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,

/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true

}, "include": ["./src"] }

vite.config.js

export default ({command}) => ({ base: command === 'serve' ? '' : '/dist/', build: { manifest: true, outDir: './web/dist/', rollupOptions: { input: { app: './src/js/app.ts', } }, }, server: { fs: { strict: false }, host: '0.0.0.0', origin: 'http://localhost:3000', port: 3000, strictPort: true, } });

vite.php - config file

<?php

use craft\helpers\App;

return [ 'checkDevServer' => true, 'devServerInternal' => 'http://localhost:3000', 'devServerPublic' => App::env('PRIMARY_SITE_URL') . ':3000', 'serverPublic' => App::env('PRIMARY_SITE_URL') . '/dist/', 'useDevServer' => App::env('ENVIRONMENT') === 'dev' || App::env('CRAFT_ENVIRONMENT') === 'dev', ];

[khalwat]

This isn't going to be an issue with the Craft Vite plugin, but rather your Vite setup.

If you find a solution, please post it here, and I will update the documentation as needed.

[ousiadigital]

I see. I will update it once I found a solution for it.

Could you provide a working example how your plugin works together with CraftCMS and ddev please? As a git repository or as a sandbox? That would be great =)

I couldn't quite figure out how to get your plugin working.

[khalwat]

All the plugin does is provide a bridge to Twig -- everything else is Vite itself. Here's a working example:

https://github.com/nystudio107/devmode/tree/develop/buildchain

[ousiadigital]

Thanks for the example ... unfortunately it didn't run and I couln't figure out why. Guess my DevOps knowledge is very limited when I look at your setup ;)

Right now after 40 hours of trying to get it to work I think I will give up and use something different than Vite or ddev.

It's a pity though that there is no starter template with just clean Vite running with ddev out there =/

[khalwat]

Or here:

https://github.com/mandrasch/ddev-craftcms-vite