Syntax error when I access the "process.env" on Vue.js

Question

I got a problem when I try to access the variable:process.env. It told me I got a syntax error and I'm 100% sure that my code is correct. I want to know what problem with it

I tried check my codes over and over again. I can't find any syntax error.By the way, it's ok when I access the proceess varible. But when I try to access the process.env, it started to execute eval, which raised the error I mentioned before.

My code goes that :

src/global.vue

console.log(process.env);

The error I got:


Uncaught SyntaxError: Unexpected token :
    at Object../node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue (app.js:1170)
    at __webpack_require__ (app.js:679)
    at fn (app.js:89)
    at eval (App.vue?9e04:1)
    at Object../src/App.vue (app.js:5245)
    at __webpack_require__ (app.js:679)
    at fn (app.js:89)
    at eval (main.js:5)
    at Object../src/main.js (app.js:5357)
    at __webpack_require__ (app.js:679)

The app.js:1170 goes that:

eval("/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__components_headers__ = __webpack_require__(\"./src/components/headers.vue\");\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__components_blogfooter__ = __webpack_require__(\"./src/components/blogfooter.vue\");\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\n// import axios from 'axios'\n\n\n/* harmony default export */ __webpack_exports__[\"a\"] = ({\n  name: 'App',\n  components: { 'headers': __WEBPACK_IMPORTED_MODULE_0__components_headers__[\"a\" /* default */],\n    'blog-footer': __WEBPACK_IMPORTED_MODULE_1__components_blogfooter__[\"a\" /* default */]\n  },\n  created: function created() {\n    this.$store.dispatch('GET_BASIC');\n    console.log(Object({\"NODE_ENV\":\"development\",\"SERVER\":http://localhost:8000}));\n  }\n});//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9ub2RlX21vZHVsZXMvYmFiZWwtbG9hZGVyL2xpYi9pbmRleC5qcyEuL25vZGVfbW9kdWxlcy92dWUtbG9hZGVyL2xpYi9zZWxlY3Rvci5qcz90eXBlPXNjcmlwdCZpbmRleD0wIS4vc3JjL0FwcC52dWUuanMiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vQXBwLnZ1ZT8yNmNkIl0sInNvdXJjZXNDb250ZW50IjpbIjx0ZW1wbGF0ZT5cbiAgPGRpdj5cbiAgICA8ZGl2IGNsYXNzPVwid3JhcFwiPlxuICAgICAgPGhlYWRlcnM+PC9oZWFkZXJzPlxuICAgICAgPHRyYW5zaXRpb24+XG4gICAgICAgIDxyb3V0ZXItdmlldz48L3JvdXRlci12aWV3PlxuICAgICAgPC90cmFuc2l0aW9uPlxuICAgICAgPGJsb2ctZm9vdGVyPjwvYmxvZy1mb290ZXI+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC90ZW1wbGF0ZT5cblxuPHNjcmlwdD5cbiAgLy8gaW1wb3J0IGF4aW9zIGZyb20gJ2F4aW9zJ1xuICBpbXBvcnQgSGVhZGVycyBmcm9tICdAL2NvbXBvbmVudHMvaGVhZGVycydcbiAgaW1wb3J0IEZvb3RlciBmcm9tICdAL2NvbXBvbmVudHMvYmxvZ2Zvb3RlcidcbiAgZXhwb3J0IGRlZmF1bHQge1xuICAgIG5hbWU6ICdBcHAnLFxuICAgIGNvbXBvbmVudHM6eydoZWFkZXJzJzpIZWFkZXJzLFxuICAgICAgICAgICAgICAgICdibG9nLWZvb3Rlcic6Rm9vdGVyXG4gICAgfSxcbiAgICBjcmVhdGVkICgpIHtcbiAgICAgIHRoaXMuJHN0b3JlLmRpc3BhdGNoKCdHRVRfQkFTSUMnKTtcbiAgICAgIGNvbnNvbGUubG9nKHByb2Nlc3MuZW52KVxuICAgIH0sXG4gIH1cblxuPC9zY3JpcHQ+XG5cbjxzdHlsZT5cblxuPC9zdHlsZT5cblxuXG5cbi8vIFdFQlBBQ0sgRk9PVEVSIC8vXG4vLyBBcHAudnVlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7QUFhQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQURBO0FBR0E7QUFDQTtBQUNBO0FBQ0E7QUFSQSIsInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue\n");

I solve it by adding double quotes on the value of the variable SERVER:

Old code

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  SERVER: 'http://localhost:8000'
})

New code

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  SERVER: '"http://localhost:8000"'
})

I don't know why it has no hint to tell me that thing. The grammar of config file is so weird that you need to put a quote outside an existed quote.

Can anyone tell me why?

I know that, I just want to express my worry.So it's exaggerating . I stuck in the problem for a long time. — Weiziyoung
– Weiziyoung, Commented Jul 5, 2019 at 12:13
You should reduce your code to a MWP. I.e. the smallest state where the error still occurs. I can only say that in my vue application where I tried it, running console.log(process.env) works fine. — bodo
– bodo, Commented Jul 5, 2019 at 12:17
Are you using vue-cli or a custom webpack config? What's your webpack config? — Decade Moon
– Decade Moon, Commented Jul 5, 2019 at 12:32

Estradiaz · Accepted Answer · 2019-07-05 16:13:24Z

1

After instpecting the error in app.js:1170 one can see that your process.env.serversomehow misses " - why that is no clue but i think this should be fixable now^^

currently:

{server: http://localhost:8000}

but should be

{server:"http://localhost:8000"}

answered Jul 5, 2019 at 16:13

Estradiaz

3,5831 gold badge13 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Weiziyoung Over a year ago

I don't know where can I edit it. Every address used in my config file has been added single quotes.

Weiziyoung Over a year ago

Oh I fixed it. The value in the config file should add single quotes and double quotes like the NODE_ENV did.

Walesson · Accepted Answer · 2021-08-01 20:02:53Z

0

I had a similar problem when working in a project with webpack, I made a configuration of the .env to node and to the test environment, but when running in the web environment, this same error message, as if the process. envdid not exist. In my case I was using the dotenv lib, so it was pretty simple to solve, I just saw that theJSON.stringifysetting inDefinePlugin` was missing.

Resolved configuring it this way:

new webpack.DefinePlugin({
  "process.env": JSON.stringify(dotenv.parsed),
})

answered Aug 1, 2021 at 20:02

Walesson

1

Collectives™ on Stack Overflow

Syntax error when I access the "process.env" on Vue.js

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related