I created a new repo with $ npm install vue-app and created some test components.
When i run the command $ npm run dev the application starts in localhost port 3000.
I try to add my component in a WP website. When i build the files and add to my theme, i receive the message:
Uncaught SyntaxError: Cannot use import statement outside a module
I found some documentation for webpack but not for vite.config.js.
Anyone can help?
vite.config.js
// vite.config.js
import vue from '#vitejs/plugin-vue'
export default {
plugins: [vue()]
}
package.json
{
"name": "vite-app",
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"dependencies": {
"vue": "^3.0.5"
},
"devDependencies": {
"#vitejs/plugin-vue": "^1.2.3",
"#vue/compiler-sfc": "^3.0.5",
"vite": "^2.3.5"
}
}
Related
When I try run npm run dev in my nuxt project. I get an error like this.
Using default Tailwind CSS file from runtime/tailwind.css nuxt:tailwindcss 21:02:57
FATAL Cannot destructure property 'nuxt' of 'this' as it is undefined. 21:02:57
at postcss8Module (node_modules/#nuxt/postcss8/dist/index.js:15:10)
at installModule (node_modules/#nuxt/kit/dist/index.mjs:435:21)
at async setup (node_modules/#nuxtjs/tailwindcss/dist/module.mjs:186:7)
at async ModuleContainer.normalizedModule (node_modules/#nuxt/kit/dist/index.mjs:167:5)
at async ModuleContainer.addModule (node_modules/#nuxt/core/dist/core.js:167:20)
at async ModuleContainer.ready (node_modules/#nuxt/core/dist/core.js:34:7)
at async Nuxt._init (node_modules/#nuxt/core/dist/core.js:342:5)
Package.json.
I just created a new nuxt project using "npm init nuxt-app myhealth"
{
"name": "myhealth",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"core-js": "^3.25.3",
"nuxt": "^2.15.8",
"vue": "^2.7.10",
"vue-server-renderer": "^2.7.10",
"vue-template-compiler": "^2.7.10"
},
"devDependencies": {
"#nuxtjs/tailwindcss": "^5.3.3",
"postcss": "^8.4.17"
}
}
Solve this problem with these steps:
Install the development dependencies again as instructed in the tailwind documentation
Remove '#nuxtjs/tailwindcss' and add '#nuxt/postcss8' to nuxt.config.js
Configure the nuxt.config.js build property by adding
build: {
postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},
},
Reference: https://tailwindcss.com/docs/guides/nuxtjs
I added vite to my project to run TailwindCSS. And now I am done and I wanted to build the project. But it only builds my index.html, not all my other pages (just using vanilla html and js). I know the line "npx tailwindcss init -p" to add the tailwind.config.js. Is there a command like this for Vite so i can say to build ./*.html?
{
"name": "tirisi",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "npm run build && vite preview"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.4.2",
"postcss": "^8.4.8",
"tailwindcss": "^3.0.23",
"vite": "^2.8.6"
},
"dependencies": {
"#tailwindcss/line-clamp": "^0.3.1",
"daisyui": "^2.11.1"
}
}
From https://vitejs.dev/config/
The most basic config file looks like this:
// vite.config.js
export default {
// config options
}
Just create that file and paste that in. There's no vite equiv to npm init or tailwind init
I'm trying to export two web components in a public package on npm, using Vite with TypeScript.
Vite has a Library Mode (https://vitejs.dev/guide/build.html#library-mode) which works well. The ESM and UMD files are both being transpiled into my /dist directory. My question is how to export the web components in the entry point file.
I have an entry point file called export.js
import AwesomeHeader from './components/AwesomeHeader.vue'
import AwesomeFooter from './components/AwesomeFooter.vue'
export default { // I feel like the problem is here.
components: {
AwesomeHeader: AwesomeHeader,
AwesomeFooter: AwesomeFooter,
}
}
The idea is that I'll npm publish the project and use it like this.
npm i #sparkyspider/awesome-components #(ficticious example)
import {AwesomeHeader, AwesomeFooter} from '#sparkyspider/awesome-components' // does not find
(AwesomeHeader and AwesomeFooter are not found as exports in the node_module, even though the JavaScript files are referenced / found)
My package.json below:
{
"name": "#sparkyspider/awesome-components",
"version": "1.0.8",
"files": [
"dist"
],
"main": "./dist/awesome-components.umd.js",
"module": "./dist/awesome-components.es.js",
"exports": {
".": {
"import": "./dist/awesome-components.es.js",
"require": "./dist/awesome-components.umd.js"
}
},
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"serve": "vite preview"
},
"dependencies": {
"vue": "^3.0.5"
},
"devDependencies": {
"#vitejs/plugin-vue": "^1.2.2",
"#vue/compiler-sfc": "^3.0.5",
"typescript": "^4.1.3",
"vite": "^2.3.3",
"vue-tsc": "^0.0.24"
},
}
You are having object { component: ... } as default export, instead of exporting AwesomeHeader and AwesomeFooter, which you try to import.
export { AwesomeHeader, AwesomeFooter } in export.js will work.
More on export: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
And you can't destruct default export: https://stackoverflow.com/a/43987935/8810271
I am trying to run a simple puppeteer script with jest.
Below is my package.json contents:
{
"name": "jest-puppeteer-project",
"version": "1.0.0",
"description": "Test framework using Jest and Puppeteer",
"main": "index.js",
"scripts": {
"test": "jest --forceExit"
},
"author": "Anil Kumar Cheepuru",
"license": "ISC",
"dependencies": {
"#babel/core": "^7.12.3",
"#babel/preset-env": "^7.12.1",
"babel-jest": "^26.6.3",
"jest": "^26.6.3",
"jest-puppeteer": "^4.4.0",
"puppeteer": "^5.4.1"
}
}
Below is my jest-puppeteer.config.js contents:
module.exports = {
launch: {
headless: false,
},
browserContext: "default"
};
I have also set preset: "jest-puppeteer" in my jest.config.js file.
Below is the error I am getting in the console when I am trying to run the script using the command: npm run test
I tried to look for a solution in various sources, but no luck. Can anyone please help me with this?
If you installed jest locally into your project, then this command:
"scripts": {
"test": "jest --forceExit"
}
won't find your locally installed jest. Try changing it to ./node_modules/.bin/jest --forceExit:
"scripts": {
"test": "./node_modules/.bin/jest --forceExit"
}
When I create a new vue application, and I run the server I get an error, after the compilation failed.
Does anyone have where the problem comes from?
Here is a screen shot of my Terminal and my browser.
The main.js file
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
And the package.json file
{
"name": "vuedemo",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^2.6.5",
"vue": "^2.6.10"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.7.0",
"#vue/cli-plugin-eslint": "^3.7.0",
"#vue/cli-service": "^3.7.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"vue-template-compiler": "^2.5.21"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
I solve this issue, after run this command.
npm install #vue/babel-preset-app --save-dev
then it throw me this error
Module build failed (from ./node_modules/#vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js)
I launched the following command
npm install -D babel-loader #babel/core #babel/preset-env webpack
it gave me a new error
Failed to resolve loader: vue-style-loader
after that I run a npm install vue-style-loader
and it gave me another error angain, this one Error: Loading PostCSS Plugin failed: Cannot find module 'autoprefixer'
Finally I run the next following command, npm i autoprefixer and It worked for me.
Adding #vue/babel-preset-app as one of the devDependencies should solve the issue.
If you are using npm, do
npm install #vue/babel-preset-app --save-dev
for yarn
yarn add #vue/babel-preset-app --save-dev
for pnpm
pnpm install #vue/babel-preset-app --save-dev
I had the same initial problem. For me, this was all fixed with a yarn upgrade.