I'm trying to install laravel elixir but I'm getting this error:
Anyone knows where can be a problem?
please check your package.json file, it should be like
{
"private": true,
"devDependencies": {
"gulp": "^3.9.1",
"gulp-notify": "^2.2.0"
},
"dependencies": {
"bootstrap-sass": "^3.0.0",
"laravel-elixir": "^5.0.0",
"socket.io": "^1.4.5"
}
}
then check gulpfile.js, it should be like, i added only css file.
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.styles([
"common.css",
"bootstrap.min.css"
], 'public/css/all.css').version('public/css/all.css');
});
then run "npm install"
it will load all dependencies
then run "gulp"
it will compile your elixir files
Related
Hi,
I'm trying to build an app using Tailwind and NextJs with some style in SCSS. Everything was working find and I was tweaking some Tailwind class in my components until the app suddenly crashed with this message
./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[10].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[3].oneOf[10].use[3]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[3].oneOf[10].use[4]!./styles/globals.scss
TypeError: Cannot read properties of undefined (reading '5')
It appeared just like this, it worked for 3 hours and then just stopped, I did not changed any config files or anything else. I don't understand. After some time looking trough my code I've found that if I remove these import at the top of my global.scss the app works fine, but I don't know where this undefined variable is..
#tailwind base;
#tailwind components;
#tailwind utilities;
here is my tailwind config
module.exports = {
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false,
theme: {
extend: {
spacing: {
'2/3': '66.666667%',
},
colors: {
'lavander-grey': '#625F63',
'lavander-indigo': '#9893DA'
},
},
},
variants: {
extend: {},
},
plugins: [],
};
package.json
"engines": {
"node": ">=14.0"
},
"engineStrict": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"graphql": "^16.6.0",
"graphql-request": "^5.0.0",
"html-react-parser": "^3.0.4",
"moment": "^2.29.4",
"next": "13.0.3",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-multi-carousel": "^2.8.2",
"sass": "^1.56.1",
"swr": "^1.3.0"
},
"devDependencies": {
"autoprefixer": "^10.4.13",
"eslint": "^8.27.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-next": "13.0.3",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.6.1",
"eslint-plugin-react": "^7.31.10",
"eslint-plugin-react-hooks": "^4.6.0",
"postcss": "^8.4.19",
"tailwindcss": "^3.2.4"
Postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
thanks for your help
I've tried to install some older Tailwind packages, wiped node_modules, made sure this was not my components the culprit, tried some Tailwind configurations,started a fresh dev server, did some intense googling
Tailwind is no longer using PurgeCSS under the hood with the release of their JIT compiler as of Tailwind 3.0.
Update the first line of your config to:
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
As shown in the docs, and be sure to include a postcss.config.js file.
In order to write those:
#tailwind base;
#tailwind components;
#tailwind utilities;
you need to install postcss. 'postcss` is like webpack, uses plugins and evaluates them to modern CSS syntax that browser understand
npm install -D tailwindcss postcss autoprefixer postcss-nesting
Then you should have postcss.config.js and have this config:
module.exports = {
plugins: ["tailwindcss", "postcss-nesting", "autoprefixer"],
};
i'm trying to install this package https://github.com/shwilliam/vue-scrollin to my laravel + vue project. after compiling with laravel mix, the following error appeared:
Module not found: Error: Can't resolve 'timers' in
'\node_modules\vue-scrollin\dist'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules
by default. This is no longer the case. Verify if you need this module
and configure a polyfill for it. If you want to include a polyfill,
you need to:
- add a fallback 'resolve.fallback: { "timers": require.resolve("timers-browserify") }'
- install 'timers-browserify' If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "timers": false }
I followed the given instructions but it gives me the same errors.
webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js').vue()
.sass('resources/css/app.scss', 'public/css/app.css')
.postCss('resources/css/app.css', 'public/css', [
//
])
.webpackConfig(require('./webpack.config'));
webpack.config.js
module.exports = {
resolve: {
fallback: { "timers": require.resolve("timers") }
},
};
package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.15.3",
"#fortawesome/fontawesome-svg-core": "^1.2.35",
"#fortawesome/free-regular-svg-icons": "^5.15.3",
"#fortawesome/free-solid-svg-icons": "^5.15.3",
"#fortawesome/vue-fontawesome": "^3.0.0-3",
"#vue/compiler-sfc": "^3.0.7",
"axios": "^0.21",
"bulma": "^0.9.2",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"particles.vue3": "^1.3.1",
"postcss": "^8.1.14",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.8",
"sass-loader": "^10.1.1",
"vue": "^3.0.5",
"vue-loader": "^16.1.2",
"vue-router": "^4.0.5",
"vue-scrollin": "^0.1.2",
"timers-browserify": "^2.0.12"
}
}
You almost got it. webpack.config.js should be:
module.exports = {
resolve: {
fallback: { "timers": require.resolve('timers-browserify') }
},
};
Just change the package in the require.resolve() to what the warning suggests.
For anyone who comes here with a polyfills-problem or about to migrate from webpack 4 to 5, here's the PR with a list of removed polyfills
Laravel 5.6.21
NPM 6.1.0
Node 10.5.0
Webpack 3.12.0
My question is how to properly configure laravel-mix, webpack and babel to successfully lazy-load vue components using the method described here: Lazying Loading Routes
More specifically, using stage-2 (es2018 ?) syntax as follows:
const Foo = () => import('./Foo.vue')
When trying to compile using laravel-mix all statements resembling the above syntax generate an error (example):
Syntax Error: Unexpected token (1:24)
1 | const Dashboard = () => import("Pages/Account/Dashboard.vue");
| ^
I believe laravel-mix uses Babel to transpile and read that Babel needs 'syntax-dynamic-import' so I created a .bablerc file with the following contents:
{
"plugins": [
"syntax-dynamic-import"
]
}
Since the bable config file didn't resolve the issue, I also tried an eslint configuration file with the following contents:
module.exports = {
plugins: ["vue"], // enable vue plugin
extends: ["plugin:vue/recommended", "prettier"], // activate vue related rules
parserOptions: {
"parser": "babel-eslint",
"ecmaVersion": 7, //also tried 8
"sourceType": "module",
"ecmaFeatures": {
"globalReturn": false,
"impliedStrict": false,
"jsx": false,
"experimentalObjectRestSpread": false,
"allowImportExportEverywhere": false
}
}
};
Finally, a copy of the dependencies in package.json are:
"devDependencies": {
"#vue/test-utils": "^1.0.0-beta.24",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.3",
"babel-loader": "^7.1.5",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-imports": "^1.5.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"babel-preset-vue-app": "^2.0.0",
"cross-env": "^5.2.0",
"eslint": "^4.19.1",
"eslint-config-prettier": "^2.9.0",
"eslint-loader": "^2.0.0",
"eslint-plugin-html": "^4.0.1",
"eslint-plugin-vue": "^4.5.0",
"expect": "^22.0.3",
"jsdom": "^11.5.1",
"jsdom-global": "^3.0.2",
"laravel-mix": "^2.1.14",
"less": "^3.5.3",
"less-loader": "^4.1.0",
"mocha": "^4.0.1",
"mocha-webpack": "^1.0.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"vue-loader": "^13.7.2",
"vue-style-loader": "^4.1.0",
"vue-template-compiler": "^2.5.13",
"vue-test-utils": "^1.0.0-beta.8",
"webpack": "^3.12.0",
"webpack-auto-inject-version": "^1.1.0"
},
Any help regarding resolving this would be greatly appreciated.
I have been using with following in .eslintrc.json.
"extends": [
"eslint:recommended",
"plugin:vue/recommended"
],
"plugins": [
"vue"
],
"parser": "vue-eslint-parser",
"parserOptions": {
"parser": "babel-eslint",
"ecmaVersion": 8,
"ecmaFeatures": {
"jsx": true
},
"sourceType": "module"
},
Also check your dynamic import function's path const Dashboard = () => import("Pages/Account/Dashboard.vue");. I thinks it should be a relative path something like const Dashboard = () => import("./Pages/Account/Dashboard.vue");
The problem is in the scss splitting in Vue and using mix.scss() both. Laravel mix when having both creates a css file with manifest js file content in it. which is definitely a bug. which the community mentions a bug from Webpack and will be resolved in webpack 5. But If you use only code splitting in Vue and have the default app.scss file imported to main Vue component like this(not in scope), so each other component will get the styling properly
// resources/js/components/app.vue
<template>
<!-- Main Vue Component -->
</template>
<script>
// Main Script
</script>
<style lang="scss">
#import '~#/sass/app.scss';
</style>
and the webpack.mix.js file will have no mix.scss function to run only a single app.js file. here is my file.
// webpack.mix.js
const mix = require('laravel-mix')
mix.babelConfig({
plugins: ['#babel/plugin-syntax-dynamic-import'] // important to install -D
})
mix.config.webpackConfig.output = {
chunkFilename: 'js/[name].bundle.js',
publicPath: '/'
}
mix
.js('resources/js/app.js', 'public/js')
.extract(['vue'])
.webpackConfig({
resolve: {
alias: {
'#': path.resolve('resources/') // just to use relative path properly
}
}
})
here is the package.json file (only including required dev dependencies)
{
"#babel/core": "^7.8.7",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/preset-env": "^7.8.7",
"laravel-mix": "^4.1.4",
}
hope this resolves the issue
I working on a Laravel 5.3 project. I am getting below errors when I am running gulp command in CMD.
Could anyone say how can I get a error less result ?
gulpfile.js
var elixir = require('laravel-elixir');
require('laravel-elixir-vue');
elixir(function(mix) {
mix.sass('app.scss');
});
elixir(function(mix) {
mix.webpack('app.js');
});
elixir(function(mix) {
mix.version(['css/app.css', 'js/app.js']);
});
package.json
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"babel-core": "^6.18.2",
"babel-loader": "^6.2.7",
"babel-plugin-add-module-exports": "^0.2.1",
"bootstrap": "^4.0.0-alpha.3",
"bootstrap-sass": "^3.3.7",
"buble": "^0.14.2",
"gulp": "^3.9.1",
"jquery": "^3.1.0",
"laravel-elixir": "^6.0.0-9",
"laravel-elixir-browserify-official": "^0.1.3",
"laravel-elixir-vue": "^0.1.4",
"laravel-elixir-vue-2": "^0.2.0",
"laravel-elixir-webpack-official": "^1.0.2",
"lodash": "^4.14.0",
"vue": "^1.0.26",
"vue-resource": "^0.9.3"
},
"dependencies": {
"admin-lte": "^2.3.7",
"node-sass": "^3.13.0"
}
}
If your using Laravel 5.5 or above, simply add:
mix.webpackConfig({ node: { fs: 'empty' }})
to your webpack.mix.js file.
Try adding
Elixir.webpack.mergeConfig({
node: {
fs: 'empty',
}
});
To your gulpfile.js. Looks like this is a known webpack problem. Here's your file edited:
var elixir = require('laravel-elixir');
require('laravel-elixir-vue');
Elixir.webpack.mergeConfig({
node: {
fs: 'empty',
}
});
elixir(function(mix) {
mix.sass('app.scss');
});
elixir(function(mix) {
mix.webpack('app.js');
});
elixir(function(mix) {
mix.version(['css/app.css', 'js/app.js']);
});
This is also currently biting my project, which uses gulp-sass. gulp-sass depends on node-sass#^3.4.1 which just automatically updated to 3.5.3 which is a breaking release.
I have degraded my gulp sass version to the older(2.1.0) by updating the
package.json file but its still breaking.
how to go back to node sass 3.4.2?
Error Message
Error: You may not #extend an outer selector from within #media.
You may only #extend selectors within the same directive.
{
"version": "1.0.0",
"name": "abcd",
"devDependencies": {
"bower": "^1.3.12",
"express": "^4.12.3",
"gulp": "^3.8.10",
"gulp-autoprefixer": "^2.1.0",
"gulp-bower": "^0.0.7",
"gulp-concat": "^2.5.2",
"gulp-install": "^0.4.0",
"gulp-livereload": "^3.8.0",
"gulp-minify-css": "^1.0.0",
"gulp-plumber": "^1.0.0",
"gulp-sass": "2.1.0",
"gulp-sourcemaps": "^1.5.1",
"gulp-uglify": "^1.1.0"
},
"dependencies": {
"jquery": "1.11.1"
}
}
Looks like a new version was just released that allows the "buggy" version of node-sass but you can always npm shrinkwrap specific sub-dependencies to a specific version if you need to - assuming that the primary package is compatible with that dependency version.
This will lock the node-sass version in gulp-sass to 3.4.2:
{
"name": "yourprojectname",
"version": "1.0.0",
"dependencies": {
"gulp-sass": {
"version": "2.3.1",
"from": "gulp-sass#>=2.3.1 <3.0.0",
"resolved": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-2.3.1.tgz",
"dependencies": {
"node-sass": {
"version": "3.4.2"
}
}
}
}
}
Make sure you delete your node_modules npm cache clean to clear your locally cached packages before running npm install again.