Related
When I do quasar build it gives the following:
deb2302user#deb2302:~/tmp2303/vue/kitty$ quasar build
.d88888b.
d88P" "Y88b
888 888
888 888 888 888 8888b. .d8888b 8888b. 888d888
888 888 888 888 "88b 88K "88b 888P"
888 Y8b 888 888 888 .d888888 "Y8888b. .d888888 888
Y88b.Y8b88P Y88b 888 888 888 X88 888 888 888
"Y888888" "Y88888 "Y888888 88888P' "Y888888 888
Y8b
Build mode............. spa
Pkg quasar............. v2.11.3
Pkg #quasar/app-vite... v1.1.3
Pkg vite............... v2.9.15
Debugging.............. no
Publishing............. no
App • Cleaned build artifact: "/home/deb2302user/tmp2303/vue/kitty/dist/spa"
App • WAIT • Compiling of SPA UI with Vite in progress...
[vite:resolve] Missing "./preload-helper" export in "vite" package
/home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/vite#2.9.15_sass#1.32.12/node_modules/vite/dist/node/chunks/dep-689425f3.js:38597
throw new Error(
^
Error: Missing "./preload-helper" export in "vite" package
at bail (/home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/vite#2.9.15_sass#1.32.12/node_modules/vite/dist/node/chunks/dep-689425f3.js:38597:8)
at resolve (/home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/vite#2.9.15_sass#1.32.12/node_modules/vite/dist/node/chunks/dep-689425f3.js:38674:10)
at resolveExports (/home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/vite#2.9.15_sass#1.32.12/node_modules/vite/dist/node/chunks/dep-689425f3.js:40982:12)
at resolveDeepImport (/home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/vite#2.9.15_sass#1.32.12/node_modules/vite/dist/node/chunks/dep-689425f3.js:41000:31)
at tryNodeResolve (/home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/vite#2.9.15_sass#1.32.12/node_modules/vite/dist/node/chunks/dep-689425f3.js:40773:20)
at Object.resolveId (/home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/vite#2.9.15_sass#1.32.12/node_modules/vite/dist/node/chunks/dep-689425f3.js:40581:28)
at /home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/rollup#2.77.3/node_modules/rollup/dist/shared/rollup.js:22826:37 {
code: 'PLUGIN_ERROR',
plugin: 'vite:resolve',
hook: 'resolveId',
watchFiles: [
'/home/deb2302user/tmp2303/vue/kitty/index.html',
'/home/deb2302user/tmp2303/vue/kitty/.quasar/client-entry.js',
'/home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/vite#4.1.1_#types+node#12.20.55/node_modules/vite/package.json',
'/home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/vue#3.2.45/node_modules/vue/package.json',
'/home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/#quasar+extras#1.15.9/node_modules/#quasar/extras/package.json',
'/home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/quasar#2.11.3/node_modules/quasar/package.json',
'/home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/vue#3.2.45/node_modules/vue/dist/vue.runtime.esm-bundler.js',
'/home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/#quasar+extras#1.15.9/node_modules/#quasar/extras/roboto-font/roboto-font.css',
'/home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/#quasar+extras#1.15.9/node_modules/#quasar/extras/material-icons/material-icons.css',
'/home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/#quasar+extras#1.15.9/node_modules/#quasar/extras/material-icons-outlined/material-icons-outlined.css',
'/home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/quasar#2.11.3/node_modules/quasar/dist/quasar.sass',
'/home/deb2302user/tmp2303/vue/kitty/.quasar/app.js',
'/home/deb2302user/tmp2303/vue/kitty/.quasar/quasar-user-options.js'
]
}
Node.js v18.14.0
package.json
{
"name": "kitty",
"version": "0.0.1",
"private": true,
"description": "Kitty desc",
"author": "none <none>",
"scripts": {
"lint": "eslint --ext .js,.ts,.vue ./",
"format": "prettier --write \"**/*.{js,ts,vue,scss,html,md,json}\" --ignore-path .gitignore",
"test": "echo \"No test specified\" && exit 0"
},
"dependencies": {
"#quasar/extras": "^1.0.0",
"#vitejs/plugin-vue-jsx": "^3.0.0",
"#vue/babel-plugin-jsx": "^1.1.1",
"#vue/cli-plugin-babel": "^5.0.8",
"#vueuse/core": "^9.11.1",
"axios": "^0.21.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-vue-jsx": "^3.7.0",
"core-js": "^3.8.3",
"d3": "^7.8.1",
"jquery": "^3.6.3",
"pinia": "^2.0.11",
"quasar": "^2.6.0",
"vue": "^3.0.0",
"vue-i18n": "^9.2.2",
"vue-router": "^4.0.0"
},
"devDependencies": {
"#intlify/vite-plugin-vue-i18n": "^3.3.1",
"#quasar/app-vite": "^1.0.0",
"#types/node": "^12.20.21",
"#typescript-eslint/eslint-plugin": "^5.10.0",
"#typescript-eslint/parser": "^5.10.0",
"autoprefixer": "^10.4.2",
"eslint": "^8.10.0",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-vue": "^9.0.0",
"prettier": "^2.5.1",
"typescript": "^4.5.4",
"vite": "^4"
},
"engines": {
"node": "^18 || ^16 || ^14.19",
"npm": ">= 6.13.4",
"yarn": ">= 1.21.1"
},
"productName": "Kitty"
}
quasar.config.js
/* eslint-env node */
/*
* This file runs in a Node context (it's NOT transpiled by Babel), so use only
* the ES6 features that are supported by your Node version. https://node.green/
*/
// Configuration for your app
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js
const { configure } = require('quasar/wrappers');
const path = require('path');
module.exports = configure(function (/* ctx */) {
return {
eslint: {
// fix: true,
// include = [],
// exclude = [],
// rawOptions = {},
warnings: true,
errors: true
},
// https://v2.quasar.dev/quasar-cli-vite/prefetch-feature
// preFetch: true,
// app boot file (/src/boot)
// --> boot files are part of "main.js"
// https://v2.quasar.dev/quasar-cli-vite/boot-files
boot: [
'i18n',
'axios',
],
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
css: [
'app.scss'
],
// https://github.com/quasarframework/quasar/tree/dev/extras
extras: [
// 'ionicons-v4',
// 'mdi-v5',
// 'fontawesome-v6',
// 'eva-icons',
// 'themify',
// 'line-awesome',
// 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
'roboto-font', // optional, you are not bound to it
'material-icons', // optional, you are not bound to it
'material-icons-outlined',
],
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#build
build: {
target: {
browser: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
node: 'node16'
},
vueRouterMode: 'history', // available values: 'hash', 'history'
// vueRouterBase,
// vueDevtools,
// vueOptionsAPI: false,
// rebuildCache: true, // rebuilds Vite/linter/etc cache on startup
// publicPath: '/',
// analyze: true,
// env: {},
// rawDefine: {}
// ignorePublicFolder: true,
// minify: false,
// polyfillModulePreload: true,
// distDir
// extendViteConf (viteConf) {},
// viteVuePluginOptions: {},
vitePlugins: [
['#intlify/vite-plugin-vue-i18n', {
// if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
// compositionOnly: false,
// you need to set i18n resource including paths !
include: path.resolve(__dirname, './src/i18n/**')
}
],
['#vitejs/plugin-vue-jsx', {}
]
]
},
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#devServer
devServer: {
// https: true
open: true // opens browser window automatically
},
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework
framework: {
config: {},
// iconSet: 'material-icons', // Quasar icon set
// lang: 'en-US', // Quasar language pack
// For special cases outside of where the auto-import strategy can have an impact
// (like functional components as one of the examples),
// you can manually specify Quasar components/directives to be available everywhere:
//
components: [
'QLayout',
'QHeader',
'QDrawer',
'QPageContainer',
'QPage',
'QToolbar',
'QToolbarTitle',
'QBtn',
'QBtnGroup',
'QIcon',
'QList',
'QItem',
'QItemSection',
'QItemLabel',
'QTooltip',
'QInput',
'QCard',
'QCardSection',
'QCardActions',
'QDialog',
'QForm',
'QFooter',
'QAvatar',
'QScrollArea',
'QImg',
'QTabs',
'QTab',
'QRouteTab',
'QTabPanels',
'QTabPanel',
'QFab',
'QFabAction',
'QSeparator',
'QBar',
'QSpace',
'QSelect',
'QRadio',
'QTime',
'QDate',
'QPopupProxy',
'QTable',
'QTh',
'QTr',
'QTd',
'QCheckbox',
'QToggle',
'QSpinnerHourglass',
'QPageSticky',
'QTimeline',
'QTimelineEntry',
'QBadge',
'QStepper',
'QStep',
'QStepperNavigation',
'QMenu',
],
directives: [
'ClosePopup'
],
// Quasar plugins
plugins: [
'Notify'
]
},
// animations: 'all', // --- includes all animations
// https://v2.quasar.dev/options/animations
animations: [],
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#sourcefiles
// sourceFiles: {
// rootComponent: 'src/App.vue',
// router: 'src/router/index',
// store: 'src/store/index',
// registerServiceWorker: 'src-pwa/register-service-worker',
// serviceWorker: 'src-pwa/custom-service-worker',
// pwaManifestFile: 'src-pwa/manifest.json',
// electronMain: 'src-electron/electron-main',
// electronPreload: 'src-electron/electron-preload'
// },
// https://v2.quasar.dev/quasar-cli-vite/developing-ssr/configuring-ssr
ssr: {
// ssrPwaHtmlFilename: 'offline.html', // do NOT use index.html as name!
// will mess up SSR
// extendSSRWebserverConf (esbuildConf) {},
// extendPackageJson (json) {},
pwa: false,
// manualStoreHydration: true,
// manualPostHydrationTrigger: true,
prodPort: 3000, // The default port that the production server should use
// (gets superseded if process.env.PORT is specified at runtime)
middlewares: [
'render' // keep this as last one
]
},
// https://v2.quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa
pwa: {
workboxMode: 'generateSW', // or 'injectManifest'
injectPwaMetaTags: true,
swFilename: 'sw.js',
manifestFilename: 'manifest.json',
useCredentialsForManifestTag: false,
// useFilenameHashes: true,
// extendGenerateSWOptions (cfg) {}
// extendInjectManifestOptions (cfg) {},
// extendManifestJson (json) {}
// extendPWACustomSWConf (esbuildConf) {}
},
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-cordova-apps/configuring-cordova
cordova: {
// noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
},
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-capacitor-apps/configuring-capacitor
capacitor: {
hideSplashscreen: true
},
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-electron-apps/configuring-electron
electron: {
// extendElectronMainConf (esbuildConf)
// extendElectronPreloadConf (esbuildConf)
inspectPort: 5858,
bundler: 'packager', // 'packager' or 'builder'
packager: {
// https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
// OS X / Mac App Store
// appBundleId: '',
// appCategoryType: '',
// osxSign: '',
// protocol: 'myapp://path',
// Windows only
// win32metadata: { ... }
},
builder: {
// https://www.electron.build/configuration/configuration
appId: 'kitty'
}
},
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex
bex: {
contentScripts: [
'my-content-script'
],
// extendBexScriptsConf (esbuildConf) {}
// extendBexManifestJson (json) {}
}
}
});
quasar dev by itself works as expected
You need to downgrade vite dependency to version v2.9.15. At the start of the build log you can see that Quasar is using that version.
I am writing my first NPM package as a plugin for Vite. I had all the code in my plugin before in a separate file inside the same code base, but now I have split and separated it into a it's own nuget package.
When I use the package in my sample projects and I run npm run dev I get this error which I didn't get before:
failed to load config from C:\Users\cjime\Desktop\Open Source Projects\Vite.NET\dotnet-vite\ClientApp\vite.config.ts
error when starting dev server:
file:///C:/Users/cjime/Desktop/Open%20Source%20Projects/Vite.NET/dotnet-vite/ClientApp/vite.config.ts.timestamp-1674663682047.mjs:4
import ViteDotNet from "file:///C:/Users/cjime/Desktop/Open%20Source%20Projects/Vite.NET/dotnet-vite/ClientApp/node_modules/vite-dotnet/lib/index.js";
^^^^^^^^^^
SyntaxError: The requested module 'file:///C:/Users/cjime/Desktop/Open%20Source%20Projects/Vite.NET/dotnet-vite/ClientApp/node_modules/vite-dotnet/lib/index.js' does not provide an export named 'default'
Which is strange because there is a default export. The following is the only code file used/exposed in the plugin, it's not a large codebase
import type { UserConfig } from 'vite';
import { basename, posix } from 'path';
export type PluginConfig = {
port: number;
appFolder: string;
entrypoint: string;
prodServerOrigin?: string; //Not for initial release. Use when hosting app files in a remote server such as S3 or Azure Blob.
}
function outputOptions (assetsDir: string) {
// Internal: Avoid nesting entrypoints unnecessarily.
const outputFileName = (ext: string) => ({ name }: { name: string }) => {
const shortName = basename(name).split('.')[0]
return posix.join(assetsDir, `${shortName}.[hash].${ext}`)
}
return {
entryFileNames: outputFileName('js'),
chunkFileNames: outputFileName('js'),
assetFileNames: outputFileName('[ext]'),
}
}
export default function ViteDotNetPlugin(entrypoint: string, port: number = 5173, appFolder: string = "ClientApp") {
return ViteDotNet({ port, appFolder: appFolder, entrypoint: entrypoint });
}
function ViteDotNet(config: PluginConfig) {
return {
name: 'ViteDotNet',
enforce: "post" as const,
config: (userConfig: UserConfig/*, { command, mode }*/) => {
//https://vitejs.dev/config/server-options.html#server-origin
return {
server: {
origin: `http://localhost:${config.port}`,
hmr: {
protocol: 'ws'
}
},
build: {
outDir: `../wwwroot`,
emptyOutDir: false,
manifest: `${config.appFolder}/manifest.json`,
rollupOptions: {
// overwrite default .html entry
input: config.entrypoint,
output: outputOptions(config.appFolder)
}
}
}
}
};
};
Now, I realize this might be because of an error on my part when configuring the package.json file. Here it is:
{
"name": "vite-dotnet",
"version": "0.2.8",
"description": "Integration plugin for ASP.NET Core and ViteJS",
"main": "lib/index.js",
"keywords": [
"vite",
"vite-integration",
"react",
"svelte",
"vue",
"solidjs",
"lit"
],
"repository": {
"type": "git",
"url": "git+https://github.com/techgems/Vite.NET"
},
"type": "module",
"files": ["lib/**/*"],
"types": "lib/index.d.ts",
"author": "TechGems",
"license": "MIT",
"scripts": {
"build": "tsc"
},
"devDependencies": {
"#types/node": "^18.11.18",
"tslib": "^2.4.0",
"typescript": "^4.6.4",
"vite": "^3.2.3"
}
}
Here is also a link to the entire codebase of the plugin:
https://github.com/techgems/Vite.NET/tree/master/ViteDotNet/Plugin
as well as the NPM package: https://www.npmjs.com/package/vite-dotnet
Thanks in advance and please let me know if you need more information.
quasar build gives vite error.
From the last issue, quasar: When building an app it gives vite error. I have changed "vite": "^3" to "vite": "2.9.14" in package.json , that resolved that last error, though now I'm getting a new one
deb2302user#deb2302:~/tmp2303/vue/kitty$ quasar build
.d88888b.
d88P" "Y88b
888 888
888 888 888 888 8888b. .d8888b 8888b. 888d888
888 888 888 888 "88b 88K "88b 888P"
888 Y8b 888 888 888 .d888888 "Y8888b. .d888888 888
Y88b.Y8b88P Y88b 888 888 888 X88 888 888 888
"Y888888" "Y88888 "Y888888 88888P' "Y888888 888
Y8b
Build mode............. spa
Pkg quasar............. v2.11.3
Pkg #quasar/app-vite... v1.1.3
Pkg vite............... v2.9.14
Debugging.............. no
Publishing............. no
App • Cleaned build artifact: "/home/deb2302user/tmp2303/vue/kitty/dist/spa"
/home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/#vitejs+plugin-vue-jsx#3.0.0_vite#2.9.14+vue#3.2.45/node_modules/#vitejs/plugin-vue-jsx/dist/index.cjs:40
const filter = vite.createFilter(include || /\.[jt]sx$/, exclude);
^
TypeError: vite.createFilter is not a function
at vueJsxPlugin (/home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/#vitejs+plugin-vue-jsx#3.0.0_vite#2.9.14+vue#3.2.45/node_modules/#vitejs/plugin-vue-jsx/dist/index.cjs:40:23)
at /home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/#quasar+app-vite#1.1.3_lezvi6egse7w7wgglmky3dvexq/node_modules/#quasar/app-vite/lib/config-tools.js:70:40
at Array.forEach (<anonymous>)
at parseVitePlugins (/home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/#quasar+app-vite#1.1.3_lezvi6egse7w7wgglmky3dvexq/node_modules/#quasar/app-vite/lib/config-tools.js:25:11)
at createViteConfig (/home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/#quasar+app-vite#1.1.3_lezvi6egse7w7wgglmky3dvexq/node_modules/#quasar/app-vite/lib/config-tools.js:137:10)
at Object.vite (/home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/#quasar+app-vite#1.1.3_lezvi6egse7w7wgglmky3dvexq/node_modules/#quasar/app-vite/lib/modes/spa/spa-config.js:6:17)
at SpaBuilder.build (/home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/#quasar+app-vite#1.1.3_lezvi6egse7w7wgglmky3dvexq/node_modules/#quasar/app-vite/lib/modes/spa/spa-builder.js:7:37)
at build (/home/deb2302user/tmp2303/vue/kitty/node_modules/.pnpm/#quasar+app-vite#1.1.3_lezvi6egse7w7wgglmky3dvexq/node_modules/#quasar/app-vite/lib/cmd/build.js:162:14)
Node.js v18.14.0
package.json
{
"name": "kitty",
"version": "0.0.1",
"private": true,
"description": "Kitty desc",
"author": "amirny2205 <amirny2205#yandex.ru>",
"scripts": {
"lint": "eslint --ext .js,.ts,.vue ./",
"format": "prettier --write \"**/*.{js,ts,vue,scss,html,md,json}\" --ignore-path .gitignore",
"test": "echo \"No test specified\" && exit 0"
},
"dependencies": {
"#quasar/extras": "^1.0.0",
"#vitejs/plugin-vue-jsx": "^3.0.0",
"#vue/babel-plugin-jsx": "^1.1.1",
"#vue/cli-plugin-babel": "^5.0.8",
"axios": "^0.21.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-vue-jsx": "^3.7.0",
"core-js": "^3.8.3",
"jquery": "^3.6.3",
"pinia": "^2.0.11",
"quasar": "^2.6.0",
"vue": "^3.0.0",
"vue-i18n": "^9.2.2",
"vue-router": "^4.0.0"
},
"devDependencies": {
"#intlify/vite-plugin-vue-i18n": "^3.3.1",
"#quasar/app-vite": "^1.0.0",
"#types/node": "^12.20.21",
"#typescript-eslint/eslint-plugin": "^5.10.0",
"#typescript-eslint/parser": "^5.10.0",
"autoprefixer": "^10.4.2",
"eslint": "^8.10.0",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-vue": "^9.0.0",
"prettier": "^2.5.1",
"typescript": "^4.5.4",
"vite": "2.9.14"
},
"engines": {
"node": "^18 || ^16 || ^14.19",
"npm": ">= 6.13.4",
"yarn": ">= 1.21.1"
},
"productName": "Kitty"
}
quasar.config.js
/* eslint-env node */
/*
* This file runs in a Node context (it's NOT transpiled by Babel), so use only
* the ES6 features that are supported by your Node version. https://node.green/
*/
// Configuration for your app
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js
const { configure } = require('quasar/wrappers');
const path = require('path');
module.exports = configure(function (/* ctx */) {
return {
eslint: {
// fix: true,
// include = [],
// exclude = [],
// rawOptions = {},
warnings: true,
errors: true
},
// https://v2.quasar.dev/quasar-cli-vite/prefetch-feature
// preFetch: true,
// app boot file (/src/boot)
// --> boot files are part of "main.js"
// https://v2.quasar.dev/quasar-cli-vite/boot-files
boot: [
'i18n',
'axios',
],
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
css: [
'app.scss'
],
// https://github.com/quasarframework/quasar/tree/dev/extras
extras: [
// 'ionicons-v4',
// 'mdi-v5',
// 'fontawesome-v6',
// 'eva-icons',
// 'themify',
// 'line-awesome',
// 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
'roboto-font', // optional, you are not bound to it
'material-icons', // optional, you are not bound to it
'material-icons-outlined',
],
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#build
build: {
target: {
browser: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
node: 'node16'
},
vueRouterMode: 'history', // available values: 'hash', 'history'
// vueRouterBase,
// vueDevtools,
// vueOptionsAPI: false,
// rebuildCache: true, // rebuilds Vite/linter/etc cache on startup
// publicPath: '/',
// analyze: true,
// env: {},
// rawDefine: {}
// ignorePublicFolder: true,
// minify: false,
// polyfillModulePreload: true,
// distDir
// extendViteConf (viteConf) {},
// viteVuePluginOptions: {},
vitePlugins: [
['#intlify/vite-plugin-vue-i18n', {
// if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
// compositionOnly: false,
// you need to set i18n resource including paths !
include: path.resolve(__dirname, './src/i18n/**')
}
],
['#vitejs/plugin-vue-jsx', {}
]
]
},
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#devServer
devServer: {
// https: true
open: true // opens browser window automatically
},
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework
framework: {
config: {},
// iconSet: 'material-icons', // Quasar icon set
// lang: 'en-US', // Quasar language pack
// For special cases outside of where the auto-import strategy can have an impact
// (like functional components as one of the examples),
// you can manually specify Quasar components/directives to be available everywhere:
//
components: [
'QLayout',
'QHeader',
'QDrawer',
'QPageContainer',
'QPage',
'QToolbar',
'QToolbarTitle',
'QBtn',
'QBtnGroup',
'QIcon',
'QList',
'QItem',
'QItemSection',
'QItemLabel',
'QTooltip',
'QInput',
'QCard',
'QCardSection',
'QCardActions',
'QDialog',
'QForm',
'QFooter',
'QAvatar',
'QScrollArea',
'QImg',
'QTabs',
'QTab',
'QRouteTab',
'QTabPanels',
'QTabPanel',
'QFab',
'QFabAction',
'QSeparator',
'QBar',
'QSpace',
'QSelect',
'QRadio',
'QTime',
'QDate',
'QPopupProxy',
'QTable',
'QTh',
'QTr',
'QTd',
'QCheckbox',
'QToggle',
'QSpinnerHourglass',
'QPageSticky',
'QTimeline',
'QTimelineEntry',
'QBadge',
'QStepper',
'QStep',
'QStepperNavigation',
'QMenu',
],
directives: [
'ClosePopup'
],
// Quasar plugins
plugins: [
'Notify'
]
},
// animations: 'all', // --- includes all animations
// https://v2.quasar.dev/options/animations
animations: [],
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#sourcefiles
// sourceFiles: {
// rootComponent: 'src/App.vue',
// router: 'src/router/index',
// store: 'src/store/index',
// registerServiceWorker: 'src-pwa/register-service-worker',
// serviceWorker: 'src-pwa/custom-service-worker',
// pwaManifestFile: 'src-pwa/manifest.json',
// electronMain: 'src-electron/electron-main',
// electronPreload: 'src-electron/electron-preload'
// },
// https://v2.quasar.dev/quasar-cli-vite/developing-ssr/configuring-ssr
ssr: {
// ssrPwaHtmlFilename: 'offline.html', // do NOT use index.html as name!
// will mess up SSR
// extendSSRWebserverConf (esbuildConf) {},
// extendPackageJson (json) {},
pwa: false,
// manualStoreHydration: true,
// manualPostHydrationTrigger: true,
prodPort: 3000, // The default port that the production server should use
// (gets superseded if process.env.PORT is specified at runtime)
middlewares: [
'render' // keep this as last one
]
},
// https://v2.quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa
pwa: {
workboxMode: 'generateSW', // or 'injectManifest'
injectPwaMetaTags: true,
swFilename: 'sw.js',
manifestFilename: 'manifest.json',
useCredentialsForManifestTag: false,
// useFilenameHashes: true,
// extendGenerateSWOptions (cfg) {}
// extendInjectManifestOptions (cfg) {},
// extendManifestJson (json) {}
// extendPWACustomSWConf (esbuildConf) {}
},
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-cordova-apps/configuring-cordova
cordova: {
// noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
},
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-capacitor-apps/configuring-capacitor
capacitor: {
hideSplashscreen: true
},
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-electron-apps/configuring-electron
electron: {
// extendElectronMainConf (esbuildConf)
// extendElectronPreloadConf (esbuildConf)
inspectPort: 5858,
bundler: 'packager', // 'packager' or 'builder'
packager: {
// https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
// OS X / Mac App Store
// appBundleId: '',
// appCategoryType: '',
// osxSign: '',
// protocol: 'myapp://path',
// Windows only
// win32metadata: { ... }
},
builder: {
// https://www.electron.build/configuration/configuration
appId: 'kitty'
}
},
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex
bex: {
contentScripts: [
'my-content-script'
],
// extendBexScriptsConf (esbuildConf) {}
// extendBexManifestJson (json) {}
}
}
});
I have a website hosted on CPanel which was previously in React, but I needed to migrate it to NextJS for SEO requirements. Now that I want to deploy it, I struggle to make it work. I followed this video : https://www.youtube.com/watch?v=lex3qZAf_Ok&t=1136s and the official NextJS documentation : https://nextjs.org/docs/advanced-features/custom-server, but in the end, when I add the Node JS app I get a 500 Internal Server Error.
When I execute node server.js on local or through cpanel terminal, it works and shows the website at localhost:3000.
I tried with all my files like in the video, and with a standalone build, but I have the same issue.
My code architecture :
package.json :
{
"name": "newglobal",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "NODE_ENV=production node server.js",
"export": "next build && next export",
"lint": "next lint",
"sitemap": "next-sitemap --config next-sitemap-config.js"
},
"dependencies": {
"#emailjs/browser": "^3.6.2",
"axios": "^0.26.1",
"bootstrap": "^5.1.3",
"moment": "^2.29.3",
"next": "12.1.5",
"react": "^17.0.2",
"react-big-calendar": "^0.40.1",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-multi-carousel": "^2.8.0",
"react-responsive-carousel": "^3.2.23",
"reactstrap": "^9.0.2",
"sass": "^1.50.0",
"sharp": "^0.30.6"
},
"devDependencies": {
"babel-plugin-styled-components": "^2.0.7",
"babel-preset-next": "^1.4.0",
"eslint": "8.13.0",
"eslint-config-next": "12.1.5",
"next-sitemap": "^2.5.28",
"styled-components": "^5.3.5"
}
}
next.config.js
/** #type {import('next').NextConfig} */
const path = require("path");
const nextConfig = {
experimental: {
outputStandalone: true,
},
images : {
domains : ["res.cloudinary.com", 'http://localhost:3000'],
loader : 'imgix',
path : ''
},
reactStrictMode: true,
sassOptions: {
includePaths: [path.join(__dirname, 'src/styles')],
prependData: `#import "variables.scss";`
},
};
module.exports = nextConfig;
jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"#/*":["src/*"],
"#/components/*":["src/components/*"],
"#/styles/*":["src/styles/*"],
"#/context/*":["src/context/*"],
"#/image/*":["public/img/*"]
}
}
}
I use the same server.js as the official documentation, or the following after the standalone build :
process.env.NODE_ENV = "production";
process.chdir(__dirname);
const NextServer = require("next/dist/server/next-server").default;
const http = require("http");
const path = require("path");
// Make sure commands gracefully respect termination signals (e.g. from Docker)
process.on("SIGTERM", () => process.exit(0));
process.on("SIGINT", () => process.exit(0));
let handler;
const server = http.createServer(async (req, res) => {
try {
await handler(req, res);
} catch (err) {
console.error(err);
res.statusCode = 500;
res.end("internal server error");
}
});
const currentPort = parseInt(process.env.PORT, 10) || 3000;
server.listen(currentPort, (err) => {
if (err) {
console.error("Failed to start server", err);
process.exit(1);
}
const addr = server.address();
const nextServer = new NextServer({
hostname: "localhost",
port: currentPort,
dir: path.join(__dirname),
dev: false,
conf: {
env: {},
webpack: null,
webpackDevMiddleware: null,
eslint: { ignoreDuringBuilds: false },
typescript: { ignoreBuildErrors: false, tsconfigPath: "tsconfig.json" },
distDir: "./.next",
cleanDistDir: true,
assetPrefix: "",
configOrigin: "next.config.js",
useFileSystemPublicRoutes: true,
generateEtags: true,
pageExtensions: ["tsx", "ts", "jsx", "js"],
target: "server",
poweredByHeader: true,
compress: true,
analyticsId: "",
images: {
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
path: "",
loader: "imgix",
domains: ["res.cloudinary.com", "http://localhost:3000"],
disableStaticImages: false,
minimumCacheTTL: 60,
formats: ["image/webp"],
dangerouslyAllowSVG: false,
contentSecurityPolicy: "script-src 'none'; frame-src 'none'; sandbox;",
},
devIndicators: {
buildActivity: true,
buildActivityPosition: "bottom-right",
},
onDemandEntries: { maxInactiveAge: 15000, pagesBufferLength: 2 },
amp: { canonicalBase: "" },
basePath: "",
sassOptions: {
includePaths: [
"C:\\Users\\johnk\\OneDrive\\Documents\\Elikya Academy\\global.client\\src\\styles",
],
prependData: '#import "variables.scss";',
},
trailingSlash: false,
i18n: null,
productionBrowserSourceMaps: false,
optimizeFonts: true,
excludeDefaultMomentLocales: true,
serverRuntimeConfig: {},
publicRuntimeConfig: {},
reactStrictMode: true,
httpAgentOptions: { keepAlive: true },
outputFileTracing: true,
staticPageGenerationTimeout: 60,
swcMinify: false,
experimental: {
cpus: 11,
sharedPool: true,
plugins: false,
profiling: false,
isrFlushToDisk: true,
workerThreads: false,
pageEnv: false,
optimizeCss: false,
nextScriptWorkers: false,
scrollRestoration: false,
externalDir: false,
reactRoot: false,
disableOptimizedLoading: false,
gzipSize: true,
swcFileReading: true,
craCompat: false,
esmExternals: true,
isrMemoryCacheSize: 52428800,
serverComponents: false,
fullySpecified: false,
outputFileTracingRoot: "",
outputStandalone: true,
images: { layoutRaw: false },
trustHostHeader: false,
},
configFileName: "next.config.js",
},
});
handler = nextServer.getRequestHandler();
console.log("Listening on port", currentPort);
});
try to 'next build' first before you delopy on CPanel , if you got erorr in next build you must fix it , then try deploy agin
As a workaround because I needed to deploy the website, I removed SSR from my pages and used useEffect instead, and did a next export to deploy it easily.
I have a NuxtJS project that requires a NodeJS program running behind for some functions and logic. The project structure is as follows:
api
assets
components
layouts
middleware
pages
plugins
server
static
store
nuxt.config.js
package.json
nuxt.config.js
module.exports = {
head: {
titleTemplate: '%s',
title: 'Project',
htmlAttrs: {
lang: 'en'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
css: [
'#/assets/css/main.scss'
],
plugins: [
],
components: true,
buildModules: [
'#nuxtjs/vuetify'
],
modules: [
'nuxt-socket-io',
'nuxt-i18n',
'#nuxtjs/axios',
'#nuxtjs/auth-next'
],
io: {
sockets: [
{
name: 'main',
url: process.env.APP_SERVER_URL,
default: true
}
]
},
i18n: {
locales: [
{
code: 'en',
file: 'en-US.js'
}
],
lazy: true,
langDir: 'lang/',
defaultLocale: 'en'
},
serverMiddleware: [
{ path: '/api', handler: '~/api/index.js' },
],
axios: {
baseURL: process.env.APP_SERVER_URL,
},
vuetify: {
customVariables: ['~/assets/variables.scss'],
theme: {
dark: true,
themes: {
dark: {},
light: {}
}
}
},
build: {
extend(config) {}
}
}
package.json
{
"name": "my-project",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nodemon -w server -w nuxt.config.js server",
"build": "nuxt generate",
"start": "cross-env NODE_ENV=production node server",
"generate": "nuxt generate"
},
"dependencies": {
"#nuxtjs/auth-next": "5.0.0-1611574754.9020f2a",
"#nuxtjs/axios": "^5.12.5",
"body-parser": "^1.19.0",
"core-js": "^3.8.3",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"http": "0.0.1-security",
"moment": "^2.29.1",
"nuxt": "^2.14.12",
"nuxt-i18n": "^6.18.0",
"nuxt-socket-io": "^1.1.14"
},
"devDependencies": {
"#nuxtjs/vuetify": "^1.11.3",
"cross-env": "^7.0.3",
"nodemon": "^2.0.7"
}
}
server/index.js
require('dotenv').config();
const isProd = process.env.NODE_ENV === 'production'
const http = require('http')
const app = require('express')()
const server = http.createServer(app)
const io = require('socket.io')(server)
const axios = require('axios')
const { Nuxt, Builder } = require('nuxt')
const config = require('../nuxt.config.js');
config.dev = !isProd;
const nuxt = new Nuxt(config)
const { host, port } = nuxt.options.server
if (config.dev) {
const builder = new Builder(nuxt)
builder.build()
} else {
nuxt.ready()
}
app.use(nuxt.render)
server.listen(port, () => {
console.log(`Server listening on http://${host}:${port}`)
});
// other logic
I need an exe that can be installed in other computers for running the Nodejs server and the Nuxt stuff, like I run the code by npm run dev or npm run build/start in the development computer locally.
I have tried nexe by running nexe -i server but not succeeded. Is there any other way for me to do that?
Thank you.
I think you can take a look at pm2. You can run node server and other stuff with that.
Compiling a Node.js Application into an .exe File
Two of the most commonly used packages used to compile JavaScript files into executables are:
nexe: It is a simple command-line utility that compiles your Node.js application into a single executable file. By default, it converts it into a Windows executable.
pkg: It is a Node.js package that can convert your Node.js app into several executable files for various operating systems (all at once) or of an individual operating system.
enter link description here