Hi I am using Quasar CLI with latest Quasar downloaded yesterday in Windows 10. I have some issues with hot reloading highlighted here: https://www.loom.com/share/3137f7ac86974af78a222a207b7c375e, what is the problem?
So in my case after connecting with Safari to Developer and triggering the problem.
The vendor.js and app.js are loading from wrong URL path such as "account/vendor.js" when it should be "vendor.js".
The index.html should put a / before these perhaps.
Could be due to using routing without the # symbol?
quasar.conf.js has this in the build options.
vueRouterMode: 'history', // available values: 'hash', 'history'
But with the index.html that I can see generated it puts the url as js/app.js and js/vendor.js...
Fix for me was to set these in the devServer and build in quasar.conf.js
It's probably appBase that "fixed it". but this could break other things I suppose depending on how the urls are structured.
// Full list of options: https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-devServer
devServer: {
historyApiFallback: true
// ...
},
// Full list of options: https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
build: {
appBase: '/',
publicPath: '/',
vueRouterBase: '/',
vueRouterMode: 'history', // available values: 'hash', 'history'
// ...
}
Related
I'm using the rollup plugin strip to exclude the console.logs in the production built with following settings
plugins: [
strip({
include: ['**/*.(js|svelte)'],
labels: ['dev'],
functions: ['console.log'],
})
]
I now have the situation that I would like to keep one special log in production. So I created a function in a new file logInProduction.js
export function logInProduction(msg) {
console.log(msg)
throw new Error('PRODUCTION')
}
and added the file to the plugin options by adding this line
exclude: ['logInProduction.js'],
But when calling the function, the error is thrown, so the function was called, but the log before doesn't appear.
Is this because the .js ending is generally included before so the specific exclusion doen't have any effect? Is it possible to do this?
Or is there another maybe better way to keep one specific console.log?
Problem was, that the filename was missing the directory, so
exclude: ['src/utils/logInProduction.js'],
or
exclude: ['**/logInProduction.js'],
does work
I'm building a sveltekit project. One thing I've done is created a custom type of file which is converted to a *.svelte file upon building or running the development server. By default, sveltekit includes the rollup extension rollup-plugin-dynamic-import-variables which is trying to parse my custom file (who knows why?) and throwing an "unexpected token" error. I'm trying to configure that extension to ignore my custom files, but so far without success. Here is my attempted svelte.config.js file:
// #type {import('#sveltejs/kit').Config}
var config;
import adapter from '#sveltejs/adapter-static';
import dynamicImportVariables from 'rollup-plugin-dynamic-import-variables';
config = {
kit: {
// --- hydrate the <div id="svelte"> element in src/app.html
target: '#svelte',
adapter: adapter({
pages: 'build',
assets: 'build',
fallback: null
}),
vite: {
plugins: [
dynamicImportVariables({
warnOnError: true,
exclude: '**'
})
]
}
}
};
export default config;
To be honest about it, I don't use dynamic imports anywhere and therefore would accept as a solution the complete disabling of the extension. But anything that would get it to ignore my custom files would also work.
UPDATE: SvelteKit 1.0.0-beta now requires pages/endpoints to follow a specific naming pattern, so explicit file exclusion should no longer be needed.
SvelteKit specially handles files in the routes/ directory with the following filenames (note the leading + in each filename):
+page.svelte
+page.js
+page.server.js
+error.js
+layout.svelte
+layout.js
+layout.server.js
+server.js
All other files are ignored and can be colocated in the routes/ directory.
If, for some reason, you need to have a file that has a special name shown above, it's currently not possible to exclude that file from special processing.
Original outdated answer:
The rollup-plugin-dynamic-import-variables is actually included by Vite. To configure Vite's plugin, set the build.dynamicImportVarsOptions property:
// svelte.config.js
/** #type {import('#sveltejs/kit').Config} */
const config = {
kit: {
// hydrate the <div id="svelte"> element in src/app.html
target: "#svelte",
vite: {
build: {
dynamicImportVarsOptions: {
exclude: [/node_modules/, /\.starbucks$/],
},
},
},
},
}
export default config
But that's not going to fix the problem...
SvelteKit processes all files under src/routes/ so that they're automatically imported in the output application (in .svelte-kit/build/app.js), which will result in the same error.
Option 1: Private modules
You could exclude a src/routes/*.starbucks file by making it a private module, which has a leading underscore in the filename:
src/routes/_home.starbucks 👈
src/routes/_index.starbucks 👈
src/routes/index.svelte
Option 2: Move files outside src/routes
Alternatively, move those *.starbucks files outside of src/routes/ (e.g., into src/starbucks/ or src/lib/):
src/routes/index.svelte
src/starbucks/home.starbucks 👈
src/starbucks/index.starbucks 👈
src/lib/home.starbucks 👈
src/lib/index.starbucks 👈
I'm currently experiencing the following error when running gatsby develop.
Error: Cannot access Contentful space "*********6qi" on environment "master with access token "************************************
*********kWLc". Make sure to double check them! (value)
- gatsby-node.js:51
[portfolio]/[gatsby-source-contentful]/gatsby-node.js:51:13
- task_queues:94 processTicksAndRejections
node:internal/process/task_queues:94:5
- gatsby-node.js:43 validateContentfulAccess
[portfolio]/[gatsby-source-contentful]/gatsby-node.js:43:3
- validator.js:82 Object.exports.entryAsync
[portfolio]/[joi]/lib/validator.js:82:32
not finished load plugins - 21.846s
My .env.development file is up and working and I have tried using string literals in gastby-config.js as well as using ticks around my Space ID and Access Token as well as no ticks and no string literals. I have also hardcoded these values into gatsby-config.js and this has not worked either.
This is what gatsby-source-contentful looks like:
{
resolve: `gatsby-source-contentful`,
options: {
spaceId: `${process.env.CONTENTFUL_SPACE_ID}`,
accessToken: `${process.env.CONTENTFUL_ACCESS_TOKEN}`,
},
},
At this point, my question is more along the lines of could this be an issue with my code someplace else, and has anyone experienced anything similar?
Thanks.
I found the exact problem as yours. I will show how I solve this problem step by step:
-Step 1: Create a .env file in the root directory. and paste this line CONTENTFUL_ACCESS_TOKEN = YOUR API KEYS
-Step 2: Open gatsby-config.js and paste require("dotenv").config()
then paste this line into your plugins array (Don't forget to change spaceID)
{
resolve: `gatsby-source-contentful`,
options: {
spaceId: "your space ID",
environment: "development",
accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
},
},
if this process doesn't work create a new environment in contentful
contentful add new environment
I would like to ask a question about CommonsChunkPlugin
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
vendor: ['moment'],
app: ['./www/build/main.js']
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js'
},
module: {
rules: [
{ test: /\.(js)$/, use: 'babel-loader' }
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'chunk'
})
]
}
After i run the webpack script, there are 3 files generated (vendor.bundle, app.bundle, chunk.bundle). My questions are:
What is the usage chunk.bundle and why it is generated? I set the config in "entry" and output is depends on the [name] of entry
How can i run the script to all files under a folder? The current setting needs to input one by one.
If my file is too large, how can i split is into some smaller files?
Thanks.
1) The chunk.bundle.js is being generated by the plugin. It operates a little outside of the usual Webpack flow.
2) Not sure what you're getting at, here. You probably need to look at the minChunks setting, or chunks.
3) You can use multiple instances of the plugin. I've found that you have to use the chunks setting on every instance except for one to avoid getting an error. Basically that specifies on what entry files the plugin will operate. You can specify all your entry files in chunks, and then use a function with minChunks to filter out what you want to include in that file.
I am using CKEditor in my MVC application.
I am using "ckeditor-full" (Version 4.4.2) package.
I have included "ckeditor\adapters\jquery.js", and "ckeditor\ckeditor.js" files in the bundle and referenced those bundles in the _Layout.cshtml file.
#Scripts.Render("~/bundles/Scripts/ckeditor")
#Scripts.Render("~/bundles/Scripts/ckeditor/adapters")
"Scripts/ckeditor" folder contains all 352 files that were downloaded with the package.
Following is config.js file (which is residing in "Scripts/ckeditor" folder.
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
config.toolbar = 'Custom';
config.disableNativeSpellChecker = false;
config.browserContextMenuOnCtrl = true;
config.forcePasteAsPlainText = true;
config.toolbar_Custom = [
{ name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', '-', 'RemoveFormat'] },
{ name: 'paste', items: ['PasteText'] },
{ name: 'links', items: ['Link', 'Unlink'] }
];
};
Following is how I display CKEditor for textarea:
$("#idBodyText").ckeditor();
The issue is that, it works fine locally and if running on local IIS in debug mode. However, it doesn't display CKEditor when deployed on IIS with release config.
Any idea what could be the possible reason, and how to resolve this?
Any help on this much appreciated.
Thanks
As a resolution, it turned out that, I had to include following line in my view before loading the bundles -
<script type="text/javascript">
CKEDITOR_BASEPATH = "#Url.Content("~/Scripts/ckeditor/")";
</script>
Check how your bundles generated stylesheet and scripts links in page source:
#Scripts.Render("~/bundles/Scripts/ckeditor")
#Scripts.Render("~/bundles/Scripts/ckeditor/adapters")
It could be a problem with HTTP Error 404 - File or Directory not found or 403.2 - Read access forbidden. - in that case, you should check if files are properly store on serwer (in correct location) and check permissions for that folder.
Also helpful for debugging will be Firebug.
I strongly recommend it to use.