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
Related
When I try to run npm run generate it is giving me this error
It should generate the static nuxtjs site.
Before it was on Nuxt-3-rc and it was building site successfully. As I converted it to Nuxt 3.0 Stable it is giving me this error.
Package.json
{
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"start": "nuxt dev",
"generate": "nuxt generate ",
"preview": "nuxt preview",
"postinstall": "nuxt prepare",
"vite:build": "vite build"
},
"devDependencies": {
"#fortawesome/free-brands-svg-icons": "^6.2.0",
"#fortawesome/free-solid-svg-icons": "^6.2.0",
"#nuxt/postcss8": "^1.1.3",
"#nuxtjs/fontawesome": "^1.1.2",
"#nuxtjs/tailwindcss": "^5.3.3",
"#tailwindcss/forms": "^0.5.3",
"autoprefixer": "^10.4.13",
"nuxt": "3.0.0",
"postcss": "^8.4.19",
"tailwindcss": "^3.2.4"
},
"dependencies": {
"#a1ter/nuxt-auth-aws-cognito-scheme": "^0.0.12",
"#headlessui/vue": "^1.4.2",
"#mdi/js": "^7.0.96",
"#nuxtjs/auth-next": "^5.0.0-1637745161.ea53f98",
"#pinia/nuxt": "^0.4.2",
"amazon-cognito-identity-js": "^5.2.10",
"aws-amplify": "^4.3.21",
"chart.js": "^3.9.1",
"numeral": "^2.0.6",
"pinia": "^2.0.22",
"readable-stream": "^4.2.0",
"rollup-plugin-node-polyfills": "^0.2.1"
}
}
I found the solution.
I am using AWS sdk with nuxt 3 which is causing issues.
In Nuxt.config file instead of
vite: {
resolve: {
alias: {
'./runtimeConfig': './runtimeConfig.browser'
}
},
// temp-fix for dev, it breaks build for now (see: https://github.com/nuxt/framework/issues/4916)
define: {
global: {}
}
},
Using this would help. Github Issue
vite: {
resolve: {
alias: {
'./runtimeConfig': './runtimeConfig.browser'
}
},
// temp-fix for dev, it breaks build for now (see: https://github.com/nuxt/framework/issues/4916)
define: {
'window.global': {}
}
},
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 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"
}
}
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"
}
I'm working on a nuxt-vuetify-app
I want to load globally my main.scss file.
This is my package.json
{
"name": "marketectm",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"#nuxtjs/axios": "^5.12.2",
"core-js": "^3.6.5",
"nuxt": "^2.14.6"
},
"devDependencies": {
"#nuxtjs/vuetify": "^1.11.2",
"fibers": "^5.0.0",
"sass": "^1.29.0",
"sass-loader": "^10.1.0"
}
}
In nuxt.config.json and i tried something like
build: {
loaders: {
scss: {
prependData: '#import "#/assets/main.scss';
}
},
}
But changes in my css do not affect.
I've tried this(allowed the docs)
css: [
'#/assets/main.scss'
],
But i have this error:
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options
object that does not match the API schema.
- options has an unknown property 'prependData'. These properties are valid:
object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter? }
at validate (/Users/dariopres/Lavoro/nuxt-market/node_modules/sass-
loader/node_modules/schema-utils/dist/validate.js:104:11)
at Object.loader (/Users/dariopres/Lavoro/nuxt-market/node_modules/sass-
loader/dist/index.js:30:29)
# ./assets/main.scss 4:14-215 14:3-18:5 15:22-223
# ./.nuxt/App.js
# ./.nuxt/index.js
# ./.nuxt/client.js
# multi ./node_modules/#nuxt/components/lib/installComponents.js eventsource-polyfill
webpack-hot-middleware/client?
reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=
client
./.nuxt/client.js
edit
i found the solution, i had to downgrade sass-loader to 7.3.1 and then worked simply doing
css: [
'#/assets/main.scss'
],
i solved this problem downgrading sass-loader to #7.3.1, hope this can help someone else ;)