Install the GridStack : Gridstack is not defined

Laravel 10 (blades, vite)

I just installed gridstack using npm: npm install gridstack -D

In app.js I'm importing it

import {GridStack} from "gridstack";
window.GridStack = GridStack;

And using it inside Blade:

<!DOCTYPE html>
  ...
  @vite(['resources/sass/app.scss', 'resources/js/app.js'])
  </head>
  <body>
    ...
    <script>
		GridStack.init();
    </script>
  </body>
</html>

But still getting error in console "Uncaught ReferenceError: GridStack is not defined". What is wrong with that?

DreadfulCthulhu

3 years ago

Best Answer

Level 4

Not ideal, but solved:

npm install gridstack -D

npm i vite-plugin-static-copy -D

Nothing in app.js

In vite.config.js:

...
import {viteStaticCopy} from "vite-plugin-static-copy";
...
export default defineConfig({
   ...
   plugins: [
      ...
      viteStaticCopy({
        targets: [
            {
                src: 'node_modules/gridstack/dist/gridstack-all.js',
                dest: 'js'
            },
            {
                src: 'node_modules/gridstack/dist/gridstack.min.css',
                dest: 'css'
            },
            {
                src: 'node_modules/gridstack/dist/gridstack-extra.min.css',
                dest: 'css'
            },
        ]
    })
  ],
});

in layout file are stacks for styles and scripts

<!DOCTYPE html>
  ...
  @vite(['resources/sass/app.scss', 'resources/js/app.js'])
  @stack('styles')
  </head>
  <body>
    ...
    @stack('scripts')
  </body>
</html>

in component blade file just:

...
<div class="grid-stack">
  ...
</div>
...
@push('styles')
    <link rel="stylesheet" href="{{ Vite::asset('css/gridstack.min.css') }}">
    <link rel="stylesheet" href="{{ Vite::asset('css/gridstack-extra.min.css') }}">
@endpush

@push('scripts')
    <script src="{{ Vite::asset('js/gridstack-all.js') }}"></script>
    <script>
        GridStack.init({column: 6});
    </script>
@endpush

And working just fine.

binarystarr

1 year ago

Level 4

hey there - im hitting the same issue. Wondered if you found another solution or if the above is still the best option? Its working for me so all good.

b14r

1 year ago

Level 4

Answering your question, @binarystarr:

You add this to your bootstrap.js:

import {GridStack} from 'gridstack';
window.GridStack = GridStack;

then on your blade file which should be running @vite(['resources/css/app.css', 'resources/js/app.js']) you need to make sure that your page is fully loaded before messing with gridstack so you can do something like this:

document.addEventListener('DOMContentLoaded', function () {
        //initialize the grid
        var grid = GridStack.init();
        //load the items
        grid.load([
            {x: 0, y: 0, w: 2, h: 2, content: 'my first widget'},
            {x: 1, y: 0, w: 2, h: 2, content: 'another longer widget!'}
        ]);
    });

Modern web development is a joke, it's an affront to God and all of his creation.

Please or to participate in this conversation.