I tried running webpack --watch and after editing my JS files, it doesn't trigger an auto-recompilation.
I've tried reinstalling webpack using npm uninstall but it's still not working.
Any ideas?
If your code isn't being recompiled, try increasing the number of watchers (in Ubuntu):
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
Source: https://webpack.github.io/docs/troubleshooting.html
FYI: it seems OS X can have a folder get corrupted and no longer send fsevents (which watchpack/chokidar/Finder uses) for itself and any child folders. I can't be sure this is what happened to you, but it was very frustrating for me and a colleague.
We were able to rename the corrupt parent folder and then watch events immediately came through as expected. See this blog post for more info: http://livereload.com/troubleshooting/os-x-fsevents-bug-may-prevent-monitoring-of-certain-folders/
The recommended fixes from the above link are:
rebooting the computer
checking the disk and repairing permissions via Disk Utility
adding the folder to Spotlight privacy list (the list of folders to not index), and then removing from it, effectively forcing a reindexing
renaming the folder, and then possibly renaming it back
re-creating the folder and moving the old contents back into it
First two did not work for us, didn't try the Spotlight suggestion, and the re-creation did not prove necessary.
We were able to find the root problem folder by opening Finder and creating files in each successive parent folder until one showed up immediately (since Finder will get hosed by this bug as well). The root-most folder that does not update is the culprit. We just mv'd it and mv'd it back to its original name, and then the watcher worked.
No idea what causes the corruption, but I'm just glad to have a fix.
Adding the following code to my webpack configuration file fixed the issue for me.
Don't forget to ignore your node_modules folder, as that would kill performance for HMR (Hot Module Replacement):
watchOptions: {
poll: true,
ignored: /node_modules/
}
I have had this problem when working with WebStorm.
Disabling Settings -> System Settings -> "safe write" resolved it for me.
Found the recommendation to do so in: WebPack Troubleshooting
Folder case sensitivity was my issue. My code calls to require() had all lowercase path names BUT the actually directories had an uppercase letter in them. I renamed all my directories to lowercase and webpack watching worked instantly.
Just to add to possible solutions:
I had my project folder inside a Dropbox folder, moving it out solved the problem for me. (OS X)
One issue is that if your path names aren't absolute then things like this will happen. I had accidentally set resolve.root to ./ instead of __dirname and this caused me to waste a lot of time deleting and re-creating files like the guys above me.
Note that if you run webpack within a virtual machine (Vagrant / Virtualbox) and you change your files on the host platform, file updates in the shared folder may not trigger inotify on Ubuntu. That will cause the changes to not be picked up by webpack.
see: Virtualbox ticket #10660
In my case, editing and saving the file on de guest (in vi) did trigger webpack. Editing it on the host (in PhpStorm, Notepad or any other application) dit NOT trigger webpack whatever I did.
I solved it by using vagrant-fsnotify.
Updates: deleting the entire directory and git cloning afresh from repo fixes my problem.
If changing fs.inotify.max_user_watches as pointend out by César still doesn't work try to use polling instead of native watchers by creating your script as shown in the docs or running webpack with --watch --watch-poll options.
Work for me in Laravel Homestead
--watch --watch-poll
I was having the same issue on a .vue file.
When the server restarted all worked fine, but on the next save it didn't recompiled anymore.
The issue was on the import file path that had one letter capitalized. It's very hard to figure this issue because everything works on a server reboot. Check the case of your paths.
If you are using Vim you should try setting backupcopy to yes rather than the default auto. Otherwise Vim will sometimes rename the original file and create a new one, which will mess up with webpack watch:
https://github.com/webpack/webpack/issues/781
Just add this to your vim settings if this is the case:
set backupcopy=yes
It wasn't recompiling for me but then I realized / remembered that webpack watches the dependency graph and not just a folder (or files). Sure enough the files I was changing weren't part of that graph yet.
I had similar issue, neither webpack or rollup in watch mode ware catching the changes I made. I found out that it was basically my fault as I was changing module (.tsx file) which wasn't yet imported anywhere in the application (for example App.ts which is entry point) and I was expecting build tools to report errors I made there.
For me, creating folders and files in VS Code was the issue. To fix, I re-cloned my repo and this time, created new folders and files through the command line instead of Code. I think Code was corrupting the files for some reason. I saw the application just updated so maybe it's a new bug.
The way I resolved the issue was finding a capitalization error in an import path. Folder on file system had lower case first letter, import path was upper case. Everything compiled fine, so this was just a webpack watch include issue.
Also had this issue inside a VirtualBox (5.2.18) Ubuntu (18.04) VM using Vagrant (2.1.15) with rsync synchronization. Suddenly, first build runs great but Webpack does not take the changes into consideration afterwards, even with fs.inotify.max_user_watches=524288 set. Adding poll: true in Webpack config didn't help either.
Only vagrant-notify-forwarder worked (vagrant-fsnotify didn't, for some reason), but then the rebuild happened too quickly after saving the file on the host and I suppose that rsync didn't have enough time to finish its task (maybe due to the amount of synced directories inside my Vagrantfile?).
Finally I made the watch work again by also increasing the aggregateTimeout in my Webpack config:
module.exports = {
watch: true,
watchOptions: {
aggregateTimeout: 10000
},
...
}
If this solution works for you, try lowering this value again, otherwise you'll have to wait 10 seconds until the build restarts each time you hit save. The default value is 300 ms.
What was the cause in my case:
It seems that the value of: max_user_watches
in the /proc/sys/fs/inotify/max_user_watches
is affecting webpack
To check your actual value
$cat /proc/sys/fs/inotify/max_user_watches
16384
16384 was in my case and it still wasnt enough.
I tried different type of solutions like:
$ echo fs.inotify.max_user_watches=100000 | sudo tee -a /etc/sysctl.conf
$ sudo sysctl -p
But it seems that even if I changed the value, when I restarted my PC it would go back to default one 16384.
SOLUTION if you have Linux OS(my case, I have Manjaro):
Create the file:
sudo nano /etc/sysctl.d/90-override.conf
And populate it with:
fs.inotify.max_user_watches=200000
It seems 200000 is enough for me.
After you create the file and add the value, just restart the PC and you should be ok.
I have the same issue. And I notice it's not compiling because my folder contains some character(*). And using the old watcher plugin seems to resolve the issue.
Add this line to your webpack config file.
plugins: [
new webpack.OldWatchingPlugin()
]
For me deleting node_modules and doing npm install or yarn again to install all the packages solved the problem
An easy solution on MacOS is the following :
Open two terminal windows in the same directory that your project resides.
In the first terminal window run : webpack --watch
In the second terminal windows run : webpack-dev-server
I have tried many possible solutions and this seems to be the most reliable
Possible solution: changing context to the app directory.
I had all my webpack config files in a sub folder:
components/
webpack/
development.js
app.js
In webpack/development.js, set context: path.join(__dirname, '../') solved my problem.
After trying a handful of strategies for fixing this problem I ended up just giving up but then while solving another issue I tried again and all of sudden the --watch flag was finally working.
To be honest I do not know what specifically made it work but after performing the following steps it just started working:
1. Install most recent gcc version
$ sudo port install gcc48
$ sudo port select --set gcc mp-gcc48
2. Install most recent clang version
$ sudo port install clang-3.6
$ sudo port select --set clang mp-clang-3.6
3. Export variables holding the patch to C and C++ compiler
$ export CC=/opt/local/bin/clang
$ export CXX=/opt/local/bin/clang++
It might have happened that while installing these packages some dependency just added the missing piece of the puzzle, who knows ...
Hope this help anyone struggling out there to make it working.
I am adding another answer because I believe that this is the best solution so far.
I am using it every day and it rocks!
Just install this library :
https://github.com/gajus/write-file-webpack-plugin
Description :
Forces webpack-dev-server program to write bundle files to the file system.
How to install :
npm install write-file-webpack-plugin --save-dev
Try changing --watch to -d --watch
worked for me
If this happened suddenly in your project, then this could fix the issue.
Maybe somehow the files which were tracking your project changes which webpack looks for got corrupted.
You can create them again just by following simple steps.
come out of your project dir. ($: cd ..)
move your project to different directory ($: mv {projectName} {newName})
go into the new dir ($: cd {newName})
start the server and check if it reloads on every file change (it should work in most cases, because now webpack creates new files to watch for changes)
come out of the dir ($: cd ..)
move it back to its original name ($: mv {newName} {projectNam})
This worked for me............
I came across this question when I was having a similar issue-- it appeared that webpack was not rebundling, even when running webpack --config.
I even deleted bundle.js and the webpage was still displaying as before my edits.
For those of you who get this same problem, I finally did the 'empty cache and hard reload' option in chrome (right click the reload button with the devtools open) and that did that trick
I met the same issue, tried many things, finally Chrome Clear Browsing Data on Mac worked for me.
These modules have been installed:
"browser-sync": "^2.26.7",
"browser-sync-webpack-plugin": "^2.2.2",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.9"
Problem was in distiction between .js and .ts files. Why ?
On project build, Visual Studio compiles typescript files into .js and .js.map.
This is totally unecessary, because webpack handles typescript files as well (with awesome-typescript-loader). When editing componet .tsx files in Visual Studio Code or With disabled compileOnSave option in tsconfig.json, edited ts file is not recompiled and my webpack was processing unactual .js file.
Solution was to disable compiling typescript files in visual studio on project build. Add
<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
in PropertyGroup of your .csproj.
Related
I am new to react-native and have found an error that makes absolutely no sense to me.
I am trying to include a calendar library: https://github.com/wix/react-native-calendars
I have included the dependency for that library in my package.json file and run npm install
The project was running fine and as expected. I have simply added one line of code to the project:
import { Calendar, CalendarList, Agenda } from 'react-native-calendars';
Nothing else. However now I am getting a red error message when the app loads on device and this is what my console is saying:
error: bundling failed: Error: While trying to resolve module xdate
from file
/Users/Alex/Documents/workspace/mobile/node_modules/react-native-calendars/src/index.js,
the package
/Users/Alex/Documents/workspace/mobile/node_modules/xdate/package.json
was successfully found. However, this package itself specifies a
main module field that could not be resolved
(/Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js.
Indeed, none of these files exist:
*
/Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)
*
/Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)
at ResolutionRequest.resolveDependency (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:103:15)
at DependencyGraph.resolveDependency (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/node-haste/DependencyGraph.js:272:4579)
at dependencies.map.relativePath (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:376:19)
at Array.map ()
at resolveDependencies (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:374:16)
at /Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:212:33
at Generator.next ()
at step (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:297:313)
at /Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:297:473
at
However I have checked in the directory and in fact /Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js does exist. However I do not see any of this part: (.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)`
As to how /Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js/index can exist, that doesn't make sense because xdate.js is not a directory.
Any help?
It Usually happens if you try to install a module while your packager is open.
Try to delete node_modules folder and close the packager.
Then reinstall everything by npm install in your project directory.
First close your JavaScript bundler (Metro bundler in my case) and restart the application. This will create fresh dependency graph. This should solve the issue.
Just restart the bundler - no need to delete the Node Modules folder
I came across this issue when adding and using react-native-elements when using VS Code and Android Studio emulator on Linux Mint
In VS Code I had a terminal running Expo with Metro Bundler via 'npm start' command. After installing the react-native-elements in the folder (using 'npm install --save react-native-elements') and adding the import into the .js file I got the "However, this package itself specifies a main module field that could not be resolved" error.
In my case, this just involved a ^C in the terminal session to stop the Metro bundler and then running 'npm start' again. There was no need to delete the node modules folder at all.
If you're still getting the error even after deleting the ./node_modules folder and running npm install again, try doing the install with the --update-binary flag, i.e npm install --update-binary. This should clear out and rebuild any previously built packages on your machine.
Please don't delete the node modules folder.
The bundler has least to deal with node modules folder.
Instead close all the terminals. If using VS-code close that also.
Close all the local host server ports and if possible restart the system.
This might solve the issue.
If anyone have same issue, and remove node_module not working. Then you can try remove all node_module, package lock and using yarn to install node_module instead npm. Hope this help
None of the solutions above helped me except for restarting my MacBook. Wasted 30 minutes trying to fix this issue as I couldn't believe restarting my computer could be a solution.
I'm attempting to update my Phenomic install to webpack 2 beta 13 (I've heard people suggest the beta is pretty stable now).
I get the follow error when trying to build version using the DedupePlugin, but it seems to work if I remove it. The error is:
phenomic:builder ChunkRenderError: No template for dependency: TemplateArgumentDependency
at Compilation.createChunkAssets
Phenomic includes webpack itself and sets up part of the config. You can run a build using Phenomic and it will also take custom webpack settings from your own generate project. A default project is created for you to modify when you initialise Phenomic.
I've tried changing the version numbers to "webpack": "2.1.0-beta.13", under Phenomic's peer and normal dependencies and rebuilding with it npm linked. I also made a few of the changes needed for updating webpack 1 to version 2.
I've also deleted node_modules in both Phenomic and my project directories, which did not seem to help (and took a long time ;).
I've browsed through this thread which was webpack 1 related and there is some suggestion of dependencies causing multiple copies of webpack. Any ideas are appreciated.
Update:
I made my webpack 2 changes in Phenomic and setup the default project. It seems to build (with some CSS issues), so the problem seems related to the more complex project I am using Phenomic with. Maybe another dependency is bringing in another copy of webpack.
It seems this is npm link related as I installed installed Phenomic from my file system and the issue disappears.
I also noticed there was a global copy of Phenomic, which is also possibly related to npm link.
Another tip I found was npm ls is useful finding what dependencies are in use. You can pipe the output to a file if you want to read it in an editor.
I'm trying to create a custom build with core-js. Per the documentation, I first ran
npm i core-js && cd node_modules/core-js && npm i
which seemed to be fine. Then, also per the docs I tried
C:\GIT\coreJS_Custom\node_modules\core-js>npm run grunt build:es6.array.from -- --library=on --path=custom uglify
and lots of variations on that theme. It seems to run briefly, with no output at all, and I can't seem to find any generated file. What am I doing wrong?
Also, the above commands were run on the Windows 8.1 cmd terminal.
What's particularly interesting (and frustrating) is that running this
C:\GIT\coreJS_Custom\node_modules\core-js>npm run grunt kjhgjhghkghh
Similarly runs briefly and then seems to succeed.
I'm not sure what my root problem is, but for me, running the grant task on its own, without npm run did the trick
So something like this should be the final product.
C:\GIT\coreJS_Custom\node_modules\core-js>grunt build:es6.array.from --library=on --path="es6-array-from-build-min2" uglify
Just earlier, I posted my question:
https://stackoverflow.com/questions/28336443/how-to-not-put-my-js-files-in-user-myuser-for-node-js
I have a file, hello.js, located in /Users/MyUser/Desktop/Node/
I can see that my default directory is /Users/MyUser/
Okay, so I get that I need to change my working directory. What I have been able to find so far is to use >process.chrdir('/Users/MyUser/Desktop/Node/');
Cool, that works, but now when I get out of the REPL shell, the directory resets.
The person who responded to my question said that I needed to run >node init and later npm install <name of dependency> --save
My first question: I have ran >node init and see that I can create this package.json file, what does this do exactly?
Secondly: I was told that I need to add dependancies. Could someone please explain to me what this means in Node terms? Does a dependancy simply mean a folder that I want node to include? Do I want to add this Node folder on my Desktop to be able to run my scripts?
I am currently trying to go through the learnyounode courses, however I do not want to have to save all of these test files in my /User/MyUser directory, so any advice would be greatly appreciated.
Thanks
I have ran >node init and see that I can create
this package.json file, what does this do exactly?
npm init is used to create a package.json file interactively. This will ask you a bunch of questions, and then write a package.json for you.
package.json is just a file that handle the project's dependencies and holds various metadata relevant to the project[ project description, version, license information etc]
I was told that I need to add dependencies. Could someone please
explain to me what this means in Node terms?
Lets say you're building an application that is dependent on a number of NPM modules, you can specify them in your package.json file this way:
"dependencies": {
"express": "2.3.12",
"jade": ">= 0.0.1",
"redis": "0.6.0"
}
Now doing npm install would install a package, and any packages that it depends on.
A package is:
a folder containing a program described by a package.json file
a gzipped tarball containing (1)
a url that resolves to (2)
a # that is published on the registry with (3)
a # that points to (4)
a that has a "latest" tag satisfying (5)
a that resolves to (2)
If you need to install a dependency that haven't been included in package.json, simply do npm install <packageName>. Whether or not you want to include this newly installed package in package.json is completely your take. You can also decide how this newly installed package shall appear in your package.json
npm install <packageName> [--save|--save-dev|--save-optional]:
--save: Package will appear in your dependencies.
--save-dev: Package will appear in your devDependencies.
--save-optional: Package will appear in your optionalDependencies.
Does a dependency simply mean a folder that I want node to include?
Umm, partly yes. You may consider dependencies as folders, typically stored in node_modules directory.
Do I want to add this Node folder on my Desktop to be able to run my
scripts?
No, node manages it all. npm install will automatically create node_modules directory and you can refer to those dependencies with
require() in your .js files
var express = require('express');
Node REPL simply provides a way to interactively run JavaScript and see the results. It can be used for debugging, testing, or just trying things out.
process.cwd() points to the directory from which REPL itself has been initiated. You may change it using process.chdir('/path'), but once you close the REPL session and restart, it would always re-instantiate process.cwd() to the directory from which it has been started.
If you are installing some packages/dependencies in node project1 and think those dependencies can also be useful for node project2,
install them again for project2 (to get independentnode_modules directory)
install them globally [using -g flag]. see this
reference packages in project2 as
var referencedDependency = require('/home/User/project1/node_modules/<dependency>')
Simply doing process.chdir('/home/User/project1/node_modules/') in REPL and referencing as
var referencedDependency = require('<dependency>') in your js file wont work.
>process.chdir('/Users/MyUser/Desktop/Node/'); change the working directory only for that particular REPL session.
Hope it helps!
This has nothing to do with node.js but is rather inherent in the design of Unix (which in turn influences the design of shells on other operating systems).
Processes inherit values from their parent's environment but their environments are distinct.
That terse description of how process environments work has a sometimes unexpected behavior: you cannot change your parent's environment. It was designed this way explicitly for security reasons.
What this means is, when you change the working directory in a process and quits that process your shell's working directory will not be affected. Indeed, your shell's working directory isn't affected even when the process (in this case, node REPL) is running.
This exact question is often asked by people writing shell scripts wanting to write a script that CDs into someplace. But it's also common to find this question asked by people writing other languages such as Perl, Tcl, Ruby etc. (even C).
The answer to this question is always the same regardless of language: it's not possible to CD from another program/script/process.
I'm not sure how Windows handles it so it may be possible to do it there. But it's not possible on Unixen.
I'd like to automatically restart the server after particular files are edited.
Is there anything I can install to help me do that? - or will I need to watch the folder run a script accordingly.
Any pointers appreciated
Use supervisor. Install it with npm install supervisor -g and launch your code with supervisor server.js and you should be good to go. Note that by default it keeps an eye on the files that are in the same directory as the server.js and it's subdirectories, but it should be possible to add additional paths.
You could use Nodemon for that, there is even a video tutorial on it.
https://github.com/mdlawson/piping is good too.
There are already node "wrappers" that handle watching for file
changes and restarting your application (such as node-supervisor), as
well as reloading on crash, but I wasn't fond of having that. Piping
adds "hot reloading" functionality to node, watching all your project
files and reloading when anything changes, without requiring a
"wrapper" binary.
Nodemon is good for it https://github.com/remy/nodemon
Also, if you want nodemon to restart your app only if particular files are changed, it is important to have .nodemonignore file in which you can tell changes to which files should be ignored by nodemon.
Example .nodemonignore file :
/public/* # ignore all public resources
/.* # any hidden (dot) files
*.md # Markdown files
*.css # CSS files
.build/* # Build folder
/log/*