I got Uncaught SyntaxError: Unexpected token error when I try to add js file

[sergeynilov]

Hello I try to add JS support into my laravel/framework 9.1 admin area with orchid/crud 3.8 and orchid/platform 13.6 app
and reading
https://orchid.software/en/docs/javascript/#stimulus

I do next:
As My project have vite.config.js file I added :

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/js/dashboard.js'  // I ADDED THIS LINE
            ],
            refresh: true,
        }),
    ],
});

I added line into config/platform.php file :

'resource' => [
    'stylesheets' => [],
    'scripts'     => [
        'dashboard.js'  // I ADDED THIS LINE
    ],
],

I have a screen file app/Orchid/Screens/CategoryCrudScreen.php and I want to attach JS file to it.

In file app/Providers/AppServiceProvider.php I added :

public function boot(Dashboard $dashboard)
{
    $dashboard->registerResource('scripts','dashboard.js');
    ...

I added file resources/js/controllers/category.js with content :

alert('category.js')

export default class extends window.Controller {

    static get targets() {
        return [ "name", "output" ]
    }

    greet() {
        this.outputTarget.textContent =
            'Category, ${this.nameTarget.value}!'
    }

```}


and in resources/js/dashboard.js file :

import CategoryController from "./controllers/category"

console.log('resources/js/dashboard.js::')

application.register("category", CategoryController);

I also created resources/views/category.blade.php with content :

<button data-action="click->category#greet">
    Greet
</button>

<span data-target="category.output">

I am not sure actually is it correct file ?

I run local server and command
`npm run dev
`
But I got errors :

Uncaught SyntaxError: Unexpected token '<' (at VM717 dashboard.js:1:1)
dashboard.js:1 Uncaught SyntaxError: Unexpected token '<' (at dashboard.js:1:1)

Clicking on error I got opened : https://prnt.sc/C3ENvQzn8inc

What is wrong and how it can be fixed ?

[tabuna]

Hi @sergeynilov, It looks like you are trying to load a 404 HTML page

• Your compiled file must be in the public/* directory
• The path must be either relative or absolute: /dashboard.js or https://example.com/dashboard.js

[sergeynilov]

Yes, but my project has no webpack.mix.js file ,but I have vite.config.js

So I do not know to run commands :

let mix = require('laravel-mix');

mix.js('resources/js/dashboard.js', 'public/js')

Looks like that is the point ?

How to use orchid/platform with vite.config.js?
Do you have support for vite.config.js?

[sergeynilov]

1. I added line with resources/js/dashboard.js into vite.config.js (I supplied code above)
   But I got errors anyway...

2. Seacrhing in net I found some decisions ( https://stackoverflow.com/questions/73331352/how-import-own-js-file-into-vite ) like
   adding line @Vite('resources/js/test.js') directive into app.blade.php file.

But in my project there is only 1 app.blade.php file :

vendor/orchid/platform/resources/views/app.blade.php

Can I move it under my app project and edit it? If yes in which way?

[sergeynilov]

Hi @tabuna,
Any Ideas how that can be salved ?

[tabuna]

I don't see a problem with Vite, we just need to compile your file to be ready for production

npm run build

[sergeynilov]

Usually when I work under dev :
I run command :
npm run dev
and looks like it does not copy any js files under public subdirectories...

I try to run production :

npm run build

> build
> vite build

vite v3.2.4 building for production...
✓ 58 modules transformed.
public/build/manifest.json            0.25 KiB
public/build/assets/app.7c3c19f8.js   0.00 KiB / gzip: 0.02 KiB
public/build/assets/app.334e7359.js   90.63 KiB / gzip: 33.07 KiB
[vite-plugin-static-copy] Copied 1 items.

and I found my file under “public/build/js/custom.js/custom.js” path...

1. Looks like I can make accessible its function on my screen pages with code in
   app/Providers/AppServiceProvider.php :

$dashboard->registerResource('scripts','/build/js/custom.js/custom.js');
?
2) Does it mean that I have to run npm run build after any changes in my resources/js/custom.js file ?

[methos02]

I don't know if you had found the solution, i had the same probleme and i solved it like this :
In the platform.php in config:
Before return declare an instance of vite ( $vite = new Vite())

In the config array, change the ressource key like this :
'resource' => [ 'stylesheets' => [$vite->asset('resources/[path to my css]')], 'scripts' => [$vite->asset('resources/[path to my js]')], ],
And after this the script is loaded but i can't import other script, i have an error in the console :
Uncaught SyntaxError: Cannot use import statement outside a module (at dashboard.js:1:1)

So for the moment no import in my dashboard script :s

[plamenradev]

I had the same problem as @methos02 and solved it as follow:

1. Create dashboard.js and controllers/hello.js under public/js folder as it is described in the documentation -> scenario with Vite;
2. Update config/platform.php as you add:
   'vite' => [ 'public/js/dashboard.js', ],
3. Create hello.blade.php or whatever blade file you will use in your layout with the sample code from the documentation;
4. And here comes the tricky moment - you need to update your app.blade.php, as you, probably like me, have no @Vite directive in the default app.blade.php file (I'm using Orchid v13.10). So all you need to do is to copy the file vendor/orchid/platform/resources/views/app.blade.php into the resources/views/vendor/platform/ and insert just before tag the following code:

@if(!empty(config('platform.vite', [])))
     @vite(config('platform.vite'))
@endif

5. In the terminal run npm install to install all the dependencies;
6. Run npm run dev for development environment or npm run build for production and Voilà, it is working!

The documentation is updated for v14, where you have @Vite directive by default in the app.blade.php file.

@tabuna will be wonderful if somehow you have different documentation for different major platform versions. Thanks for your hard work, Orchid is amazing!