After upgrading from Nuxt 2.14.12 to Nuxt Bridge, our TogetherJS implementation is not working now. From what I understand TogetherJS is not well maintained anymore but I figured it would at least work in our Vue app.
We're importing the script tag in nuxt.config.js after jquery and bootstrap. And also including a separate together-js-config file
script: [
{
src: "https://code.jquery.com/jquery-3.3.1.min.js",
type: "text/javascript"
},
{
src:
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js",
type: "text/javascript"
},
{
src:
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js",
type: "text/javascript"
},
{
src: "js/together-js-config.js",
},
{
src: "https://togetherjs.com/togetherjs-min.js",
// body: true
}
],
The error that's happening is just "TogetherJS is not defined" when trying to check if TogetherJS is running in the mounted lifestyle hook
if (TogetherJS.running) {
TogetherJS();
}
Does anyone have any suggestions here? Thanks!
Related
I've a web built with Nuxt 2 deployed in Vercel where I'm using the #nuxt/content module for rendering some articles. It's using SSR and target: server, and everytime the server hibernates due to lack of activity, the first load takes +10 seconds or directly returns a timeout.
It's caused because when the server does the cold start, it is parsing the documents again reaching the time limit. I'm not sure why is this happening and how can I fix it. I guess moving to ssr: false can maybe help but I'm afraid my SEO can be affected. I believe a better solution should exist just to avoid re-parsing the documents everytime it does a cold start.
Nuxt version: 2.15.7
#nuxt/content version: 1.14.0
#nuxtjs/vercel-builder version: 0.22.1
Running on Node 16
Parsing documents at cold start
nuxt.config.js
export default {
ssr: true,
target: "server",
plugins: [
"#/plugins/articleManager.ts",
"#/plugins/leaflet.client.js",
"#/plugins/device.server.js",
],
components: true,
buildModules: [
"#nuxt/typescript-build",
"#nuxtjs/vuetify",
"vue-ssr-carousel/nuxt",
],
modules: [
"#nuxtjs/pwa",
"#nuxt/content",
"#nuxtjs/sitemap",
"#nuxtjs/robots",
"#nuxt/image",
],
content: {
fullTextSearchFields: ["title", "description"],
},
build: {
build: {
extend(config, { isClient }) {
if (isClient) {
config.devtool = "source-map";
}
},
},
},
srcDir: "src/",
};
vercel.json
{
"version": 2,
"builds": [
{
"src": "package.json",
"use": "#vercel/node"
},
{
"src": "nuxt.config.js",
"use": "#nuxtjs/vercel-builder",
"config": {
"serverFiles": [
".nuxt/content/**",
"src/content/**",
"server/**",
".nuxt/dist/sitemap-routes.json"
]
}
}
]
}
I've tried many configurations to avoid the server parsing the documents every cold start but didn't succed. I also tried keep ssr: true with target: static but didn't managed to make it work. And even if it worked, I doubt that would solve the problem.
Thanks!
I have plain TYPO3 version 11.5.x setup with headless version 3.1.2. Backend working perfect and frontend URL returning proper JSON data.
API URL looks like: https://t3-pwa.ddev.site:4403/typo3/
I created front directory in the project root. Project directory looks like this.
Directory
fileadmin
front - created front app with nuxt-typo3 contain node package
node_modules
server
jsconfig.json
nuxt.config.js
package.json
tsconfig.json
typo3
typo3conf
vendor
typo3temp
.ddev
index.php
.htaccess
Command
Created app with yarn create nuxt-typo3
Configured with default settings
Run yarn dev
It starts application properly but when I visit frontend on default url: http://localhost:3000 It does not starting.
Console Start app : https://i.stack.imgur.com/LDr6U.png
Front: https://i.stack.imgur.com/ms6l2.png
Console: https://i.stack.imgur.com/9ZoBm.png
nuxt.config.js: Looks like this
export default {
/*
** Headers of the page
*/
head: {
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
/*
** Customize the progress-bar color
*/
loading: { color: '#ff8700' },
/*
** Global CSS
*/
css: [
],
/*
** Plugins to load before mounting the App
*/
plugins: [
],
/*
** Nuxt.js dev-modules
*/
buildModules: [
// Doc: https://github.com/macopedia/nuxt-typo3-theme
'nuxt-typo3-tailwind',
// Doc: https://github.com/TYPO3-Initiatives/nuxt-typo3
'nuxt-typo3',
],
/*
** Nuxt.js modules
*/
modules: [
'#nuxtjs/pwa',
],
/*
** TYPO3 module configuration
** https://github.com/TYPO3-Initiatives/nuxt-typo3
*/
typo3: {
baseURL: process.env.NUXT_HOST,
forms: true,
api: {
baseURL: 'https://t3-pwa.ddev.site'
},
},
typo3tailwind: {
layouts: false
},
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
extend (config, ctx) {
}
}
}
Also, default frontend URL returns the same JSON URL. Can anyone share some hint? Also, minimal solution from scratch?
It looks like your baseURL in frontend application is not valid. You should keep only https://t3-pwa.ddev.site:4403 in baseURL in nuxt.config.js file.
Please remember that nuxt-typo3 frontend application tries to fetch ?type=834 URL at start, and if you add /typo3 at start, it's not valid anymore.
You should adjust your baseURL, rebuild and you are ready to go. You can also take a look at our pwa-demo, which uses nuxt-typo3 and TYPO3 Headless with ddev https://github.com/TYPO3-Headless/pwa-demo.
I'm getting a strange error in Gatsby Cloud when I try to host the website.This happened since I added code syntax highlighting. The weird thing is it works perfectly when I run it locally on localhost, but it fails when I build it using Gatsby Cloud. (Gatsby Cloud uses the github repo of my website)
The error message I'm getting:
There was a problem loading plugin /usr/src/app/www/node_modules/#gatsby-cloud-pkg/gatsby-plugin-preview/dist/index.js. Perhaps you need to install its package?
My gatsby-config.js file:
module.exports = {
siteMetadata: {
...
},
plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-plugin-image`,
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-prismjs`,
options: {},
}
]
}
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `software`,
path: `${__dirname}/src/software`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `post`,
path: `${__dirname}/src/post`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
`gatsby-image`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `GetMyIsland Portfolio`,
short_name: `GetMyIsland Portfolio`,
start_url: `/`,
background_color: `#000000`,
theme_color: `#000000`,
display: `standalone`,
icon: `src/images/icon/LogoTransparent.png`,
},
},
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
],
}
Like I said the error appeared after installing prismjs and gatsby-remark-prismjs.
Does anyone have an idea on how I can fix this error message, since I wasn't able to find anything on the internet. If you need more information please tell me I'm happy to help.
Just try to remove the plugin that's causing issue and also that plugin/pakage which you think is causing issue and re install them freshly
I’m trying to deploy a SPA nuxt project on a subdomain hosted on a shared hosting service (Bluehost).
I ran nuxt build && nuxt export as per this post and tried serving the generated static files (dist) on a local server, and it works fine.
But once I tried actually deploying, the page can’t load successfully and I have multiple 404s in the Network tab of Chrome devtools, saying it cant fetch all the generated static js files found in the _nuxt directory:
runtime.c59f93b.js
commons.app.db9bcff.js
app.fe0b14c.js
Anyone happen to know what's causing this? Or if anything needs to be added to nuxt.config.js? Tried searching the docs but to no avail. The ff is my nuxt.config.js:
export default {
mode: 'spa',
/*
** Headers of the page
*/
head: {
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
/*
** Customize the progress-bar color
*/
loading: { color: '#fff' },
/*
** Global CSS
*/
css: [
],
/*
** Plugins to load before mounting the App
*/
plugins: [
],
/*
** Nuxt.js dev-modules
*/
buildModules: [
],
/*
** Nuxt.js modules
*/
modules: [
],
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
extend (config, ctx) {
}
},
target: 'static'
}
Thanks in advance.
The issue was that I was trying to deploy to a subdirectory, not the main directory of the site, and so Nuxt was trying to fetch files from the wrong directory, i.e.
/mainsite/public/commons.app.db9bcff.js
when it should have been
/mainsite/subdir1/dirname/public/commons.app.db9bcff.js
The solution was to manually configure the router property in nuxt.config.js:
router: {
base: '/subdir1/dirname/'
}
Thank you to user #Rie for being the one who pointed out this property which ended up being the solution.
a bit of a noob question -- I'd like to create two bundles -- app_bundle.js, and landing_bundle.js.
They will both share react, and a few other files, so I thought it would be a good idea to extract those out into a different, common bundle.
I found factor-bundle, but am having trouble getting it to work. This is what my config looks like for now:
browserify: {
app: {
files: {
'<%= yeoman.tmp %>/scripts/app_bundle.js': ['<%= yeoman.tmp %>/scripts/app.js'],
'<%= yeoman.tmp %>/scripts/landing_bundle.js': ['<%= yeoman.tmp %>/scripts/landing.js']
},
options: {
watch: true,
plugin: [
['factor-bundle', { o: [ '<%= yeoman.tmp %>/scripts/app_bundle.js', '<%= yeoman.tmp %>/scripts/landing_bundle.js'] }]
],
}
}
}
I ran it, got no errors, but am not sure where the factored bundle js actually is, I think it didn't actually save anywhere.
The thing I'm not understanding is, where will factor-bundle save the file? how would I go about specifying that?
In case you're still looking for help with this, here's how I have it set up in the app I'm working on at the moment. This should output three files in the dist directory: app.js, landing.js and common.js. common.js should contain all the stuff that's common to app.js and landing.js. Let me know if this is helpful--I'm pretty new to this stuff too.
browserify: {
app: {
files: {
'dist/scripts/common.js': [
'src/scripts/app.js',
'src/scripts/landing.js'
]
},
options: {
watch: true,
plugin: [
['factor-bundle', { o: [ 'dist/scripts/app.js', 'dist/scripts/landing.js'] }]
]
}
}
}