CODEWITHSUNDEEP
javascriptvue.jsconfigurationcloud9-ide
Alexandru Nutu
Alexandru Nutu

Reputation: 461

How to solve noscript - doesn't work properly without JavaScript enabled when serving a Vue App

I'm setting up a new Vue.JS application using the Vue UI interface. When I start the application using vue serve src/App.vue the application starts but it only displays in the page the default Home | About. When I inspect the page in the HTML I see:

<noscript>
      <strong>We're sorry but basicapp doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>

and in the console I see

[Vue warn]: Unknown custom element: <router-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <App> at src/App.vue
       <Root>

I am working with the basic application created when running the Vue UI

I am working with the basic application created when running the Vue UI If I run the application using the vue ui command followed by starting the application from the Vue UI it works.

The reason I want to open the application using the command line is that in Cloud9 where I want to test the application the vue ui starts on localhost and I cannot find a way to open it. The only changes I made to the application files were done only to make the application run inside the Cloud9 container: changed the package.jsonadded: 

"dev": "webpack-dev-server --inline --progress --port 8080 --host 0.0.0.0 --config vue.config.js --public $C9_HOSTNAME",

created the vue.config.js and added: 

module.exports = {
  devServer: {
    compress: true,
    disableHostCheck: true,
  },
}

Upvotes: 30

Views: 153548

Answers (15)

jin wenxin
jin wenxin

Reputation: 1

I think it's really tricky. After several hours searching for the resolution, I found it's a VUE embedded code snippet. Open your vue project and expand public folder, you'll see the code We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue. in index.html. If we delete this code and run the build command, there'll be no such noscript node at all.

Upvotes: 0

dank
dank

Reputation: 589

I was seeing this error because my Vue.js library (axios) was reaching out to '/' which was bringing back HTML/JavaScript and it's not able to render it.

At least that's my theory.

I changed the HTTP location to something valid and the error has gone away.

Upvotes: 0

parsecer
parsecer

Reputation: 5106

It was about vue router.js to me. After commenting out some paths, the site worked.

Turned out the new router that I commented out had the same component as the old route (the one that stopped working):

{
  path: '/good_old_route_stopped_working',
  name: "DogPage",
  component: DogPage
},

{
  path: '/bad_new_route_should_be_removed',
  name: "DogPage",
  component: DogPage
},

Upvotes: 0

Desto
Desto

Reputation: 11

Check your backend configuration if you are using API. In my case I was using Node.js in backend and the issue was coming from my Node.js config, the server was not sending data in a proper JSON object due to the wrong config I did.

Stop the backend server, and run the Vue.js app, and then check if the message is still showing in your browser.

If the message is missing, then your backend is not well configured.

Upvotes: 0

Yasming Meng
Yasming Meng

Reputation: 11

I encountered this question too. But in my case is proxy forwarding went wrong. All of my http request are forwarded through a local proxy，but when proxy matching the request prefix occurs an error that prefix matching failed.

image

Upvotes: 0

Anand Khandalekar
Anand Khandalekar

Reputation: 26

Was facing a similar issue. Realised that the issue was with my router object.

const router = createRouter({
    history: createWebHistory,
    routes: routes
})

The problem here was that I was using the createWebHistory method as a variable, instead of using it as a method i.e. createWebHistory()

const router = createRouter({
    history: createWebHistory(),
    routes: routes
})

Upvotes: 0

cibernato
cibernato

Reputation: 131

Surprisingly, this was solved doing chmod to the root folder.
I used this:

sudo chmod -R 775 path/to/root/folder

Upvotes: 0

betovaz81
betovaz81

Reputation: 39

I have de same problem, but I don' use http://127.0.0.1:8080 I use ip private http://192.168.100.74:8080/ and It's worked!!! note:use your ip

I had problem with my port 8080 or mi ip

Upvotes: 1

Farbafe
Farbafe

Reputation: 11

Vue's build directory, dist, is meant to be served by an HTTP server. Use npm's serve package to serve the folder.

Download using

npm install -g serve

and serve using

serve -s

when in the dist folder or provide path to dist folder

serve -s path/to/dist

Upvotes: 1

fatih celik
fatih celik

Reputation: 67

You need to disable the adblocker or run on incognito mode

Upvotes: 5

C.Christensen
C.Christensen

Reputation: 416

This occured, when I accidentally set my web directory to the /public instead of the /dist directory. After I changed the apps root to point to the /dist directory in my nginx settings it worked fine.

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name mydomain.com;
    root /path/to/my/website/dist;

    # other settings below...
}

Upvotes: 3

user13149444
user13149444

Reputation: 23

'We're sorry but basicapp doesn't work properly without JavaScript enabled. Please enable it to continue.'

This Message will be shown when you open the Browser without javascript :D when you want to see it you should be disable The Javascript in your Browser

Upvotes: -3

chao zhang
chao zhang

Reputation: 27

Change the port from 8080 to 8081，it worked for me. I opened another program with port 8080.May cause hash conflict

Upvotes: 1

Manoj Verma
Manoj Verma

Reputation: 538

After 2.5 days of search I found that the content in index.html ( We're sorry but basicapp doesn't work properly without JavaScript enabled. Please enable it to continue. ) is not an error actually.

It is default text for those browsers in which javascript is not enable so don't worry about this at all.

To run your application in dev mode you can use Yarn serve command. If you want to build your application then use yarn/npm build and configure/use the index.html present in dist folder without any doubt.

Upvotes: 11

Alexandru Nutu
Alexandru Nutu

Reputation: 461

I found the problem. To start the application you need to run the command npm run serve. Works well in the Cloud9 container and also on my local machine.

Upvotes: 0

Related Questions