TypeError: laravel is not a function #187

ferberus · 2022-12-16T03:49:03Z

Laravel Vite Plugin Version: 0.7.2
Laravel Version: 9.4.0
Node Version: 16.18.1
NPM Version: 8.19.2
Host operating system: Windows
Web Browser & Version: Chrome 108.0.5359.124
Running in Sail / Docker: Docker

Description:

I'm using Laravel 9.x along with Inertia (Svelte). There is an issue when running npm run dev: error when starting dev server:
TypeError: laravel is not a function.

Steps To Reproduce:

Bellow is vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.js'],
            refresh: true,
        }),
        svelte({
            prebundleSvelteLibraries: true,
        }),
    ],
    
    optimizeDeps: {
        include: [
            '@inertiajs/inertia',
            '@inertiajs/inertia-svelte',
            "@inertiajs/progress",
        ]
    }
});

The text was updated successfully, but these errors were encountered:

fpolli · 2022-12-16T14:01:37Z

I have the same issue. lrfahmi and I are following the same path. We both first had an error that the svelte module could not be resolved because our package.json file was missing "type": "module". We added that, and then this error was the result.

My vite.config.js:

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
plugins: [
laravel({
input: ["resources/js/app.js"],
refresh: true,
valetTls: 'seeds.test'
}),
svelte({
/* plugin options */
})
],

resolve: {
alias: {
'ziggy': '/vendor/tightenco/ziggy/src/js'
},
},

css: {
preprocessorOptions: {
scss: {
additionalData: '@use "src/variables.scss" as *;',
},
},
},
});

My package.json:

{
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"@sveltejs/vite-plugin-svelte": "^2.0.2",
"axios": "^1.1.2",
"bulma": "^0.9.4",
"laravel-vite-plugin": "^0.7.2",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"sass": "^1.53.0",
"svelte-preprocess": "^4.10.7",
"vite": "^4.0.0"
},
"dependencies": {
"@inertiajs/inertia": "^0.11.1",
"@inertiajs/inertia-svelte": "^0.8.0",
"@inertiajs/progress": "^0.2.7"
}
}

driesvints · 2022-12-16T15:12:42Z

@fpolli I see you're using

"type": "module",

That's not a valid setting for a Laravel app. Please revert that and try again. @lrfahmi are you also using that?

fpolli · 2022-12-16T15:32:33Z

If I do that, then I go right back to my first error, where NPM cannot resolve the svelte-vite-plugin.

It sounds like you are saying that Svelte cannot be used in a Laravel app. At least with Vite.

This is all very confusing.

Does this mean that Laravel is a CommonJS environment and not ES6?

driesvints · 2022-12-16T15:34:39Z

I have no idea about all that sorry. I just can confirm that you cannot use "type": "module", in a Laravel app.

driesvints · 2022-12-16T15:35:40Z

Basically because a Laravel app is... well an app, not a module.

fpolli · 2022-12-16T15:52:48Z

Thank you. That is helpful information. As you can tell, I am just learning all of this.

Direct support for Svelte as you have for React and Vue would be cool.

driesvints · 2022-12-16T15:58:07Z

Gonna close this for now but feel free to still reply @lrfahmi

ferberus · 2022-12-16T18:37:30Z

I'll try to start with the configuration details:

# package.json

...
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@inertiajs/inertia": "^0.11.1",
        "@inertiajs/inertia-svelte": "^0.8.0",
        "@inertiajs/progress": "^0.2.7",
        "@sveltejs/vite-plugin-svelte": "^2.0.2",
        "@tailwindcss/forms": "^0.5.3",
        "autoprefixer": "^10.4.13",
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.7.2",
        "lodash": "^4.17.19",
        "postcss": "^8.4.20",
        "svelte": "^3.55.0",
        "tailwindcss": "^3.2.4",
        "vite": "^4.0.0"
    },
...

# vite.config.js

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.js'],
            refresh: true,
        }),
        svelte({
            prebundleSvelteLibraries: true,
        }),
    ],
    
    optimizeDeps: {
        include: [
            '@inertiajs/inertia',
            '@inertiajs/inertia-svelte',
            '@inertiajs/inertia-progress',
        ]
    }
});

Is not working. When package.json is added "type": "module", i get an error message:

failed to load config from /home/fahmi/repos/..../laravel/vite.config.js
error when starting dev server:
TypeError: laravel is not a function

If without "type": "module", i get an error message:

✘ [ERROR] [plugin externalize-deps] Failed to resolve entry for package "@sveltejs/vite-plugin-svelte". The package may have incorrect main/module/exports specified in its package.json: No known conditions for "." entry in "@sveltejs/vite-plugin-svelte" package
    node_modules/esbuild/lib/main.js:1355:27:
      1355 │         let result = await callback({

Temporary Solution

It can take hours or even days to solve the problem. Conflicts between one package and another. The solution I reverted to the previous running version of the packages with vite 3.0.0.

Change package.json to rollback packages version:

"@sveltejs/vite-plugin-svelte": "^1.4.0"
"laravel-vite-plugin": "^0.7.1"
"vite": "^3.0.0"

...
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@inertiajs/inertia": "^0.11.1",
        "@inertiajs/inertia-svelte": "^0.8.0",
        "@inertiajs/progress": "^0.2.7",
        "@sveltejs/vite-plugin-svelte": "^1.4.0",
        "@tailwindcss/forms": "^0.5.3",
        "autoprefixer": "^10.4.13",
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.7.1",
        "lodash": "^4.17.19",
        "postcss": "^8.4.20",
        "svelte": "^3.55.0",
        "tailwindcss": "^3.2.4",
        "vite": "^3.0.0"
    },
...

The laravel application is up and back to work. Hope this solution helps, until there is an official solution from the publishers. Cheers.

fpolli · 2022-12-16T18:44:50Z

Thank you for this! I hope the developers do solve it, because each side seems to think there is no problem.

fpolli · 2022-12-17T01:31:50Z

Looks to me like Vite and Svelte have moved on to ES6 modules and Laravel is still in CommonJS land.

…

On Fri, Dec 16, 2022 at 10:37 AM Fahmi L. Ramdhani ***@***.***> wrote: I'll try to start with the configuration details: # package.json ... "private": true, "type": "module", "scripts": { "dev": "vite", "build": "vite build" }, "devDependencies": { ***@***.***/inertia": "^0.11.1", ***@***.***/inertia-svelte": "^0.8.0", ***@***.***/progress": "^0.2.7", ***@***.***/vite-plugin-svelte": "^2.0.2", ***@***.***/forms": "^0.5.3", "autoprefixer": "^10.4.13", "axios": "^1.1.2", "laravel-vite-plugin": "^0.7.2", "lodash": "^4.17.19", "postcss": "^8.4.20", "svelte": "^3.55.0", "tailwindcss": "^3.2.4", "vite": "^4.0.0" }, ... # vite.config.js import { defineConfig } from 'vite'; import { svelte } from ***@***.***/vite-plugin-svelte'; import laravel from 'laravel-vite-plugin'; export default defineConfig({ plugins: [ laravel({ input: ['resources/js/app.js'], refresh: true, }), svelte({ prebundleSvelteLibraries: true, }), ], optimizeDeps: { include: [ ***@***.***/inertia', ***@***.***/inertia-svelte', ***@***.***/inertia-progress', ] } }); Is not working. When package.json is added "type": "module", i get an error message: failed to load config from /home/fahmi/repos/..../laravel/vite.config.js error when starting dev server: TypeError: laravel is not a function If without "type": "module", i get an error message: ✘ [ERROR] [plugin externalize-deps] Failed to resolve entry for package ***@***.***/vite-plugin-svelte". The package may have incorrect main/module/exports specified in its package.json: No known conditions for "." entry in ***@***.***/vite-plugin-svelte" package node_modules/esbuild/lib/main.js:1355:27: 1355 │ let result = await callback({ Temporary Solution It can take hours or even days to solve the problem. Conflicts between one package and another. The solution I reverted to the previous running version of the packages with vite 3.0.0. Change package.json to rollback packages version: 1. ***@***.***/vite-plugin-svelte": "^1.4.0" 2. "laravel-vite-plugin": "^0.7.1" 3. "vite": "^3.0.0" ... "private": true, "scripts": { "dev": "vite", "build": "vite build" }, "devDependencies": { ***@***.***/inertia": "^0.11.1", ***@***.***/inertia-svelte": "^0.8.0", ***@***.***/progress": "^0.2.7", ***@***.***/vite-plugin-svelte": "^1.4.0", ***@***.***/forms": "^0.5.3", "autoprefixer": "^10.4.13", "axios": "^1.1.2", "laravel-vite-plugin": "^0.7.1", "lodash": "^4.17.19", "postcss": "^8.4.20", "svelte": "^3.55.0", "tailwindcss": "^3.2.4", "vite": "^3.0.0" }, ... The laravel application is up and back to work. Hope this solution helps, until there is an official solution from the publishers. Cheers. — Reply to this email directly, view it on GitHub <#187 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABJXG7TO7SRIMZJISYCWWHTWNSZHLANCNFSM6AAAAAATAONNVI> . You are receiving this because you were mentioned.Message ID: ***@***.***>

-- Frederick R. Polli ***@***.*** Additional contact information available upon request

CodeKJ · 2022-12-19T23:53:05Z

I have exactly the same issue here since updated to Vite 4.

sveltejs/vite-plugin-svelte requires "type": "module" in package.json since latest release (2.0).

More here, and also mentioned in this issue

And from what I understand laravel-vite-plugin currently doesn't support that, and should be updated.

We are currently forced to stay with Vite 3.

jessarcher · 2022-12-20T00:39:41Z

I've made a note to look into this when I'm back at work next week.

timacdonald · 2022-12-20T01:34:29Z

As a temporary fix, you may specify "type": "module" in the package.json and then when you reference the laravel function, instead reference laravel.default.

We will investigate a fix for this.

e.g.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
    plugins: [
        laravel.default({
            input: ['resources/js/app.js'],
            refresh: true,
        }),
        svelte({
            //
        }),
    ],
});

timacdonald · 2022-12-20T04:09:28Z

WIP PR to address this issue: #189

timacdonald · 2022-12-20T04:32:14Z

Gonna close this and we can continue the conversation in the PR.

driesvints assigned jessarcher and timacdonald Dec 16, 2022

driesvints added the needs more info label Dec 16, 2022

driesvints closed this as completed Dec 16, 2022

timacdonald reopened this Dec 20, 2022

timacdonald mentioned this issue Dec 20, 2022

[0.7.x] Build MJS and CJS versions of the plugin #189

Merged

timacdonald closed this as completed Dec 20, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TypeError: laravel is not a function #187

TypeError: laravel is not a function #187

ferberus commented Dec 16, 2022

fpolli commented Dec 16, 2022 •

edited

Loading

driesvints commented Dec 16, 2022

fpolli commented Dec 16, 2022

driesvints commented Dec 16, 2022

driesvints commented Dec 16, 2022 •

edited

Loading

fpolli commented Dec 16, 2022

driesvints commented Dec 16, 2022

ferberus commented Dec 16, 2022

fpolli commented Dec 16, 2022

fpolli commented Dec 17, 2022 via email

CodeKJ commented Dec 19, 2022

jessarcher commented Dec 20, 2022

timacdonald commented Dec 20, 2022 •

edited

Loading

timacdonald commented Dec 20, 2022

timacdonald commented Dec 20, 2022

TypeError: laravel is not a function #187

TypeError: laravel is not a function #187

Comments

ferberus commented Dec 16, 2022

Description:

Steps To Reproduce:

fpolli commented Dec 16, 2022 • edited Loading

driesvints commented Dec 16, 2022

fpolli commented Dec 16, 2022

driesvints commented Dec 16, 2022

driesvints commented Dec 16, 2022 • edited Loading

fpolli commented Dec 16, 2022

driesvints commented Dec 16, 2022

ferberus commented Dec 16, 2022

Temporary Solution

fpolli commented Dec 16, 2022

fpolli commented Dec 17, 2022 via email

CodeKJ commented Dec 19, 2022

jessarcher commented Dec 20, 2022

timacdonald commented Dec 20, 2022 • edited Loading

timacdonald commented Dec 20, 2022

timacdonald commented Dec 20, 2022

fpolli commented Dec 16, 2022 •

edited

Loading

driesvints commented Dec 16, 2022 •

edited

Loading

timacdonald commented Dec 20, 2022 •

edited

Loading