title: laravel echo : "Uncaught ReferenceError: Echo is not defined"
body: <p>im trying to work laravel echo with pusher , im working on windows localhost (wamp / laravel 5.8) </p>
  
  <p>so i've installed required libs </p>
  
  <p>my package.json</p>
  
  <pre><code>{
      "private": true,
      "scripts": {
          "dev": "npm run development",
          "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
          "watch": "npm run development -- --watch",
          "watch-poll": "npm run watch -- --watch-poll",
          "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
          "prod": "npm run production",
          "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
      },
      "devDependencies": {
          "axios": "^0.19",
          "bootstrap": "^4.1.0",
          "cross-env": "^5.1",
          "jquery": "^3.2",
          "laravel-echo": "^1.8.0",
          "laravel-mix": "^4.0.7",
          "lodash": "^4.17.13",
          "popper.js": "^1.12",
          "pusher-js": "^6.0.3",
          "resolve-url-loader": "^2.3.1",
          "sass": "^1.15.2",
          "sass-loader": "^7.1.0",
          "vue": "^2.5.17",
          "vue-template-compiler": "^2.6.11"
      }
  }
  </code></pre>
  
  <p>resources/js/app.js </p>
  
  <pre><code>require('./bootstrap');
  
  window.Vue = require('vue');
  </code></pre>
  
  <p>resources/js/bootstrap.js </p>
  
  <pre><code>window._ = require('lodash');
  try {
      window.Popper = require('popper.js').default;
      window.$ = window.jQuery = require('jquery');
  
      require('bootstrap');
  } catch (e) {}
  
  window.axios = require('axios');
  
  window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
  import Echo from 'laravel-echo';
  window.xxx = 'xxx';
  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,
      encrypted: true
  });
  </code></pre>
  
  <p>i ran </p>
  
  <pre><code>npm run dev
  </code></pre>
  
  <p>here is the result </p>
  
  <p><a href="https://i.stack.imgur.com/SwWSA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SwWSA.png" alt="enter image description here"></a></p>
  
  <p>in my view i have </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="{{ str_replace('_', '-', app()-&gt;getLocale()) }}"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
          &lt;title&gt;Laravel&lt;/title&gt;
          &lt;meta name="csrf-token" content="{{ csrf_token() }}"&gt;
          &lt;script src="{{ asset('js/app.js') }}" defer&gt;&lt;/script&gt;
          &lt;link href="{{ asset('css/app.css') }}" rel="stylesheet"&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
      &lt;script&gt;
          console.log(Echo);
      &lt;/script&gt;
  
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>i keep getting</p>
  
  <pre><code>Uncaught ReferenceError: Echo is not defined
  </code></pre>
  
  <p>i even added </p>
  
  <pre><code>window.xxx = 'xxx';
  </code></pre>
  
  <p>in bootstrap.js to see if i can eccess xxx variable in my view but thats undefined as well (btw im not sure if thats how it works !!  just trying some stuff )</p>
  
  <p>any idea ? </p>
  
  <p>my folders structure is like </p>
  
  <pre><code>/pusher (root folder)
    +app
    +vendor
    +node_modules
    +resources/js
    -public
      index.php
      css/app.css
      js/app.js
  </code></pre>