__webpack_public_path__ in vuejs

user_4850140 0
Viewed 1881

I can't get the webpack_public_path to work with my vue application. i get this error:

Module Error (from ./node_modules/eslint-loader/index.js):
error: '__webpack_public_path__' is not defined (no-undef) at src\publicpath.js:1:1:
> 1 | __webpack_public_path__ = process.env.VUE_APP_CHAT_URL;
    | ^
  2 |

heres how i have it implemented:

//publicpath.js
__webpack_public_path__ = process.env.VUE_APP_CHAT_URL;

and

//main.js
import './publicpath'
import Vue from 'vue'
import App from './App.vue'
import store from './store/index'

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
  store
}).$mount('#tn-chat')

Is there something crucial i have left out?

vue.js webpack
2 Answers

The no-def ESLint rule is warning you about using an undeclared variable. You need to tell ESLint that __webpack_public_path__ is a global variable.

You can do it using either a comment in the JS file where you are using it (publicpath.js), e.g.:

/* global __webpack_public_path__:writable */

Or in your ESLint config:

{
    "globals": {
        "__webpack_public_path__": "writable"
    }
}
user_34866750

put a /* eslint-disable */ block comment at the top of publicpath.js

user_26752710
Related