Could you please advise how to solve the error which can you find bellow.
Everything works, however when I am trying add the gulp-autoprefixer I have this error with gulp in terminal. I hope for your help.
node -v
v6.10.3
npm -v
3.10.10
gulp -v
CLI version: 2.2.0
Local version: 3.9.1
package.json file
{
"name": "igor",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.14.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^7.0.0",
"gulp-concat": "^2.6.0",
"gulp-rename": "^1.2.2",
"gulp-ruby-sass": "^2.1.0",
"gulp-sourcemaps": "^1.6.0",
"postcss-loader": "^3.0.0"
}
}
gulpfile.js file
var gulp = require('gulp');
var concat = require('gulp-concat');
var browserSync = require('browser-sync');
var sass = require('gulp-ruby-sass');
var rename = require('gulp-rename');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var Files = {
html: './index.html',
css_dest: './css',
scss: './scss/style.scss',
js_dest: './js',
js: './js/app.js'
};
gulp.task('sass', function () {
return sass(Files.scss, {
style: 'expanded',
sourcemap: true
})
.on('error', sass.logError)
.pipe(sourcemaps.write())
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(rename('main.css'))
.pipe(gulp.dest(Files.css_dest))
.pipe(browserSync.reload({
stream: true
}));
});
gulp.task('js', function () {
return gulp.src(Files.js)
.pipe(concat('main.js'))
.pipe(gulp.dest(Files.js_dest))
.pipe(browserSync.reload({
stream: true
}));
});
gulp.task('default', ['sass', 'js'], function () {
browserSync.init({
server: {
baseDir: "./"
}
});
gulp.watch('./scss/**/*.scss', ['sass']);
gulp.watch('./js/**/*.js', ['js']);
gulp.watch(Files.html, browserSync.reload);
});
The version of gulp-autoprefixer that you're using requires at least Node 8. You're running Node 6, which doesn't recognize or support some of the newer Javascript syntax. You can downgrade gulp-autoprefixer to 6.10.0 or, if possible, upgrade to Node >=8.
Related
I am getting the following error, along with broken css being applied to my webpage.
This at first glance looks like an issue with css, however this file doesn't exist at ALL in the dist folder that gets generated when I run npm run build:development
Refused to apply style from 'http://localhost:3457/dist/main.css' because its MIME type
('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled
these are the run scripts in my package.json
"scripts": {
"start": "cross-env BABEL_ENV=development webpack-dev-server --progress --config conf/webpack.config.development.js",
"build:server": "cross-env BABEL_ENV=development webpack-dev-server --progress --config conf/webpack.config.development.js",
"build:development": "cross-env BABEL_ENV=development webpack --progress --config conf/webpack.config.development.js",
"build:staging": "cross-env BABEL_ENV=production webpack --progress --config conf/webpack.config.staging.js",
"build:production": "cross-env BABEL_ENV=production webpack --progress --config conf/webpack.config.production.js",
"clean": "rimraf dist",
"lint": "eslint . --ext=jsx --ext=js || true",
"lint:styles": "stylelint \"scss/*.scss\" --syntax scss || true"
},
and this is my webpack.config.development.js file that is supposed to configure the webpack, supposedly.
const webpack = require('webpack');
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
// const ExtractTextPlugin = require('extract-text-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const mainPackageJson = require('./../package.json');
// File locations
const PATHS = {
js: path.resolve(__dirname, '../js'),
dist: path.resolve(__dirname, '../dist'),
modules: [
path.resolve(__dirname, '../node_modules/cleave.js')
]
};
exports = module.exports = {
mode: 'development',
stats: {
errorDetails: true
},
entry: [
'babel-polyfill',
'webpack-dev-server/client?http://localhost:3457',
'webpack/hot/only-dev-server',
'./js/index'
],
output: {
path: PATHS.dist,
filename: '[name].js',
publicPath: '/dist'
},
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {name: 'vendor', filename: 'vendor.js'}
}
}
},
resolve: {
extensions: ['.js', '.jsx']
},
devtool: 'eval-source-map',
module: {
noParse: /node_modules\/quill\/dist\/quill.js/,
rules: [
{
test: /\.gif$/,
type: 'asset/inline'
// loader: 'url-loader',
// query: {
// mimetype: 'image/png'
// }
},
{
test: /\.woff(2)?(\?v=[0-9].[0-9].[0-9])?$/,
type: 'asset/inline'
// loader: 'url-loader',
// query: {
// mimetype: 'application/font-woff'
// }
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9].[0-9].[0-9])?$/,
type: 'asset/resource'
// loader: 'file-loader',
// query: {
// name: '[name].[ext]'
// }
},
{
test: /\.(sa|sc|c)ss$/i,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: PATHS.dist
}
},
"css-loader",
"postcss-loader",
"sass-loader",
],
},
{
test: /\.jsx?$/,
rules: [{loader: 'react-hot-loader/webpack'}, {loader: 'babel-loader'}],
include: [
PATHS.js,
...PATHS.modules
]
}
]
},
plugins: [
// new webpack.optimize.CommonsChunkPlugin({name: 'vendor', filename: 'vendor.js'}),
require('autoprefixer'),
new MiniCssExtractPlugin({
filename: '[name].css'
}),
// new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({
__CONTENT__: JSON.stringify('#content'),
__DEV__: true,
__NOOP__: function () {
},
__VERSION__: JSON.stringify(mainPackageJson.version)
}),
new CopyPlugin(
{
patterns: [{
from: path.resolve(__dirname, '..', 'conf.js'),
to: 'conf.js'
}]
}
),
],
devServer: {
static: path.resolve(__dirname, '..'),
historyApiFallback: true,
hot: true,
host: 'localhost',
port: 3457
}
};
Perhaps I am misunderstanding something.
I am attempting to update the application from webpack3 to webpack5, among other outdated dependencies.
What is wrong?, why isn't a main.css file being generated or copied into the dist folder for it to be accessed?
When I had (which I deleted) files from an older dist folder built, it appeared to work correctly.
My app works on on my local server but when I deploy to heroku, I get this:
enter image description here
I cannot find anything wrong in my index.js:
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const path = require('path');
require('dotenv').config();
//mongoose
mongoose.connect(process.env.URI || 'mongodb://localhost/book_trak', {
useNewUrlParser: true,
useUnifiedTopology: true
})
.catch(err => console.log(err));
var db = mongoose.connection;
db.on('error', (err) => console.log(err));
db.once('open', () => console.log('we are connected'));
const app = express();
//body parser no longer needed
app.use(express.urlencoded({ extended: false }))
app.use(express.json())
app.use(cors())
app.use('/book', require('./routes/book'));
app.use('/author', require('./routes/author'));
if(process.env.NODE.ENV === 'production') {
app.use(express.static(path.join(__dirname, 'front_end', 'build')));
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'front_end', 'build', 'index.html'))
});
}
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log('running on Port ' + PORT));
I think the issue might be in my package.json file:
{
"name": "backend",
"version": "1.0.0",
"description": "",
"engines": {
"node": "12.16.0"
},
"main": "index.js",
"scripts": {
"client-install": "cd front_end && npm install",
"start": "node index",
"server": "nodemon index",
"client": "cd front_end && npm start",
"dev": "concurrently \" npm run server \" \" npm run client\"",
"heroku-postbuild": "cd front_end && npm install && npm run build"
},
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"mongoose": "^5.9.7"
},
"devDependencies": {
"concurrently": "^5.1.0",
"nodemon": "^2.0.2"
}
}
For some weird reason, my heroku logs are not showing any errors and when I push to heroku it says build succeeded.
Problem SOLVED!!!
There was a typo:
if(process.env.NODE.ENV === 'production') {
app.use(express.static(path.join(__dirname, 'front_end', 'build')));
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'front_end', 'build', 'index.html'))
});
}
should have been:
if(process.env.NODE_ENV === 'production') {
I used . instead of _
try this it may help you!!
if(process.env.NODE_ENV == "production"){
app.use(express.static("./client/build"));
const path = require("path");
app.get("*", (req, res) => {`enter code here`
res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
})
}
New to webpack,and, learning curve is fun. But my need is simply do the following (which I'm doing using bash today)
node-sass ./src/styles/default.scss > ./dist/assets/default.css
I don't need to include it in the html.
I don't want to include the css into javascript file.
Just plain conversion from scss to css.
Nvm, got the following working for me:
webpack.config.js
var path = require('path');
const HtmpWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: { main: './src/index.js' },
output: {
path: path.resolve(__dirname, 'dist/assets'),
filename: 'default.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: { loader: 'babel-loader' }
}, {
test: /\.(png|svg|jpe?g|gif)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
}
}, {
test: /\.scss$/,
use: [
{ loader: "style-loader" },
{ loader: MiniCssExtractPlugin.loader },
{ loader: "css-loader" },
{ loader: "sass-loader" }
]
}
]
},
plugins: [
new HtmpWebPackPlugin({
path: __dirname + '/dist/assets',
filename: 'default.html',
template: 'src/index.html',
inject: false,
hash: false
}),
new MiniCssExtractPlugin({
filename: 'default.css',
outputPath: 'dist/assets'
})
]
}
package.json
"scripts": {
"build": "rm -rf ./dist && webpack --mode production"
},
"devDependencies": {
"#babel/core": "^7.5.5",
"#babel/preset-env": "^7.5.5",
"babel-loader": "^8.0.6",
"css-loader": "^3.2.0",
"file-loader": "^4.2.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.0",
"webpack": "^4.39.3",
"webpack-cli": "^3.3.7",
"webpack-dev-server": "^3.8.0"
}
I'm building an app using webpack, react, babel, and Sass. I've been trying to get Sass working, but it's not playing ball. It's not throwing any errors, it just doesn't seem to be compiling properly, and when I examine the element in Dev Tools, it simply says "invalid property value" where I've referenced a variable. Is there something glaringly obvious I'm doing wrong?
My app.scss:
#import '../../../node_modules/normalize.css/normalize.css';
#import '../variables.scss';
/*
* Base styles
* ========================================================================== */
*,
*:after,
*:before {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
body {
text-align: center;
margin: 0;
}
p {
color: $blue;
}
My variables.scss:
/*
* Colors
* ========================================================================== */
$blue: #334c6a;
$yellow: #f6d463;
$white: #ffffff;
$black: #000000;
/*
* Typography
* ========================================================================== */
$font-family-base: 'Segoe UI', 'HelveticaNeue-Light', sans-serif;
/*
* Layout
* ========================================================================== */
$container-margin: 55px;
Webpack.config:
var path = require("path");
var webpack = require("webpack");
var autoprefixer = require('autoprefixer');
var precss = require('precss');
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./src/index'
],
output: {
path: path.resolve(__dirname, 'build'),
publicPath: '/build/',
filename: "bundle.js"
},
resolve: {
extensions: ['*', '.js', '.jsx', '.png', '.json']
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.LoaderOptionsPlugin({
options: {
context: __dirname,
postcss: [
autoprefixer
]
}
})
],
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders: ['react-hot-loader', 'babel-loader']
},
{
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'postcss-loader']
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
loader: 'url-loader?limit=10000',
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
};
Package.json:
{
"name": "test",
"version": "1.0.0",
"description": "test",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server"
},
"author": "test",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^6.7.7",
"babel-core": "^6.24.1",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^0.28.0",
"file-loader": "^0.11.1",
"node-sass": "^4.5.2",
"postcss": "^5.2.17",
"postcss-loader": "^1.3.3",
"precss": "^1.4.0",
"react-hot-loader": "^1.3.1",
"style-loader": "^0.16.1",
"webpack": "^2.3.3",
"webpack-dev-server": "^2.4.2"
},
"dependencies": {
"normalize.css": "^6.0.0",
"react": "^15.5.4",
"react-dom": "^15.5.4"
}
}
This config is working with webpack 2 and sass.
{
test: /\.s?css$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
And then in the App.js file
import './app.scss'
The complete webpack.config
var path = require("path");
var webpack = require("webpack");
var autoprefixer = require('autoprefixer');
var precss = require('precss');
module.exports = {
context: path.resolve(__dirname, 'src'),
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./index.js'
],
output: {
path: path.resolve(__dirname, 'build'),
publicPath: '/build',
filename: "bundle.js"
},
devServer: {
hot: true,
contentBase: path.resolve(__dirname, 'build'),
publicPath: '/',
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
// new webpack.NoErrorsPlugin(), not needed any more
new webpack.LoaderOptionsPlugin({
options: {
context: __dirname,
postcss: [
autoprefixer
]
}
})
],
module: {
rules: [{
test: /\.js?$/,
exclude: /node_modules/,
loaders: ['babel-loader']
},
{
test: /\.s?css$/,
use: ['style-loader', 'css-loader', 'sass-loader' , 'postcss-loader']
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
loader: 'url-loader?limit=10000',
}
]
}
};
Problem with my webpack build.
I have the following project structure
webpack.config.js:
var path = require("path");
var CommonsChunkPlugin = require("../node_modules/webpack/lib/optimize/CommonsChunkPlugin");
var ProvidePlugin = require("../node_modules/webpack/lib/ProvidePlugin");
module.exports = {
entry: {
vendors: [
'./jquery-1.10.2',
'./jquery-ui-1.9.2',
'./jquery.jqGrid-4.4.0/js/i18n/grid.locale-en',
'./jquery.jqGrid-4.4.0/js/jquery.jqGrid.src'
],
pagebbb: "./pageA"
//pageB: "./pageB"
},
output: {
path: path.join(__dirname, "jsbuild"),
filename: "[name].bundle.js",
chunkFilename: "[id].[hash].chunk.js",
publicPath: 'jsbuild/'
},
resolve: {
alias: {
"jquery": "./jquery-1.10.2",
"$": "./jquery-1.10.2",
jQuery: "./jquery-1.10.2"
}
},
plugins: [
new ProvidePlugin({
jQuery: "./jquery-1.10.2",
$: "./jquery-1.10.2",
"window.jQuery": "./jquery-1.10.2"
})
]
}
on build:
Can you give me any advice ?