I have setup craterapp version 6.0.6 and I am facing the problem of
image src file not found
on vite build. The dev version is running fine. My vite.config.ts is as follows:-
import { defineConfig } from 'laravel-vite'
import vue from '#vitejs/plugin-vue'
export default defineConfig({
server: {
watch: {
ignored: ['**/.env/**'],
},
},
resolve: {
alias: {
'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
},
},
}).withPlugins(vue)
I am using a function for the source in template as follows
<img :src="getDefaultAvatar()" class="rounded" alt="Default Avatar" />
And getDefaultAvatar() is as follows
function getDefaultAvatar() {
const imgUrl = new URL('/img/default-avatar.jpg', import.meta.url)
return imgUrl
}
Related
in package.json I used these versions of cucumber and esbuild with cypress:
"cypress-cucumber-preprocessor": {
"stepDefinitions": "cypress/support/step_definitions/**/*.{js,ts}"
},
"devDependencies": {
"#badeball/cypress-cucumber-preprocessor": "^11.5.1",
"#bahmutov/cypress-esbuild-preprocessor": "^2.1.5",
"cypress": "^10.7.0"
},
In cypress.config.js I have:
e2e: {
baseUrl: 'http://localhost:4200',
specPattern: 'cypress/e2e/features',
setupNodeEvents(on, config) {
const createEsbuildPlugin =
require('#badeball/cypress-cucumber-preprocessor/esbuild').createEsbuildPlugin
const createBundler = require('#bahmutov/cypress-esbuild-preprocessor')
require('#badeball/cypress-cucumber-preprocessor').addCucumberPreprocessorPlugin
on('file:preprocessor', createBundler({
plugins: [createEsbuildPlugin(config)],
}));
}
},
Now, this is working fine, no issues. But after I upgraded the cucumber preprocessor to:
"#badeball/cypress-cucumber-preprocessor": "^15.1.2",
and cypress version to 12.3.0
then ran npm install and started cypress test runner, I can't run any test.
After starting the test runner, however I can see all my tests there, but after I click any test, there is an error: Cypress could not detect tests in this file and this:
Error: Build failed with 1 error:
node_modules/common-ancestor-path/index.js:17:37: ERROR: [plugin: feature] Reduce of empty array with no initial value
at failureErrorWithLog (C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:1605:15)
at C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:1251:28
at runOnEndCallbacks (C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:1034:63)
at buildResponseToResult (C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:1249:7)
at C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:1358:14
at C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:666:9
at handleIncomingPacket (C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:763:9)
at Socket.readFromStdout (C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:632:7)
at Socket.emit (node:events:527:28)
at addChunk (node:internal/streams/readable:324:12)
at readableAddChunk (node:internal/streams/readable:297:9)
at Readable.push (node:internal/streams/readable:234:10)
at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)
When I downgrade the cucumber preprocessor and cypress, it is working again. Is there anything I should change in config file or what is the issue?
I tried both versions, "#badeball/cypress-cucumber-preprocessor": "^15.1.2" worked ok but I did have to modify your config in line with the sample on the badeball repo:
awaiting the addCucumberPreprocessorPlugin() call
passing in the on, config params
returning the config at the end of setupNodeEvents()
putting a wildcard into specPattern (could explain test-not-found error)
const { defineConfig } = require("cypress");
module.exports = defineConfig({
e2e: {
// baseUrl: 'http://localhost:4200',
specPattern: "**/*.feature",
// prefix async
async setupNodeEvents(on, config) {
const createEsbuildPlugin = require('#badeball/cypress-cucumber-preprocessor/esbuild').createEsbuildPlugin
const createBundler = require('#bahmutov/cypress-esbuild-preprocessor')
// await here
await require('#badeball/cypress-cucumber-preprocessor').addCucumberPreprocessorPlugin(on, config)
on('file:preprocessor', createBundler({
plugins: [createEsbuildPlugin(config)],
}));
// return any mods to Cypress
return config
}
},
});
So as I still had issues with using esbuild, I replaced it with browserify:
const { defineConfig } = require("cypress");
const preprocessor = require("#badeball/cypress-cucumber-preprocessor");
const browserify = require("#badeball/cypress-cucumber-preprocessor/browserify");
async function setupNodeEvents(on, config) {
await preprocessor.addCucumberPreprocessorPlugin(on, config);
on("file:preprocessor", browserify.default(config));
return config;
}
module.exports = defineConfig({
e2e: {
baseUrl: 'http://localhost:4200',
specPattern: "**/*.feature",
setupNodeEvents,
},
});
So now the package.json looks like:
"#badeball/cypress-cucumber-preprocessor": "^15.1.2",
"#cypress/browserify-preprocessor": "^3.0.2",
"cypress": "^12.3.0",
I also needed to replace all AND commands in step definitions js files, e.g.:
Before:
import { And, Then } from "#badeball/cypress-cucumber-preprocessor"
And("I select Checkbox", () => {}
Now:
import { When, Then } from "#badeball/cypress-cucumber-preprocessor"
When("I select Checkbox", () => {}
As And should be used in feature files, and in step definitions only When, Then.
With this config the latest cypress works with the latest cucumber and browserify.
I'm using vite to compile assets in laravel, everything is going well on the local development. But when I build the assets for production vite build and then I open the laravel in the browser abc.com then the website is automatically redirecting to abc.com/build. I don't want this behaviour, I want to be located everything on the root domain. abc.com.
I tried different configuration, base configration in the vite.config.json but still not able to solve that.
Can you tell me how I can solve it? So the root link should not be redirected to /build.
Here is my vite.config.json.
// vite.config.js
import laravel from "laravel-vite-plugin";
import { defineConfig } from "vite";
import vue from "#vitejs/plugin-vue";
import {
ElementPlusResolver,
HeadlessUiResolver
} from "unplugin-vue-components/resolvers";
import IconsResolver from "unplugin-icons/resolver";
import Icons from "unplugin-icons/vite";
import Components from "unplugin-vue-components/vite";
import vueJsx from "#vitejs/plugin-vue-jsx";
import { resolve } from "path";
import AutoImport from "unplugin-auto-import/vite";
export default defineConfig({
plugins: [
vue(),
vueJsx(),
laravel(["src/main.ts"]),
Icons({
/* options */
}),
Components({
dts: true,
resolvers: [
IconsResolver(),
ElementPlusResolver(),
HeadlessUiResolver({
prefix: "Tw"
})
// untitled-uiUiResolver({
// prefix: "x"
// })
],
dirs: [
"./src/untitled-ui/components/**",
"./src/components/**",
"./src/layouts/**",
"./src/forms/**",
"./src/sections/**",
"./src/popper/**"
]
}),
AutoImport({
include: [
/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
/\.vue$/,
/\.vue\?vue/, // .vue
/\.md$/ // .md
],
imports: [
"vue",
"vue-router"
// {
// "#/untitled-ui/utils/use-api": [
// "api",
// ["geoApi", "geo"],
// "apiGet",
// "apiPost",
// "apiPatch",
// "apiDelete"
// ]
// }
],
vueTemplate: false,
dirs: [
"./src/untitled-ui/components/**",
"./src/untitled-ui/utils/**"
],
dts: "./auto-imports.d.ts",
eslintrc: {
enabled: false, // Default `false`
filepath: "./.eslintrc-auto-import.json", // Default `./.eslintrc-auto-import.json`
globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
}
})
// laravel(["resources/css/app.css", "resources/js/app.js"])
],
resolve: {
alias: {
"#": resolve(__dirname, "src")
}
},
});
I have just removed "import.meta.env.BASE_URL" which located in createWebHistory() of vue router setting and it works correctly.
/resource/js/router/index.js: createWebHistory(import.meta.env.BASE_URL) => createWebHistory()
Check this link for Laravel Vite Docs
In blade template html head
<head>
{{
Vite::useHotFile(storage_path('vite.hot')) // Customize the "hot" file...
->useBuildDirectory('bundle') // Customize the build directory...
->useManifestFilename('assets.json') // Customize the manifest filename...
->withEntryPoints(['resources/js/app.js']) // Specify the entry points...
}}
</head>
Within the vite.config.js file
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
hotFile: 'storage/vite.hot', // Customize the "hot" file...
buildDirectory: 'bundle', // Customize the build directory...
input: ['resources/js/app.js'], // Specify the entry points...
}),
],
build: {
manifest: 'assets.json', // Customize the manifest filename...
},
});
You should change the buildDirectory value to './'
But then problem is index.php and .htaccess is removed because the public directory is cleaned.
use this code inAppServiceProvider on register method:
$this->app->bind('path.public', function () {
return base_path('public_html');
});
With this code, the manifest.json problem is solved
This is a crosspost from my github discussion, but I wanted to see if anyone has any thoughts here.
I'm using vite for an npm package that's in "library mode." I have 2 files:
utilities.ts
export function thisGetsRemovedInBundle() {
console.log('This should be in the bundle!');
}
export function thisIsUsed() {
console.log('Used!');
return 1;
}
components/index.ts
import { thisIsUsed } from '../utilities';
export default {
Hello: thisIsUsed(),
};
vite.config.ts
import { defineConfig } from 'vite';
import vue from '#vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
build: {
lib: {
entry: 'components/index.ts',
formats: ['es'],
},
rollupOptions: {
external: ['vue'],
input: {
index: 'components/index.ts',
utilities: 'utilities.ts',
},
output: {
dir: 'dist',
format: 'es',
entryFileNames: '[name].js',
},
},
},
});
When I build this on a Windows 10 machine, it produces the following in index.js:
function thisIsUsed() {
console.log("Used!");
return 1;
}
var index = {
Hello: thisIsUsed()
};
export { index as default };
On Ubuntu, it produces this:
import { thisIsUsed } from "./utilities.js";
var index = {
Hello: thisIsUsed()
};
export { index as default };
Notice in the Windows build, it doesn't import the function but rather adds it as if it's part of index.js. I would expect it to be like the latter because in the Windows bundle, it has duplicated code (both files have a copy of thisIsUsed).
Is there some fundamental npm or node magic that I'm missing between these builds? If so, how do I solve this issue so my build always looks like the Ubuntu build (without having to use a Linux machine or Unix shell).
I ended up reporting a bug here, and while it appears valid, it can be fixed easily by using path.resolve and __dirname when defining the path to the input files. e.g. in the vite.config.ts above, it should be:
import { defineConfig } from 'vite';
import vue from '#vitejs/plugin-vue';
import path from 'path';
export default defineConfig({
plugins: [vue()],
build: {
lib: {
entry: 'components/index.ts',
formats: ['es'],
},
rollupOptions: {
external: ['vue'],
input: {
index: path.resolve(__dirname, 'components/index.ts'),
utilities: path.resolve(__dirname, 'utilities.ts'),
},
output: {
dir: 'dist',
format: 'es',
entryFileNames: '[name].js',
},
},
},
});
I am new to vueppress.
I followed the docs here to create a documentation site. things went well but the search field/input didn't show up. I tried to follow the plugin installation docs here but I got:
I need to install #vuepress/shared-utils
after that I had to install #vue/component-compiler-utils too
but was unable to see the search input. I also tried to add the following to my ./docs/.vuepress/config.ts but still no luck.
plugins: [
[
'#vuepress/plugin-search',
{
searchMaxSuggestions: 10
}
],
]
I don't want to use Algoia search as this is internal documentation.
I had the same issue. Everything was working except the search box was not visible.
The issue was that my ...docs/.vuepress/config.ts was not structured properly. To fix it I followed exactly what the VuePress documentation instructed.
The working config.ts structure
import { defaultTheme } from '#vuepress/theme-default'
import { searchPlugin } from '#vuepress/plugin-search'
module.exports = {
theme: defaultTheme({
...
}),
plugins: [
searchPlugin({
...
})
]
}
Currently I am using VuePress v2.0.0-beta.45
and I used the following to install what I needed:
npm i -D #vuepress/plugin-search#next
npm i -D #vuepress/plugin-register-components#next
Detailed config.ts that is working for me
import { path } from '#vuepress/utils'
import { defaultTheme } from '#vuepress/theme-default'
// Plugins
import { searchPlugin } from '#vuepress/plugin-search'
import { registerComponentsPlugin } from '#vuepress/plugin-register-components'
import navBarItems from './public/navbar'
import sideBar from './public/sidebar'
// SEE: https://v2.vuepress.vuejs.org/reference/default-theme/config.html#config
module.exports = {
// Site Config: https://v2.vuepress.vuejs.org/reference/config.html#site-config
lang: 'en-US',
title: 'Title on Tab and Navbar',
description: '',
// https://v2.vuepress.vuejs.org/reference/default-theme/config.html
theme: defaultTheme({
logo: 'logo-light.png',
logoDark: 'logo-dark.png',
//https://v2.vuepress.vuejs.org/reference/default-theme/config.html#navbar
navbar: navBarItems,
// https://v2.vuepress.vuejs.org/reference/default-theme/config.html#sidebar
sidebar: sideBar
}),
plugins: [
// https://v2.vuepress.vuejs.org/reference/plugin/register-components.html
registerComponentsPlugin({
componentsDir: path.resolve(__dirname, './components')
}),
// https://v2.vuepress.vuejs.org/reference/plugin/search.html#search
searchPlugin({
// getExtraFields: (page) => page.frontmatter.tags,
maxSuggestions: 15,
hotKeys: ['s', '/'],
locales: {
'/': {
placeholder: 'Search',
}
}
})
],
}
Note that I keep my sidebar array and navbar object in different files.
Also I couldn't find any TypeScript reference for the config in VuePress 2x
I'm not able to import files in my fusebox project and keep seeing the following error:
GET http://localhost:4444/hello.ts 404 (Not Found)
I've set my import statements correctly and don't understand what's causing the error. My project structure looks like this:
The config file:
Sparky.task("config", () => {
fuse = FuseBox.init({
homeDir: "src",
output: "dist/$name.js",
hash: isProduction,
sourceMaps: !isProduction,
plugins: [
[SassPlugin(), CSSPlugin()],
CSSPlugin(),
WebIndexPlugin({
target: "index.html",
template: "src/index.html"
}),
WebIndexPlugin({
target: "login.html",
template: "src/login.html"
}),
isProduction && UglifyJSPlugin()
],
});
// vendor should come first
vendor = fuse.bundle("vendor")
.instructions("~ js/indexView.ts");
// out main bundle
app = fuse.bundle("app")
.instructions(`!> js/indexView.ts`);
if (!isProduction) {
fuse.dev();
}
});
Hello.ts:
export function hello(name: string) {
return `Hello ${name}`;
}
IndexView.ts:
import {hello} from "./hello.ts";
const message: string = `This is the index page`;
console.log(hello(message));
You can also find this project here on Github.