I'm using a node project. Recently I have formatted my PC and installed node and related software's new version. After that I have copied my old project and installed the node modules.
Then everything is working except the browser refresh. Browser is not refreshing after the code editing (css, html, javascript).
Previously everything was working perfect.
Previous system software versions
node : v18.12.1
npm : 8.19.2
New system software versions
node: v18.14.0
npm: 9.5.0
Rendering time i'm getting error below
Replace autoprefixer browsers option to Browserslist config.
Use browserslist key in package.json or .browserslistrc file.
Using browsers option can cause errors. Browserslist config
can be used for Babel, Autoprefixer, postcss-normalize and other tools.
If you really need to use option, rename it to override Browserslist.
Learn more at:
https://github.com/browserslist/browserslist#readme
https://twitter.com/browserslist
my package json is like below
{
"name":"cpc-starter",
"description":"CPC Frontend Framework",
"version":"1.0.0",
"private":true,
"author":"CPC",
"license":"ISC",
"scripts":{
"postinstall":"grunt",
"start":"grunt serve",
"build":"grunt"
},
"devDependencies":{
"autoprefixer":"^9.1.5",
"cssnano":"^4.1.1",
"grunt":"^1.0.3",
"grunt-assemble":"^0.6.3",
"grunt-autoprefixer":"^3.0.4",
"grunt-banner":"^0.6.0",
"grunt-browser-sync":"^2.2.0",
"grunt-contrib-clean":"^2.0.0",
"grunt-contrib-copy":"^1.0.0",
"grunt-contrib-imagemin":"^2.0.1",
"grunt-contrib-uglify":"^4.0.0",
"grunt-contrib-watch":"^1.1.0",
"grunt-critical":"^1.1.1",
"grunt-postcss":"^0.9.0",
"grunt-replace":"^1.0.1",
"grunt-sass":"^3.0.2",
"node-sass":"^8.0.0",
"pixrem":"^4.0.1"
},
"dependencies":{
"bourbon-neat":"2.1.0",
"browserlist":"^1.0.1",
"include-media":"1.4.9",
"npm":"^6.9.2"
},
"browserslist":[
"defaults and supports es6-module",
"maintained node versions"
]
}
Kindly please help me to resolve this issue.
I have installed the node modules again. But still the browser not refreshing
Related
new to webpack configurations. I'm getting this error in my app and it doesn't compile. According to countless suggestions from SO, I've tried the setting (or variations of it) in my package.json:
"browser": {
"fs": false,
"net": false
}
And in webpack.config:
node: { fs: 'empty',
net: 'empty' }
It compiles but all it does is it has the file go blank on localhost.
Webpack version: 4.46.0
Node: 16.14.0
Windows 11
Any help greatly appreciated.
Webpack will let you bundle up modules of browser-compatible code into a production bundle for sending to the browser.
The fs and net modules are not browser-compatible code. They depend on APIs which are provided by Node.js and which are not provided by browsers.
Thus attempts to bundle them error, and if you tell webpage to treat them as empty then the generated bundle won't include them.
Make sure you are not importing the following from express or even json or something else
import { response } from 'express'
For anyone who is using React (happened to me in react). I have even read with NextJs this works but haven't tested it.
Man I did everything like config-overrides and node modules webpack config file updates and also changed react-scripts version 5 to 4 but nothing worked. But as soon as I removed response. It worked.
That one line only made me go into 7 hours of debugging mode.
But always enjoy it :)
It took me while to figure it out and I found out that it may be due to incompatible Node-gyp and Node-sass packages.My app is running fine now.
Again, the errors:
"Module not found: Error Can't resolve "fs" in..."
"Module not found: Error Can't resolve "net" in..."
Try this in the following order :
Delete package.lock.json
Update/install these packages to make them compatible with each other.
These versions worked for Node 16.14.0:
"node-sass": "^6.0.0"
"node-gyp": "^7.1.0" (in my case - npm install -g node-gyp#7.1.0)
"sass-loader": "^10.0.0"
I'm getting an error repeatedly when trying to build a new webpack project using vue-cli. I'm following along with the docs on the latest build (3.0.0-beta.11), also tried with an earlier version, which wasn't beta.
When I run yarn serve it attempts to start the dev server and build the project but fails here:
error in ./src/App.vue?vue&type=template&id=7ba5bd90
Module build failed: Error: No parser and no file path given, couldn't infer a parser.
at normalize (/Users/cory/Code/chickadee/my-project/node_modules/prettier/index.js:7051:13)
at formatWithCursor (/Users/cory/Code/chickadee/my-project/node_modules/prettier/index.js:10370:12)
at /Users/cory/Code/chickadee/my-project/node_modules/prettier/index.js:31115:15
at Object.format (/Users/cory/Code/chickadee/my-project/node_modules/prettier/index.js:31134:12)
at actuallyCompile (/Users/cory/Code/chickadee/my-project/node_modules/#vue/component-compiler-utils/dist/compileTemplate.js:93:29)
at compileTemplate (/Users/cory/Code/chickadee/my-project/node_modules/#vue/component-compiler-utils/dist/compileTemplate.js:26:16)
at Object.module.exports (/Users/cory/Code/chickadee/my-project/node_modules/vue-loader/lib/loaders/templateLoader.js:42:20)
# ./src/App.vue?vue&type=template&id=7ba5bd90 1:0-194 1:0-194
# ./src/App.vue
# ./src/main.js
# multi (webpack)-dev-server/client/index.js (webpack)/hot/dev-server.js ./src/main.js
About my setup
Mac OS
I'm running node v8.5.0
packages are installed with yarn
The Things I've Attempted
Different versions of vue-cli to generate a new project. The projects generate and install modules.
Tried removing the prettier module, but the error still seems to come up.
Tried reinstalling all modules.
What else might I try to get past this error?
Removing the current node_modules folder from the project, adding "prettier": "^1.12.1" to package.json and running npm install solved the issue.
Another option is to run npm install prettier#1.12.1 without removeing the node_modules folder before
Update:
For some users, verion 1.12.1 did not work
#Kivin proposed another solution that can be found here: vue webpack template missing parser
Known issue and it will be fixed in the next version of vue-cli
In prettier 1.13.0, default parser was removed with a minor version(used to be babylon)
Issue: https://github.com/vuejs/component-compiler-utils/issues/14
Issue at prettier repo: https://github.com/prettier/prettier/issues/4567
Sorry, we committed the age-old semver sin- we knew this was a breaking change, but because it would only affect a subset of our users, we didn't bump the major version, because we didn't want to create friction for our users to upgrade.
To get the old behavior, add parser: "babylon". You may also want to lock prettier to a specific version in your package.json.
Running npm install prettier#1.12.1 solved it for me. Thanks lsxliron.
Right now, I tried all the options..downloading and updgrading prettier...but none workied. Until I studied what happened carefully.
Apparently, the prettier team removed the default parser which was babylon and in so doing...broke the internet.
Just kidding.
Issue repo
The simplest solution, according to them would be to simply add the parser back.
This has been picked up by the Vue team and its expected to be shipped with the latest fix release.
If you are using Vue Loader/Yarn, dont even bother to try all the suggestions...I tried them all.
What fixed it for me was...go to
node_modules\vue-loader\lib\template-compiler ...open index.js and look for
// prettify render fn
if (!isProduction) {
code = prettier.format(code, { semi: false})
}
and change the lines to:
// prettify render fn
if (!isProduction) {
code = prettier.format(code, { semi: false, parser: 'babylon' })
}
Thats it!
Then once the issue got fixed, everything will just be rolled back and you will still be fine.
Try this...it will save you countless minutes of searches....
As already pointed out by the various resonses, you may need to rollback the version of the prettier package.
in your package.json file, you may need to force npm to use a version (i.e. remove the hat ^)
mine looks something like this
"devDependencies": {
"prettier": "1.12.1",
"typescript": "^2.6.1",
"vue": "^2.5.16",
"vue-styleguidist": "^1.4.4",
"vue-webpack-loaders": "^1.0.6",
"webpack": "^3.1.0"
I have a project that uses Typescript, using the newer #types/foo style of installing typings packages.
When my build server installs all npm modules, sometimes I get a complete failure when compiling the typescript as some dependent definitions are no longer matching up.
For instance, I now have a problem with #types/gulp. In its package.json, dependencies are listed as:
"dependencies": {
"#types/node": "*",
"#types/orchestrator": "*",
"#types/vinyl": "*"
},
But now #types/orchestrator has updated, and it now breaks the version of #types/gulp that I have defined in my apps package.json.
How am I supposed to lock down version of dependencies like this so I no longer get this problem, or is there another workaround?
Unfortunately, I suddenly get these issues which sets development back by hours trying to sort it out. This makes using Typescript in a fast moving environment difficult.
How am I supposed to lock down version of dependencies like this so I no longer get this problem
Run npm shrinkwrap or just specify an exact version:
"#types/vinyl": "6.3.12"
UPDATE: After another computer started having troubles watching and compiling I think it may have something to with the tscommandxxxxxx.tmp.txt files that get generated as compiling happens...sometimes they arent removed when its done and other times they never appear
UPDATE 2: I think this occasional error might play a part:
Error happened in chokidar: { [ Error: EONOENT, stat 'C:\Users\me\dropbox\xxx\xxx\myApp\src\.subl3cb.tmp'] errno: 34, code: 'ENOENT', path: 'C:\\Users\\me\\dropbox\\xxx\\xxx\\myApp\\src\\.subl3cb.tmp' }
When I go looking for that temp file its not there so I cant attempt to read it. I don't know anything about chokidar besides that its a dependency of grunt-ts
I have been working with Typescript (0.9.5) using Sublime (not VS) with node/npm, grunt, and grunt-ts. Grunt/Grunt-ts was setup to watch a directory for changes to .ts files and then compile them to .js. All the project files including the local npm modules are stored on dropbox and each computer I develop on also has grunt-cli installed globally. Everything was working great for a couple weeks and then last week I saw that Typescript 1.0RC was available so I attempted to change the grunt-ts dependency from 0.9.5 to 1.0 to see if it would work. Well it didn't so I uninstalled grunt-ts and re-installed it. It still works fine on 2 of my 3 PCs but for some reason my main one (the one where I initiated the changes) will not successfully watch the directory and recompile anymore. I have uninstalled node, removed the npm modules directories I could find (one where node was installed and then 2 under appdata/roaming - one of which was a cache folder) and then re-installed only the things I have on the other PCs, but it didn't make a bit of difference. The most annoying part is that there are no errors it just simply sits there after the initial compile that happens when I run grunt from the project folder...never updating on file changes...If I run grunt on another pc and make file changes, once dropbox syncs that PC watches and compiles fine.
Aside from trying to find somewhere where some old npm/node info is cached, I am out of ideas on what to try...
Even though it shouldn't matter since it works on other PC's via dropbox, here is the gruntfile:
module.exports = function (grunt) {
"use strict";
grunt.initConfig({
ts: {
options: {
target: 'es5',
module: 'amd',
sourcemap: true,
declaration: false,
nolib: false,
comments: false
},
dev: {
src: ["src/**/*.ts"],
watch: 'src',
outDir: 'src'
}
},
});
//load the task
grunt.loadNpmTasks("grunt-ts");
grunt.registerTask("default", ["ts:dev"]);
};
Package.json:
{
"devDependencies": {
"grunt": "~0.4.1",
"grunt-ts": "~1.7.2-2",
"typescript": "0.9.5"
}
}
Typescript 1.0RC was available so I attempted to change the grunt-ts dependency from 0.9.5 to 1.0 to see if it would work
You don't need to modify grunt-ts's internal package.json. You can do it from your package.json:
https://github.com/grunt-ts/grunt-ts#alternate-compiler-version
e.g.:
{
"devDependencies": {
"grunt" : "~0.4.1",
"grunt-ts" : "~1.7.2",
"typescript" : "0.9.7",
}
}
About:
old npm/node info is cached
grunt-ts has none.
Can you share your package.json? Try the latest version of grunt-ts (1.7.2-2) if you can.
{
"devDependencies": {
"grunt" : "~0.4.1",
"grunt-ts" : "~1.7.2-2",
"typescript" : "0.9.7",
}
}
After uninstalling and reinstalling everything node related at the global level, I decided to do the same within the project...I did everything many different ways but always go the same result.
So I realized I had a tiny tutorial project elsewhere on dropbox and ran grunt for that project and the watching/compiling worked! I remembered that I had copied the gruntfile and package.json directly from that project when I started so they were identical as were the npm packages and directory structure.
Finally, I deleted my larger app's node_modules folder and copied the node_modules folder from the working tutorial over in its place....and it magically works...well not magically, it turns out that the old project was using grunt-ts 1.6.4 and at some point during my attempt at upgrading the TS version I updated grunt-ts which for whatever reason does not work for me at 1.7.2-2.
I am trying to install twilio for nodejs. These lines are coming up in console.
npm WARN twilio#0.4.0 package.json: 'modules' object is deprecated
twilio#0.4.0 ./node_modules/twilio
How to get rid of this ?
I am using npm install twilio command.
I tried to download and copied in node_modules folder but that is not working.
This has to do with the package.json file which is a specially formatted file used for the npm package management system. Certain values are required and some of those key names have changed over the years and some just have been removed. The error you are getting is due to the package.json file still using the modules key:
},
"modules": {
"client": "./lib/twilio",
"twiml": "./lib/twiml"
},
https://github.com/sjwalter/node-twilio/blob/master/package.json#L13
Even though you are getting this error it should not effect your usage of the module. It was still installed and everything should work just fine.
There's an open bug report for this, but it doesn't seem to have gotten much attention.