include url source inside app.js

@chron and here you go:

https://stackoverflow.com/a/4634669/1457270

or combine multiple scripts using Laravel Mix.. keep in mind that you will need to download the 3d party scripts locally:

https://laravel.com/docs/master/mix#vanilla-js

I'm currently importing the script before the <script src="{{ asset('js/app.js') }}"></script>.

// client-id from .env file
 <script src="https://www.api.com/{{ config('client-id') }}"></script>

How can I do this inside app.js?

Like Nakov said use Laravel Mix do koin all your javascript files into one.

Here is how to use is https://laravel.com/docs/6.x/mix

I tried this.

mix.scripts([
    "https://www.api.com/{{ config('client-id') }}",
]);

But I got an error after I compiled it.

Yeah that will not work. Is it in your env file? If so you can read from that

https://laravel.com/docs/master/mix#environment-variables

So it should be like this?

mix.scripts([
    "https://www.api.com/{{ process.env.client-id }}",
]);

I have client-id in my .env file.

Add CLIENTID to your env

mix.scripts([
    "https://www.api.com/{{ process.env.CLIENTID }}",
]);

I already have it in .env

CLIENTID=XXXX-XXXX-XXXX

Then I did this:

mix.scripts([
    "https://www.api.com/api?client-id={{ process.env.CLIENTID }}",
]);

But I still got an error.

And the error is?

AssertionError [ERR_ASSERTION]: mix.combine() requires a full output file path as the second argument.

...npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional loggining output above.`

Oh. I did it in webpack.config.js, that's why I'm getting an error.

Edit: I put it in app.js and I get mix is not defined. mix is already defined in webpack.config.js though.

I put this inside webpack.config.js

mix.scripts([
    "https://www.api.com/api?client-id={{ process.env.CLIENTID }}",
]);

But it gives me an error when I compile it.

Try it without anything dynamic. Just the hard-coded url

If that does not work you can try showing your whole webpack file

Here's the content of my webpack.mix.js:

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .scripts([
    'https://www.paypal.com/sdk/js?client-id=XX-XX-XX-XX-XX-XX&currency=USD&disable-card=visa,mastercard,amex'
]);

mix.webpackConfig({
    node: {
        fs: "empty"
    }
});

So it didn't work with a hard-coded url?

Oh silly me. Just remembered that the env needs to be prefixed with MIX_ (change the env file as well)

Also. Write your url like this in webpack

mix.scripts([
    "https://www.api.com/" + process.env.MIX_CLIENTID,
], 'public/js/all.js');

It didn't work even if it is hard-coded.

Check my latest answer (now with missing argument)

When I looked at public/js/all.js, it's empty. What does it do and is it intended to be empty?

That would be the output file. Did you remember to download the file like @nakov memtioned?

keep in mind that you will need to download the 3d party scripts locally:

Wait. If I downloaded the script, what would be the purpose of putting the url source?

@chron just download them locally and mix them into one file. That's it. No need for URL source.

Is it okay to just enter this url and download it using "save as"?

https://www.paypal.com/sdk/js?client-id=t0R5jKrX2jd9TAyKhFNOfiAKYGuw9rnkh8Ywsc7bACH0eaDA5YWCjIHZ1vzFJDtolTBsEB6aT6wxbdpb&currency=USD&disable-card=visa,mastercard,amex

if it shows the script on the browser then yes, it is :)

Okay. I'll try it. Thanks!

I did this:

 mix.scripts(['resources/js/paypal.js'], 'public/js/all.js')
 .js('resources/js/app.js', 'public/js')
 .sass('resources/sass/app.scss', 'public/css');

I'm getting an undefined error because app.js is being loaded first and to render paypal it needs the paypal.js

Edit: I did this:

mix
 .js('resources/js/app.js', 'public/js')
 .sass('resources/sass/app.scss', 'public/css')
 .scripts([
    'resources/js/paypal.js',
    'public/js/app.js',
    ], 'public/js/all.js');

Now I'm getting this error:

 Error: PayPal Payments SDK script not present on page! Excected to find <script src="https://www.paypal.com/sdk/js">

So in your view do you include the all.js script? :)

You should have this two, and in this order as well.

<script src="/js/all.js"></script>
<script src="/js/app.js"></script>

You need to follow the PayPal API exactly like it says, not something else.

I just did that. It's still the same error.

Maybe there are still other options. I want my master blade to not be cluttered with too many script sources and linked stylesheet.