I'm struggling with configuring a project set with Vite4, Vue3.
App.vue should simply import a module defined in other min.js file,
but it isn't and showing an error "{module name} is not defined".
Glad to be know if there is anything I have missed.
Thank you in advance!
package.json
{
"name": "test-project",
"version": "0.0.3",
"scripts": {
"dev": "vite --host --port 3333",
"start:dev": "vite --port 80 --mode dev",
"start:prod": "vite --host --port 80 --mode production",
"build": "vite build",
"build:dev": "vite build --mode dev",
"build:prod": "vite build --mode production",
"serve": "vite preview --open",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
"format": "prettier . --write",
"test:unit": "jest"
},
"dependencies": {
"#babel/preset-env": "^7.16.5",
"#bundled-es-modules/axios": "^0.21.1",
"#datadog/browser-rum": "^4.15.0",
"#j-t-mcc/vue3-chartjs": "^1.2.0",
"#juggle/resize-observer": "^3.3.1",
"#popperjs/core": "^2.10.2",
"#rollup/plugin-commonjs": "^24.0.0",
"#rollup/plugin-node-resolve": "^15.0.1",
"#stomp/stompjs": "^6.1.2",
"chart.js": "^3.7.0",
"crypto-js": "^4.1.1",
"element-plus": "^1.2.0-beta.6",
"esbuild": "^0.14.5",
"file-saver": "^2.0.5",
"mitt": "^3.0.0",
"moment": "^2.29.1",
"moment-timezone": "^0.5.37",
"path": "^0.12.7",
"sockjs-client": "^1.5.2",
"swiper": "^7.4.1",
"vite-plugin-html": "^3.2.0",
"vue": "^3.2.16",
"vue-chart-3": "^3.0.4",
"vue-cookie-next": "^1.3.0",
"vue-router": "^4.0.12",
"vue-universal-modal": "^1.1.3",
"vue-zoomer": "^0.4.0-beta.2",
"vue3-lottie": "^2.1.0",
"vuex": "^4.0.2",
"webstomp-client": "^1.2.6",
"yup": "^0.32.11"
},
"devDependencies": {
"#types/jest": "^27.0.3",
"#vitejs/plugin-vue": "^4.0.0",
"#vue/test-utils": "^2.0.0-rc.17",
"eslint": "^8.3.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-vue": "^8.1.1",
"jest": "^26.6.3",
"prettier": "^2.5.0",
"sass": "^1.45.1",
"ts-jest": "^26.5.6",
"vite": "^4.0.0",
"vue-jest": "^5.0.0-alpha.10"
}
}
vite.config.js
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
import { splitVendorChunkPlugin } from "vite";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [splitVendorChunkPlugin(), vue()],
})
index.html (nothing should have been changed from default settings...)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import '../src/assets/js/no-working-logic.min.js'; <- this is problem
import 'element-plus/dist/index.css';
createApp(App).mount('#app')
App.vue (partial)
<script>
import {onMounted, ref} from 'vue';
export default {
setup() {
const password = ref("");
onMounted(() => {
try {
const passwordId = document.getElementById('password');
const passwordRandom = new KeypadSuit(pinRandom, {
--- some random logic here ---
// new Keypadsuit <- this Keypadsuit is defined in no-working-logic.min.js
} catch (e) {
alert(e)
}
});
return {
password
}
}
}
</script>
<template>
<el-form-item prop="password">
<el-input
id="password"
type="password"
placeholder="비밀번호"
v-model="password"
maxlength="4"
>
</el-input>
</el-form-item>
</template>
the problem is(as described on App.vue logic),
no-working-logic.min.js works well on other environments except these.
I have tried with some plugins avaliable on Vite and rollupOptions,
but it was not enough to declare and solve this error.
Should any other conditions/ additional codes be shared, please let me know! Thanks!
Related
the problem that i don't know how to solve it is (TypeError: Cannot read properties of undefined (reading 'call')) basically i have no idea where it can be in the console i don't have thread only on the error page
this is what my app looks like
app/studio/[[...index]]/page.tsx
'use client'
import {NextStudio} from 'next-sanity/studio'
import config from '../../../sanity.config'
export default function StudioPage() {
// Supports the same props as `import {Studio} from 'sanity'`, `config` is required
return <NextStudio config={config} />
}
app/studio/[[...index]]/head.tsx
export {NextStudioHead} from 'next-sanity/studio/head'
import {NextStudioHead} from 'next-sanity/studio/head'
export default function CustomStudioHead() {
return (
<>
<NextStudioHead favicons={false} />
<link
rel="icon"
type="image/png"
sizes="32x32"
href="https://www.sanity.io/static/images/favicons/favicon-32x32.png"
/>
</>
)
}
app/studio/[[...index]]/head.tsx
'use client'
import config from '../../../sanity.config'
import NextStudioLoading from 'next-sanity/studio/loading'
export default function Loading() {
return <NextStudioLoading config={config} />
}
next.config.js
module.exports = {
reactStrictMode: true,
experimental:{
appDir: true
}
}
sanity.cli.ts
import {defineCliConfig} from 'sanity/cli'
export default defineCliConfig({
api: {
projectId: process.env.NEXT_PROJECT_ID,
dataset: 'production'
}
})
sanity.config.ts
import {defineCliConfig} from 'sanity/cli'
export default defineCliConfig({
api: {
projectId: process.env.NEXT_PROJECT_ID,
dataset: 'production'
}
})
package.json
{
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"#portabletext/react": "^2.0.0",
"#sanity/image-url": "^1.0.1",
"next": "latest",
"next-sanity": "^3.1.3",
"prop-types": "^15.8.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"#sanity/vision": "^3.0.0",
"sanity": "^3.0.0",
"styled-components": "^5.2.0"
},
"devDependencies": {
"#sanity/eslint-config-studio": "^2.0.1",
"#types/node": "18.11.3",
"#types/react": "18.0.21",
"#types/react-dom": "18.0.6",
"autoprefixer": "^10.4.12",
"postcss": "^8.4.18",
"tailwindcss": "^3.2.1",
"typescript": "4.8.4"
}
}
I faced the same error and solve it by installing the canary version of next 13 "npm i next#13.0.8-canary.2"
I'm having an issue using pinia, Previously I used vuex on my project but I wanted to migrate to pinia to handle my store. So I think, I setup pinia properly. So I can run the serv of my application without issues. But here is what i get when i open the page (PS: The vue dev tools is not anymore detected):
Here is my file package.json:
{
"name": "ecomm-challenge",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^6.1.1",
"#fortawesome/free-regular-svg-icons": "^6.1.1",
"#fortawesome/free-solid-svg-icons": "^6.1.1",
"#fortawesome/vue-fontawesome": "^3.0.0-4",
"core-js": "^3.6.5",
"pinia": "^2.0.14",
"vue": "^3.0.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.15",
"#vue/cli-plugin-eslint": "~4.5.15",
"#vue/cli-service": "~4.5.15",
"#vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"vue-cli-plugin-pinia": "~0.1.3"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
and here you can find my main.js file:
import { createApp } from "vue";
import App from "./App.vue";
import { library } from "#fortawesome/fontawesome-svg-core";
import { faCartShopping } from "#fortawesome/free-solid-svg-icons";
import { createPinia } from "pinia";
import { FontAwesomeIcon } from "#fortawesome/vue-fontawesome";
library.add(faCartShopping);
const pinia = createPinia();
createApp(App)
.use(pinia)
.component("font-awesome-icon", FontAwesomeIcon)
.mount("#app");
Here is my github if someone want to check the code: https://github.com/Elsong1120/Ecomm-challenge
Thanks to anyone who will help me.
Had similar issues this is what helped me:
1st create a new file in store folder \store\store.js wich looks like this:
import { createPinia, setActivePinia } from "pinia";
const pinia = createPinia();
setActivePinia(pinia);
export default pinia;
2nd import the pinia (exported from \store\store.js) into your main.js
import { createApp } from 'vue';
import pinia from './stores/store.js';
import App from './App.vue';
const app = createApp(App);
app.use(pinia)
app.mount('#app');
After I run the build script in svelte project together with tailwind after deployment it does not recognize the styling of tailwind but it shows it as plain html.
Also how can I import the folder images in index.html or should I import them one by one ?
1.This is my package.json file
{
"name": "svelte-app",
"version": "1.0.0",
"scripts": {
"watch:tailwind": "postcss public/tailwind.css -o public/index.css -w",
"build:tailwind": "cross-env NODE_ENV=production postcss public/tailwind.css -o public/index.css",
"build": "yarn run build:tailwind && rollup -c",
"start": "sirv public",
"serve": "serve public -p 80",
"dev": "concurrently \"rollup -c -w\" \"npm run watch:tailwind\""
},
"devDependencies": {
"#rollup/plugin-commonjs": "^16.0.0",
"#rollup/plugin-node-resolve": "^10.0.0",
"autoprefixer": "^10.0.4",
"axios": "^0.26.1",
"concurrently": "^5.3.0",
"cross-env": "^7.0.3",
"postcss": "^8.1.14",
"postcss-cli": "^8.3.0",
"rollup": "^2.3.4",
"rollup-plugin-css-only": "^3.0.0",
"rollup-plugin-livereload": "^2.0.0",
"rollup-plugin-svelte": "^7.0.0",
"rollup-plugin-terser": "^7.0.0",
"svelte": "^3.0.0",
"tailwind": "^4.0.0",
"tailwindcss": "^2.0.1"
},
"dependencies": {
"blueimp-md5": "^2.19.0",
"filepond": "^4.30.3",
"filepond-plugin-image-exif-orientation": "^1.0.11",
"filepond-plugin-image-preview": "^4.6.11",
"flowbite": "^1.4.1",
"js-md5": "^0.7.3",
"jshashes": "^1.0.8",
"md5": "^2.3.0",
"nodemon": "^2.0.15",
"page": "^1.11.6",
"password-hash": "^1.2.2",
"sirv-cli": "^1.0.0",
"svelte-filepond": "^0.2.0",
"svelte-spa-router": "^3.2.0",
"uuid": "^8.3.2"
}
}
2.Tailwind config.js file
module.exports = {
purge: ["./src/**/*.html", "./src/**/*.js"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
};
3.This is the index.html file after building.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<link rel='icon' type='image/png' href='./favicon.png'>
<!-- <link rel='stylesheet' href='./global.css'> -->
<link rel='stylesheet' href='./build/bundle.css'>
<link rel="stylesheet" href="./index.css">
<link rel="stylesheet" href="./tailwind.css">
<script defer src='./bundle.js'></script>
</head>
<body>
</body>
</html>
4.This is the postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
I created a fresh Vue 3 app with vue-cli with Babel, ESlint, Prettier and no CSS pre-formatter. I try to load a .css file from the style tag of a component, but when I open it in the browser devtools I see an HTML document with the "please enable Javascript" error message.
Am I doing something wrong in my imports? The same import code worked fine with Vue 2.
Note that the CSS code works when I write it directly in the style tag rather than importing a separate file. It also works when I import it globally in the main.js of the Vue app. It just doesn't work when importing a separate file as exampled below.
Thank you for your help.
The App.vue from which I try to load a CSS file:
<template>
<div class="container-fluid">
<div class="row" id="__main-row" v-if="auth">
<main class="col-md-9 ml-sm-auto col-lg-10 px-4">
<router-view />
</main>
</div>
<div id="__main-row" v-else>
<main>
<router-view />
</main>
</div>
</div>
</template>
<script>
export default {
computed: {
auth() {
return this.$store.state.auth.user;
}
},
watch: {
$route() {
this.$store.commit('alert/reset');
}
}
};
</script>
<style>
#import '/assets/css/main.css';
</style>
The CSS file when I open it in devtools:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="/favicon.ico" />
<title>vue-front</title>
<link href="/js/about.js" rel="prefetch"><link href="/js/app.js" rel="preload" as="script"><link href="/js/chunk-vendors.js" rel="preload" as="script"></head>
<body>
<noscript>
<strong
>We're sorry but vue-front doesn't
work properly without JavaScript enabled. Please enable it to
continue.</strong
>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="/js/chunk-vendors.js"></script><script type="text/javascript" src="/js/app.js"></script></body>
</html>
package.json:
{
"name": "vue-front",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"dev": "npm run serve & (cd api && npm run dev)"
},
"dependencies": {
"axios": "^0.21.1",
"bootstrap": "^4.6.0",
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0",
"vuelidate": "^0.7.6",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"#popperjs/core": "^2.9.0",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-plugin-vuex": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0",
"#vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^7.0.0-0",
"jquery": "^3.6.0",
"prettier": "^1.19.1"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended",
"#vue/prettier"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"prettier": {
"tabWidth": 4,
"singleQuote": true,
"arrowParens": "always"
},
"babel": {
"presets": [
"#vue/cli-plugin-babel/preset"
]
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
I have a vuetify application that is set up using vue cli. Unfortunately, some CSS styles are not applied properly.
Example: I am using a v-text-field which is rendered fine except that the input element gets borders set by user agent stylesheet.
I saw this post, and followed its advise to explicitly import VTextField in my main.ts. The result is that I do get the correct CSS loaded and applied to my input field, but unfortunately only in dev mode (npm run serve). When I build my app for production (npm run build), the styles are not linked.
Any advise?
main.ts (with explicitly loading components like VTextField):
import "material-design-icons-iconfont/dist/material-design-icons.css"; // Ensure you are using css-loader
import "../node_modules/typeface-roboto/index.css";
import Vue from "vue";
import { VBtn, VCol, VContainer, VList, VRow, VTextField } from "vuetify/lib";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import vuetify from "./plugins/vuetify";
Vue.config.productionTip = false;
Vue.use(vuetify, {
iconfont: "md",
components: {
VBtn,
VCol,
VContainer,
VList,
VRow,
VTextField
}
});
new Vue({
router,
store,
vuetify,
render: h => h(App)
}).$mount("#app");
App.vue:
<v-app>
<TopNavigationbar />
<v-content>
<v-container fluid>
<router-view></router-view>
</v-container>
</v-content>
</v-app>
</template>
<script lang="ts">
import Vue from "vue";
import TopNavigationbar from "./components/TopNavigationbar.vue";
export default Vue.extend({
name: "App",
components: {
TopNavigationbar
},
data: () => ({
//
})
});
</script>
<style lang="scss">
#import "../node_modules/typeface-roboto/index.css";
$font-stack: Roboto, sans-serif;
#app {
font: 100% $font-stack;
}
</style>
And package.json:
{
"name": "rpgbattle-ui",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "./node_modules/.bin/vue-cli-service serve",
"build": "./node_modules/.bin/vue-cli-service build",
"test:unit": "./node_modules/.bin/vue-cli-service test:unit",
"lint": "./node_modules/.bin/vue-cli-service lint"
},
"dependencies": {
"axios": "^0.19.2",
"core-js": "^3.6.4",
"material-design-icons-iconfont": "^5.0.1",
"sockjs-client": "^1.4.0",
"stompjs": "^2.3.3",
"uuid": "^7.0.3",
"vue": "^2.6.11",
"vue-class-component": "^7.2.3",
"vue-property-decorator": "^8.4.2",
"vue-router": "^3.1.6",
"vuetify": "^2.2.26",
"vuex": "^3.3.0"
},
"devDependencies": {
"#types/jest": "^24.0.19",
"#types/sockjs-client": "^1.1.1",
"#types/stompjs": "^2.3.4",
"#types/uuid": "^7.0.3",
"#typescript-eslint/eslint-plugin": "^2.30.0",
"#typescript-eslint/parser": "^2.30.0",
"#vue/cli-plugin-babel": "~4.3.0",
"#vue/cli-plugin-eslint": "~4.3.0",
"#vue/cli-plugin-router": "~4.3.0",
"#vue/cli-plugin-typescript": "~4.3.0",
"#vue/cli-plugin-unit-jest": "~4.3.0",
"#vue/cli-plugin-vuex": "~4.3.0",
"#vue/cli-service": "~4.3.0",
"#vue/eslint-config-prettier": "^6.0.0",
"#vue/eslint-config-typescript": "^5.0.2",
"#vue/test-utils": "1.0.0-beta.31",
"eslint": "^6.8.0",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-vue": "^6.1.2",
"material-design-icons-iconfont": "^5.0.1",
"node-sass": "^4.14.0",
"prettier": "^1.19.1",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"typeface-roboto": "0.0.75",
"typescript": "~3.8.3",
"vue-cli-plugin-vuetify": "~2.0.5",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.3.0"
},
"engines": {
"node": "^10.14.1",
"npm": "^6.4.1"
}
}
I solved the problem by cleaning up my code, not sure which change exactly made the difference:
I had a duplicate call of Vue.use(Vuetify), one in my main.ts (as posted), a second one in the imported file plugins/vuetify.ts.
In the same file (plugins/vuetify.ts), I had a line import Vuertify from "vuetify" which I changed to import Vuertify from "vuetify/lib", according to this documentation.