I am on Windows 10 with Node v14.15.4 and npm 6.14.10
I have executed below command successfully
npm install -D tailwindcss#latest postcss#latest autoprefixer#latest postcss-cli cssnano onchange
This has no effect :
"tw:prod": "SET NODE_ENV=production postcss build ./src/css/tailwind.css -o ./public/css/tailwind.css",
If I remove SET NODE_ENV=production it works but public/css/tailwind.css is still 3.2MB.
"tw:prod": "postcss build ./src/css/tailwind.css -o ./public/css/tailwind.css",
Why isn't it purging ?
You probably have to create a configuration file and provide the paths of your templates in the purge option.
npx tailwindcss init
// tailwind.config.js
module.exports = {
purge: [
'./src/**/*.html',
'./src/**/*.vue',
'./src/**/*.jsx',
],
theme: {},
variants: {},
plugins: [],
}
Related
I have a Nextjs app using jest and react-testing-library for the test, I add the .eslintrc file with npx .eslintrc --init command to my project.
whenever I lint my project, I get the following error:
.eslintrc.js:
module.exports = {
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:#typescript-eslint/recommended",
"plugin:#typescript-eslint/recommended-requiring-type-checking",
"next",
"next/core-web-vitals"
],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"project":"./tsconfig.json",
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"rules": {
}
};
and error:
info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
Error: Failed to load config "next" to extend from.
Referenced from: D:\web\reactjs\react-testing\react-testing-app\.eslintrc.js
Resolved, after installing this package, the code will run without error:
npm i --save-dev eslint-config-next
For a misterious reason running npm audit fix --force changed my package.json from:
"eslint-config-next": "12.0.1"
to:
"eslint-config-next": "^0.2.4"
I had to change it manually and the error went away.
I started learning webpack. I am aware that webpack4 doesnt require a configuration explicitly. I created one for my project. On every build i see it picking up default config.
below is my package.json
{
"name": "feedback-clientlibs",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "hkesani",
"license": "ISC",
"devDependencies": {
"css-loader": "^3.5.3",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11"
},
"dependencies": {
"lodash": "^4.17.15"
}
}
and my webpack.config.js is as follows
var path = require('path');
module.export ={
entry : './js/feedback.js',
mode:'none',
output : {
filename:'feedback.js',
path:path.resolve(__dirname,'webpack.modules')
},
module:{
rules:[
{
test:/\.css$/,
use:['css-loader']
}
]
}
}
I have few css imports into the js files as below
import '../css/feedback.css'
import '../css/all.css'
whenever i run a build (i have cssloader installed) below is what i see
$ npm run build
> feedback-clientlibs#1.0.0 build C:\projects\br_translation\jcr\code\jcr_root\apps\r\dcloud\components\clientlibs\feedback-clientlibs
> webpack
Hash: 7c51d9af54f992c3e551
Version: webpack 4.43.0
Time: 106ms
Built at: 05/10/2020 10:39:42 PM
1 asset
Entrypoint main = main.js
[0] ./src/index.js 6.17 KiB {0} [built]
[1] ./css/feedback.css 302 bytes {0} [built] [failed] [1 error]
[2] ./css/all.css 292 bytes {0} [built] [failed] [1 error]
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
ERROR in ./css/feedback.css 1:0
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> #feedback {
| height: 5em;
| padding: 10px 22px 8px 22px;
# ./src/index.js 1:0-28
ERROR in ./css/all.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .ratings-stars {
| margin-bottom: 15px;
| height: 13px;
# ./src/index.js 2:0-23
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! feedback-clientlibs#1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the feedback-clientlibs#1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\hkesani\AppData\Roaming\npm-cache\_logs\2020-05-10T17_09_42_363Z-debug.log
Any help is appreciated.
Thanks
Have you tried it with style-loader?
npm install --save-dev style-loader
And update your webpack.config.js rules to:
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
I also notice you did not supply a production flag for your webpack command I would update that script to run:
webpack --mode production -p
Then in your output path try a directory name without the period. This may or may not be the reason but it is normally a naming convention to use a dash or underscore for directory names.
path: path.resolve(__dirname,'webpack_modules')
I think it's defined [here]enter link description here.
It can also be inspected via node:
const webpack = require('webpack')
new webpack.WebpackOptionsDefaulter()
I have been getting this error for days now and I am not sure how to fix it.
When I run the "dev" package in Node Task Runner Explorer it gives this error.
It seems to be something to do with different versions of node and webpack not getting along. the error message, and my packages.json file are below, as is the link to the article I am working through.
setting-up-a-react-environment-for-aspnet-mvc-44la
Error Message
C:\DevFolder\MyApplication> cmd.exe /c npm run dev --color=always
asp.net#1.0.0 dev C:\DevFolder\MyApplication
webpack --mode development --watch C:\DevFolder\MyApplication\node_modules\webpack\bin\webpack.js:90 let
notify = ^^^ SyntaxError: Block-scoped declarations (let, const,
function, class) not yet supported outside strict mode
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:374:25)
at Object.Module._extensions..js (module.js:405:10)
at Module.load (module.js:344:32)
at Function.Module._load (module.js:301:12)
at Function.Module.runMain (module.js:430:10)
at startup (node.js:141:18)
at node.js:980:3 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! asp.net#1.0.0 dev: `webpack --mode development --watch` npm ERR!
Exit status 1 npm ERR! npm ERR! Failed at the asp.net#1.0.0 dev
script. npm ERR! This is probably not a problem with npm. There is
likely additional logging output above.
package.json
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"scripts": {
"build": "webpack",
"dev": "webpack --mode development --watch"
},
"devDependencies": {
"#babel/cli": "^7.7.5",
"#babel/core": "^7.7.5",
"#babel/plugin-proposal-class-properties": "^7.7.4",
"#babel/preset-env": "^7.7.6",
"#babel/preset-react": "^7.7.4",
"babel-loader": "^8.0.6",
"browser-sync": "^2.26.7",
"browser-sync-webpack-plugin": "^2.2.2",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-notifier": "^1.8.0"
},
"dependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0",
"npm": "6.12.1",
"node" : "5.3.0"
}
}
Webpack Config
"use strict";
var path = require("path");
var WebpackNotifierPlugin = require("webpack-notifier");
var BrowserSyncPlugin = require("browser-sync-webpack-plugin");
module.exports = {
entry: "./Scripts/ApplicationReact/ApplicationReact.js",
output: {
path: path.resolve(__dirname, "./Scripts/"),
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
},
devtool: "inline-source-map",
plugins: [new WebpackNotifierPlugin(), new BrowserSyncPlugin()]
};
Summary
Don't install the Node.js nuget package, it breaks your project and it will remain broken after you have removed it. Just let the general installation of node do the work.
Detail
When in any other directory, if I did "node -v" in the command line and it would return version 12.13.1
When in my project folder if I did "node -v" it would return 5.3.0
When I removed the Node.js nuget package I thought it would default to the system version but instead it just said "cannot find the file or command specified" (or something along those lines).
I had copied the whole of our software to another folder for the purposes of this exercise. I just branched to another folder and this time the "node -v" was coming back with 12.13.1
I carried on with the exercise and the error did not appear. I am not sure how to fix it once you get into this state.
Better answers?
This isn't a great answer and I won't mark it as the answer. If anyone can provide a plausible explanation for what is going on here, and a way to cure your project from the nuget node lurgy, I will mark it as the answer.
Whenever i click submit on the form that should send a notification to my listener, i get a message that says Cannot find module 'paypal-ipn'.
When i track the error, it takes me to a line of code ib the IPN listener var ipn = Meteor.npmRequire('paypal-ipn');
I added papal-ipn in my package.json here
{
"name": "application-name",
"version": "1.0.0",
"paypal-ipn" : "3.0.0",
"redis": "0.8.2",
"github": "0.1.8",
"body-parser": "1.14.1",
"description": "Application description.",
"scripts": {
"start": "meteor --settings settings-development.json",
"staging": "modulus env set METEOR_SETTINGS \"$(cat settings-development.json)\" -p 'Staging' && modulus deploy -f -p 'Staging'",
"production": "modulus env set METEOR_SETTINGS \"$(cat settings-production.json)\" -p 'Production' && modulus deploy -f -p 'Production'"
}
}
What is the mistake am doing? help PLEASE
ok try removing what you added to the package.json Run npm install --save paypal-ipn and that will add the required info to the package.json automatically for you.
I have a master.scss with many imports from other .scss files. If I change a * .scss file master.css is generated automatically.
I use only the NPM, no Gulp or Grunt! This should remain so.
My current build script:
"scripts": {
"watch-sass": "sass --watch src/scss/master.scss:dist/css/master.css"
}
That's nice but takes a long time to compile!
Now I'm trying to use node-sass. It should compile very fast.
Unfortunately, I do not understand it completely ...
node-sass is installed, via npm install node-sass
Where do I use the following (from docs)?
var sass = require('node-sass');
sass.render({
file: scss_filename,
[, options..]
}, function(err, result) { /*...*/ });
// OR
var result = sass.renderSync({
data: scss_content
[, options..]
});
This is not so in the package.json, right?
Here's a tutorial, what I've read: Using NPM as a Task Runner
The script is good. How can I use it?
"scripts": {
"sass": "node-sass sass/ -o build/css/"
}
This will compile all of the sass files (that don't start with an underscore) to the build/css/ directory.
I hope for your help!
Maybe this covers your question:
How to compile or convert sass / scss to css with node-sass (no Ruby)?
If it's an option for you I would recommend using grunt, it will make things a lot simpler and faster. This grunt plugin is probably the best option: https://www.npmjs.com/package/grunt-contrib-sass
// UPDATE
I followed the tutorial you sent and it's very straightforward.
You create a file in your root folder called "package.json" containing the following:
{
"watches": {
"sass": "sass/**"
},
"scripts": {
"sass": "node-sass sass/ -o build/css/",
"dev": "rerun-script"
}
}
You then open the command line in the root folder and run the following:
npm install --save-dev node-sass
The above installs node-sass
You then run:
npm install --save-dev rerun-script
The above creates a watch task so you don't have to rerun node-sass everytime you make changes
And last you run
npm run dev
Done!
Documentation.
If you want automatically compile files then you need to put the flag -w
node-sass -w -r assets/src/scss/ -o assets/dist/css/
My package.json
{
"name": "my-project",
"version": "1.0.0",
"scripts": {
"build:js": "watchify assets/src/js/main_1.js -o 'exorcist assets/dist/js/main_1.js.map > assets/dist/js/main_1.js' -d -t [babelify --presets [latest]]",
"build:scss": "node-sass -w -r assets/src/scss/ -o assets/dist/css/",
"build": "npm run build:scss & npm run build:js"
},
"devDependencies": {
"babel-cli": "^6.0.0",
"babel-preset-latest": "^6.16.0",
"babelify": "^7.3.0",
"browserify": "^13.1.1",
"exorcist": "^0.4.0",
"node-sass": "^4.5.0",
"watchify": "^3.7.0"
},
"browserify": {
"transform": [
"babelify"
]
}
}
Actual version of package.json: https://gist.github.com/artamonovdev/5f24aaca504e4d1b299bba0413f0a57d
The watch mode in node-sass doesn't run the first compilation. It supposes that you have already ran node-sass.
Personally, I use something like this:
{
"scripts": {
"sass": "node-sass -o /path/to/dist /path/to/src",
"sass:watch": "npm run sass && npm run sass -- --watch --recursive"
}
}
And you can use it like this: npm run sass:watch