@alex32 did you find a solution to this? i have the same issue, using a theme which uses some standard jquery scripts not modules and it gives me these errors?
Jun 27, 2024
2
Level 2
Vite | cannot read property of undefined
My app works fine with standard .css and .js files, but when I bundle these assets I get:
- require is not defined
- cannot read property of undefined | latest error
and JS doesn't work.
I've seen few posts about this, nothing worked. Something wrong with vite.config.js ?
Please help. Thanks
- Laravel 11
- Vite 5
I've installed jQuery with npm:
npm install jquery
My jQuery scrips are in separate files (not inline), so I don't use:
<script type="module">
</script>
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import commonjs from '@rollup/plugin-commonjs';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
],
refresh: true,
}),
commonjs(/* options */),
],
build: {
commonjsOptions: { transformMixedEsModules: true }
}
});
resources/js/app.js
import './bootstrap';
import '../../public/asset/js/jquery.js';
import '../../public/asset/js/apphelp.js';
import '../../public/asset/js/bootstrap.min.js';
import '../../public/asset/js/slick/slick.min.js';
import '../../public/asset/js/shuffle.min.js';
import '../../public/asset/js/bootstrap4-toggle.min.js';
import '../../public/asset/js/main-script.js';
resources/css/app.css
@import url('../../public/asset/css/fontawesome-free/css/all.min.css');
@import url('../../public/asset/css/bootstrap.min.css');
@import url('../../public/asset/css/icofont.min.css');
@import url('../../public/asset/js/slick/slick.min.css');
@import url('../../public/asset/js/slick/slick-theme.css');
@import url('../../public/asset/css/main-style.css');
@import url('../../public/asset/css/bootstrap4-toggle.min.css');
@tailwind base;
@tailwind components;
@tailwind utilities;
[x-cloak] {
display: none;
}
npm run build | no errors
63 modules transformed.
public/build/assets/slick-BlUtDIuC.woff 1.38 kB
public/build/assets/slick-DWzRxEMf.ttf 1.89 kB
public/build/assets/slick-Bi9J8BMx.eot 2.05 kB
...
public/build/assets/fa-solid-900-B4ZZ7kfP.svg 918.99 kB ¦ gzip: 254.77 kB
public/build/assets/app-B1mTqRJP.css 371.21 kB ¦ gzip: 68.97 kB
public/build/assets/app-CCnop53d.js 350.10 kB ¦ gzip: 111.20 kB
built in 4.17s

[1] https://laravel.com/docs/11.x/vite#main-content
[2] https://laracasts.com/discuss/channels/laravel/jquery-with-vite-jquery-is-not-a-function
[3] https://laracasts.com/discuss/channels/vite/laravel-vite-jquery?page=1&replyId=825471
Please or to participate in this conversation.