Closed cavellblood closed 3 years ago
I'm not sure I understand what you're saying here? Vite is Vite... what exactly isn't working?
Good question. I accidentally posted this issue before I was ready to publish it. The part that isn't working is that it's not importing the Flickity
script in the craft version but it will in a new Vite scaffolding. If you do a console.log(Flickity)
with the Vite scaffolding it will show this:
But with the craft setup it will show this:
I think the critical part is that with the vanilla scaffolding setup it's actually processing the file as seen here:
import __vite__cjsImport1_flickity from "/node_modules/.vite/flickity.js?v=a7f2a681"; const Flickity = __vite__cjsImport1_flickity.__esModule ? __vite__cjsImport1_flickity.default : __vite__cjsImport1_flickity
This shouldn't have anything to do with the Craft Vite plugin but rather whatever your Vite config is?
Try comparing the two vite.config.js from both projects.
Right. I've tried removing as much as I can from the craft project so that it will still work and it doesn't. The vanilla project doesn't even have a vite.config.js
file.
I was wondering if it had something to do with it needing to interact with the back end. Perhaps this is more of a vitejs issue/question than a question for your craft setup.
Can't imagine how that could ever be the case, Vite isn't even aware of the backend.
It looks to me like that in one case it's trying to do a CJS import of an old library, and in another case, it's trying to do an ESM import, and thus not finding default
Well I think it is aware of the backend with the Craft setup: https://vitejs.dev/guide/backend-integration.html
build: {
emptyOutDir: true,
manifest: true,
outDir: '../cms/web/dist',
rollupOptions: {
input: {
main: '/src/main.js',
},
output: {
sourcemap: true
},
}
},
That's right about the import. I'm not sure what's causing it not to process it the same way in the Craft project.
So I was wondering if something compiles differently if it has backend integration. Just a long shot. But that might be more of a question for Evan You?
Compare your vite.config.js
in the Craft project with the one generated by the Vite scaffolding.
The Vite scaffolding does not create a vite.config.js
. And this is the vite.config.js
from the Craft project which is the same as https://github.com/nystudio107/craft/blob/craft-vite/buildchain/vite.config.js:
import vue from '@vitejs/plugin-vue'
import legacy from '@vitejs/plugin-legacy'
import ViteRestart from 'vite-plugin-restart';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import critical from 'rollup-plugin-critical';
import path from 'path';
// https://vitejs.dev/config/
export default ({ command }) => ({
base: command === 'serve' ? '' : '/dist/',
build: {
emptyOutDir: true,
manifest: true,
outDir: '../cms/web/dist',
rollupOptions: {
input: {
app: '/src/js/app.ts',
},
output: {
sourcemap: true
},
}
},
plugins: [
critical({
criticalUrl: 'https://nystudio107.com',
criticalBase: '../cms/web/dist/criticalcss/',
criticalPages: [
{ uri: '/', template: 'index' },
],
criticalConfig: {
}
}),
legacy({
targets: ['defaults', 'not IE 11']
}),
nodeResolve({
moduleDirectories: [
path.resolve('./node_modules'),
],
}),
ViteRestart({
reload: [
'../src/templates/**/*',
],
}),
vue(),
// Static Asset Fixer, see: https://github.com/vitejs/vite/issues/2394
{
name: 'static-asset-fixer',
enforce: 'post',
apply: 'serve',
transform: (code, id) => {
return {
code: code.replace(/\/src\/(.*)\.(svg|jp?g|png|webp)/g, 'http://localhost:3000/src/$1.$2'),
map: null,
}
},
},
],
publicDir: '../src/public',
resolve: {
alias: {
'@': '/src',
},
},
server: {
host: '0.0.0.0',
}
});
I'll maybe post an issue about it over here: https://github.com/vitejs/vite/issues
You have no vite.config.js
in the scaffolding at all? I'm not sure I understand? Show me exactly how you're creating this Vite app?
In step 1 of the Expected Behavior of the issue I posted this:
npm init vite@latest my-vanila-app --template vanilla
cd my-vanilla-app
npm i flickity
Also you could try it with npm i jquery
and get the same results.
And then try to import jQuery from 'jquery'
and console.log(jQuery)
.
I apologize that I edited my original post so many times. That could be a cause of a lot of the confusion here. I accidentally hit the wrong keystroke and it submitted the post before I was done with it.
Okay, so it's using whatever the default internal config is, then, if that file doesn't exist.
Right.
If you copy the vite.config.js
from the Craft scaffolding to your newly created vanilla scaffolding, what happens (will need to update the package.json
, etc. too?
Good question. Hadn't tried that yet. I'll give that a try.
I work with @cavellblood, here are my thoughts on the issue. (Good suggestion to test, BTW.)
It seems that the Vite build does not work with any CommonJS-only NPM package. Most packages support ES Modules, but there are a few holdouts like jQuery and flickity.
You can tell if a package supports ES modules by looking at the package.json
: it should have a field like module
, jsnext:main
, or jsnext
. This is mentioned in the Vite documentation. Originally we had the issue with Flickity, but then we went looking for a more popular CommonJS-only package and landed on jQuery.
I think the default Vite config handles this correctly, but the config in this repository somehow breaks it. We have tested creating a brand-new project from the craft-vite
branch and attempting to import jQuery, but it fails in the same way.
My theory is that somehow the files are not getting processed by @rollup/plugin-commonjs
, which Vite uses internally. But I have no idea why that might be.
I think the default Vite config handles this correctly, but the config in this repository somehow breaks it. We have tested creating a brand-new project from the craft-vite branch and attempting to import jQuery, but it fails in the same way
This sounds right to me!
When I encounter this, I usually look for more modern, ESM packages... there is CommonJS plugin but I think this goes against the "Vite way" to some extent.
My theory is that somehow the files are not getting processed by @rollup/plugin-commonjs, which Vite uses internally. But I have no idea why that might be.
Interesting, I thought you had to explicitly use that plugin. If that's the case, then likely something in the config or in one of the plugins is causing it.
I'd start by disabling the plugins until it works.
I'd be curious to hear the results here, to see if it's some config setting or some plugin that is interfering in the CommonJS loader that would normally be used.
lmk if you folks managed to figure any of this out. I may try myself as well.
Will do. I plan on working on it this afternoon.
Well I was able to get jQuery to work this afternoon but not Flickity. Kind of strange. Some things that I noticed that helped was to remove the leading slash everywhere this string appeared: /src/js/app.js
, namely:
config/vite.php
critical-css.twig
vite.config.js
I then updated the app.js
contents to this:
import $ from "jquery";
console.log($);
$("#component-container").html("It Works!");
And that worked. But I wasn't able to get Flickity working. I'll get back to this on Monday.
Ok so I have some results. I just cloned down a clean version of the nystudio107/craft to verify what works with minimal changes. I just had to change one character for it to work: remove the leading slash on line 17 of vite.config.js
.
export default ({ command }) => ({
base: command === 'serve' ? '' : '/dist/',
build: {
emptyOutDir: true,
manifest: true,
outDir: '../cms/web/dist',
rollupOptions: {
input: {
app: 'src/js/app.ts', // <-- This used to be `/src/js/app.ts`
},
output: {
sourcemap: true
},
}
},
...
}
I also had to declare the modules in the shims.d.ts
or else it wouldn't work.
declare module "app";
declare module "jquery";
declare module "flickity";
I'm not super familiar with TypeScript so this was probably a beginners mistake.
Wow, that's crazy. Nice find!!
Did you also need to change it here: https://github.com/nystudio107/craft/blob/craft-vite/cms/templates/_boilerplate/_partials/critical-css.twig#L12
{{ craft.vite.script("/src/js/app.ts", false) }}
?
I tried changing it there and it didn't seem to have any effect. I thought that maybe your craft-vite plugin took all that into account.
It worked with the leading slash.
I should note that I did all these tests when make dev
was running. I didn't but should've run these tests after doing a make build
to verify. I can try that now but I'm guessing it would work.
yep might as well make build
and give it a whirl that way too
Also, just curious about the best way to test built files. Here's what I currently do:
make dev
make build
in a new window.project_vite_1
container so that that vite server is no longer running.Is that the best way to test built files?
You can do it that way, or you can stop the vite container with:
docker-compose stop vite
but I typically just leave it running and do
make build
as you've suggested
That's one of the selling points of Docker-izing things, you can spin up as many instances as you need/want
Ok.
What's really odd now is that when I clone down cavellblood/craft
Vite doesn't seem to be working at all. It says it's running in the terminal but on the front end all I see is this:
Maybe there's something awry with my machine. I'll try cloning down your repo to see if I have the same issue.
It's not loading the app.ts
file anymore.
Same thing is happening when I clone your repo down. Time to restart some things.
I'm not sure what happened. I've cloned your repo down twice and I can't get the front end to load. Everything was working just fine a moment ago. I'll have to try a different computer. Sorry that this verification is taking longer than expected. I've even removed old images from Docker after quitting the project.
Anyway, I'll get back to you when I get it working.
I made you change to the Spoke and Gear P&T demo site that I converted over to Vite, and it's working as expected:
https://github.com/nystudio107/spoke-and-chain/commit/b9a896c18555a85b1cde441b6ac1dc0f1baa2afd
(but it has always worked -- just noting that nothing broke)
Right. Well I just was able to get things working again. I had to adjust the path in config/vite.php
and criticalcss.twig
to ../src/js/app.ts
. I'm adding it to the PR.
Looks like the right way to do this is just change it to this in buildchain/vite.config.js
:
input: {
app: './src/js/app.ts',
},
...then you don't need to change anything anywhere else, at least in my testing.
Ok. Good to know. I should've tried that. I'll have to test that later but I think we can close this issue now.
I'm going to do a little more testing but you've been fantastic, thank you for digging into this!
I was able to get Europa Museum ported over to Vite, thanks to this finding!
https://github.com/nystudio107/europa-museum/tree/docker-vite
That's great!
So did you eventually just settle on this change:
input: {
app: './src/js/app.ts',
},
I guess I could take a look at that repo to see what you did.
I see the changes you made here: https://github.com/nystudio107/craft/commit/e213d4f3ce8497c875c07b5480f45cf405f48790
You got it!
Describe the bug
Vite in the
craft-vite
branch of this repo does not behave the same way when importing Flickity (or perhaps other packages as well) as it does in a new scaffolding when creating a new Vite app. I understand that it should be have a little differently because it is set up to work with Craft CMS but I would expect theimport
statement to behave similarly as it would with a new Vite app.To reproduce
Steps to reproduce the behaviour:
vite-craft
branch of this repo.Run the following command in the
buildchain
directory:Then edit
/src/js/app.ts
by adding these two lines:Now the
app.ts
file should look like this:Save the file and check the reloaded file contents in the browsers inspector. It should look similar to this:
Expected behaviour
I would expect that it would behave like a new Vite scaffolding with the following steps.
Open up the project in your IDE and edit the
main.js
file by adding these two lines at the top (or really anywhere in it. It all has the same effect):Now the
main.js
file should look like this:npm run dev
Check the output of the
main.js
file in the network tab of the browsers inspector. It should look similar to this:I would expect the output of the import statement to look similar to this but it doesn't even look like it's processing it in the Craft setup:
but instead it is just like this: