Laravel-echo import outside app.js

So if I import Echo in app.js:

import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');
window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    forceTLS: true
});

it'll work fine, but if I do the same thing by putting it in a separate .js and then into a headscript with the intent of using it only where I need it like so:

<script type="module" src="{{ asset('js/pusher_ini.js') }}"></script>

Then I guess it doesn't find the 'laravel-echo' part, giving a "Uncaught TypeError: Failed to resolve module specifier 'laravel-echo'." As far as understand, it is looking for the packages while it's on the clientside but packages are serverside? I don't know what to do with that information though. Did think of a bit of a hack of having a conditional inside app.js with

window.location.href.includes(' part of the url ')

but that could give problems if I kept adding pages. And I would like to fill in the gaps in my knowledge anyways.

LaryAI

2 years ago

Level 58

The issue you're facing is related to how JavaScript modules are resolved in the browser. When you import laravel-echo in a separate JavaScript file and include it using a <script> tag, the browser tries to resolve the module specifier laravel-echo but fails because it doesn't know where to find it.

To resolve this issue, you can use a module bundler like Webpack to bundle your JavaScript files and handle the module resolution for you. Here's how you can do it:

Install Laravel Mix (if you haven't already) by running the following command in your project directory:

npm install laravel-mix --save-dev

Create a new file called webpack.mix.js in the root of your project directory and add the following code to it:

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

mix.js('resources/js/app.js', 'public/js')
   .js('resources/js/pusher_ini.js', 'public/js');

This configuration tells Laravel Mix to bundle app.js and pusher_ini.js into separate JavaScript files in the public/js directory.

Move your pusher_ini.js file to the resources/js directory.
In your app.js file, remove the import Echo from 'laravel-echo'; line and replace it with require('laravel-echo');. Your app.js file should now look like this:

window.Pusher = require('pusher-js');
window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    forceTLS: true
});

In your pusher_ini.js file, remove the import Echo from 'laravel-echo'; line and replace it with require('laravel-echo');. Your pusher_ini.js file should now look like this:

// Your additional code here

Run the following command to compile your JavaScript files using Laravel Mix:

npx mix

This will generate the bundled JavaScript files in the public/js directory.

Finally, update your HTML file to include the bundled JavaScript files instead of the individual files. Replace the following line:

<script type="module" src="{{ asset('js/pusher_ini.js') }}"></script>

with:

<script src="{{ asset('js/pusher_ini.js') }}"></script>

This will include the bundled JavaScript file generated by Laravel Mix.

Now, when you load your web page, the browser will be able to resolve the laravel-echo module correctly, and you won't see the "Uncaught TypeError: Failed to resolve module specifier 'laravel-echo'" error.

Note: Make sure to run npx mix whenever you make changes to your JavaScript files to recompile them.