Vue.js: Failed to generate render function

Question

I try to run a simple Vue.js, but I constantly receive the following error:

[Vue warn]: It seems you are using the standalone build of Vue.js in an environment with Content Security Policy that prohibits unsafe-eval. The template compiler cannot work in this environment. Consider relaxing the policy to allow unsafe-eval or pre-compiling your templates into render functions.

main.js:3180 [Vue warn]: Failed to generate render function: EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self'". in

with(this){return _c('div',{attrs:{"id":"app"}})}

(found in )

Yet, I can't understand what is causing this error. I don't seem to use any dynamic templates and everything should be pre-compiled. Here is the code of my application:

import Vue from 'vue'
import VueRouter from 'vue-router'

const Home = Vue.component('home-component', {
  render() {
    return <div>
      <router-link to="/users">Users</router-link>
      <router-link to="/about">About</router-link>
    </div>
  }
})

const Users = Vue.component('users-component', {
  render() {
    return <p>Users</p>
  }
})

const NotFound = Vue.component('not-found-component', {
  render() {
    return <p>Not Found</p>
  }
})

const routes = [
  { path: '/', component: Home },
  { path: '/users', component: Users }
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router
}).$mount('#app')

And here is how I process JavaScript files in my gulpfile:

const paths = {
  main: 'web/javascript/src/main.js',
  allJs: 'web/javascript/**/*.{js,vue}',
  resultJs: 'public/assets/javascript/main.js',
};

gulp.task('scripts', function() {

  return browserify(paths.main)
    .transform(babelify, { presets: ['es2015'], plugins: ["transform-runtime"] })
    .transform(vueify)
    .bundle()
    .pipe(fs.createWriteStream(paths.resultJs))
}

There are seem to be many similar questions on StackOverflow, but none of them helped me.

tony19 · Accepted Answer · 2022-07-15 02:51:50Z

1

The broweser is throwing Content Security Policy (CSP) error, to get around this issue you should consider switching to the runtime-only build, which is fully CSP-compliant. https://v2.vuejs.org/v2/guide/installation.html#CSP-environments

Also, You have return incorrectly written. It should return jsx in pair of paranthesis (). The code below should help

import Vue from 'vue'
import VueRouter from 'vue-router'

const Home = Vue.component('home-component', {
  render(h) {
    return(
    <div>
      <router-link to="/users">Users</router-link>
      <router-link to="/about">About</router-link>
    </div>
    )
  }
})

const Users = Vue.component('users-component', {
  render(h) {
    return(
      <p>Users</p>
    )
  }
})

const NotFound = Vue.component('not-found-component', {
  render(h) {
    return(
      <p>Not Found</p>
    )
  }
})

const routes = [
  { path: '/', component: Home },
  { path: '/users', component: Users }
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router
}).$mount('#app')

edited Jul 15, 2022 at 2:51

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 22, 2017 at 12:08

Anish K.

2,5323 gold badges23 silver badges27 bronze badges

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

1 Comment

Ivan Mushketyk Over a year ago

I've added parenthesis, as you suggested, but it didn't help. I still see the same error.

Collectives™ on Stack Overflow

Vue.js: Failed to generate render function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related