Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Jul 2, 2019

5

OP

Level 16

process.env.MIX_<variable> not working

I'm currently working on a project using Laravel Spark and Laravel Echo to send WebSocket notifications. The problem I'm having is the variables for process.env.MIX_PUSHER_APP_KEY is not being populated.

My .env file looks like this

PUSHER_APP_ID=xxxxxx
PUSHER_APP_KEY=xxxxxx
PUSHER_APP_SECRET=xxxxxxxxxx
PUSHER_APP_CLUSTER=us2

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

my echo config in js/components/bootstrap.js is

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
});

When I run my app I get a pusher error saying the key is not defined. For some reason, the MIX_PUSHER_APP_KEY is not pulling from the env file. If I hardcode the app key into the echo config everything works fine

any suggestions as to what I'm doing wrong?

Level 33

And you are using Webpack to compile the javascript assets?

Level 4

Same problem here. On a Laravel fresh install, using "npm run dev" to compile, my MIX_PUSHER_APP_KEY is empty.

Best Answer

Level 4

I added require("dotenv").config(); in my webpack.mix.js, and now it's working.

3 likes

Level 1

Set the values directly

PUSHER_APP_ID=xxxxxx
PUSHER_APP_KEY=xxxxxx
PUSHER_APP_SECRET=xxxxxxxxxx
PUSHER_APP_CLUSTER=us2

MIX_PUSHER_APP_KEY=xxxxxx
MIX_PUSHER_APP_CLUSTER=us2

Don't forget to run npm run dev

Level 2

@FelixCoker Don't forget to run npm run dev YEEES! this was it for me.

Please or to participate in this conversation.