I am using the npm 5.2.0 with mocha-webpack to run my tests. However, my webpack.config.js seem to be ignored as I get all kind of errors of Aliases not being used in my webpack.config.js file.
My package.json command:
"test:mocha": "mocha-webpack",
My mocha-webpack.opts:
--webpack-config webpack.config.js
--colors
--require ignore-styles
--require babel-core/register
--require jsdom-global/register
**/tests/*.test.js
My mocha-webpack.opts is being used as the error output is in red.
I also tried with a
--webpack-config webpack.config-test.js
That contains only the required webpack stuff: babel en aliases, but the same errors appear.
Some of the errors:
Module not found: Error: Can't resolve 'Redux/actions' in '/CodeRepo/checklist/src/js'
resolve 'Redux/actions' in '/CodeRepo/checklist/src/js'
Parsed request is a module
Module parse failed: /CodeRepo/buttons/iconTextButton.js Unexpected token (16:12)
You may need an appropriate loader to handle this file type.
Any idea how to solve this? (I followed the example on the net, and the npm mocha-webpack page, but couldn't get it solved).
A lot of sources explain that for this you need to
create a "File Watcher"-Job in the WebStorm-Settings (Tools)
define a "Scope" in WebStorm for the files you want to process
define a .babelrc file for configuration. Babel will use this automatically so you save some params in the call
{
"presets": ["es2015", "react"],
"plugins": ["transform-es2015-arrow-functions"]
}
npm install --save-dev the corresponding packages together with the babel-cli package.
BUT... how can I run the babel-Command on Windows when babel-cli module just delivers a "babel.js" file in its bin-folder? However Windows can only execute .exe, .bat or .cmd-files.
I tried to wrap the call in a cmd-script containing babel %* as I found a solution in one web article, but this did not work for me.
The solution for me was to fill the File Watcher form in a way to have the call of the node executable as Program and add the call for babel.js as first of the Arguments
Program: C:\Program Files\nodejs\node.exe
Arguments: $ProjectFileDir$/node_modules/babel-cli/bin/babel.js $FilePathRelativeToProjectRoot$ --source-maps --out-dir src/test/js
Working Directory: $ProjectFileDir$
Output paths to refresh: $ProjectFileDir$\src\test\js
This makes the babel.js callable for the File Watcher.
It seems to be a common problem, but after a few days of active searching I didn't find any solution that works in my case.
windows7-x64
node: 6.3.0-x64 (also tried node-v4.4.7-x64)
npm: 3.10.3
webpack: 1.13.1
sublime text (not Vim)
First of all, I can't install fsevents on windows, which might be the problem, because it's the library for watching on OS X.
D:\file>npm install webpack
file#1.0.0 D:\file
`-- webpack#1.13.1
npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents#1.0.13
So, if your --watch works on windows, please tell me, do you have the same issue with skipping fsevents when installing webpack?
Secondly, webpack --watch does compile the file, but it doesn't watch at all.
E.g. if I use stylus watch, then it actually blocks my command line until I press ctrl+c
D:\file>stylus -w style.styl
watching C:/Users/...
compiled style.css
watching style.styl
_
And only after ctrl+c it will unblock my keyboard.
^CTerminate batch job (Y/N)? y
stylus-watch
While webpack -w is totally different. It's not just not compiling the file on changes, but it's also not watching at all. I mean that after typing the command webpack --watch it's compiling the file one time, but it doesn't lock my keyboard and so it allows me to write another command.
D:\webpa>webpack main.js bundle.js
D:\webpa>webpack -w main.js bundle.js
D:\webpa>webpack --watch main.js bundle.js
D:\webpa>
webpack-watch
The same with webpack-dev-server - it starts server, but then immediately finishes it.
D:\webpa>webpack-dev-server --hot --inline
http://localhost:8080/
webpack result is served from /
content is served from D:\webpa
D:\webpa>
It looks like the problem is not with webpack.config.js, because it doesn't watch even with a command like webpack --watch main.js bundle.js, but anyway, here is my basic config.
var webpack = require('webpack');
module.exports = {
context: __dirname,
entry: "./main.js",
output: {
path: __dirname,
filename: "bundle.js"
},
};
And I've tried many other variants:
var webpack = require('webpack');
var path = require('path');
var entry = path.join(__dirname, "main.js");
var WebpackNotifierPlugin = require('webpack-notifier');
module.exports = {
context: __dirname,
entry: entry,
output: {
path: __dirname,
filename: "bundle.js"
},
resolve: {root: [__dirname]},
resolve: { fallback: path.join(__dirname, "node_modules") },
resolveLoader: { fallback: path.join(__dirname, "node_modules") },
plugins: [
new webpack.OldWatchingPlugin(),
new WebpackNotifierPlugin(),
new webpack.ResolverPlugin(
new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
),
new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors/js/applibs.js'),
new webpack.optimize.DedupePlugin()
]
};
As I said, the problem seems to be not in webpack.config.js
I've also tried things like:
echo fs.inotify.max_user_watches=524288
webpack-dev-server --content-base ./ --port 9966 --hot --inline
webpack --watch --watch-poll
rename/move/create new folder, reinstall node.js and webpack
So yeah, if you had this issue and you resolved it, please share some info.
Did you have problems with installing fsevents?
Was your webpack --watch command blocking your keyboard and actually watching, but just not compiling files after changes? Or was it finishing watching immediately like in my case?
Any other suggestions what to use apart from --watch and webpack-dev-server?
Thanks!
I'll include this here because it fixed my issue. It may or may not fix yours, depending on if your paths in your post are actually the paths you're using. If it doesn't resolve your issue, at least it'll solve somebodies cause this question comes up first thing for this issue.
You can't have a path with "(" or ")" in it, because the is-glob dependency thinks it's a glob if you do. If you must put your project in a path with "(" (like Program Files (x86)), then you must add something like this to your is-glob module in node_modules:
if (typeof str === 'string' && str.indexOf('Program Files (x86)') > -1)
return false
Have a look at using fswatch. I find myself in the same mess. Windows/Linux cannot support fsevents considering its strictly for OSX. Support for Linux, for example, is through inotify.
It seems fswatch provides a cross-platform filesystem monitor, so you should be all set if you use with your windows machine.
I am having a problem testing UI components that import .scss with webpack. I am testing the component code directly, not the exported webpack bundle.
In my SUT
I have some code that imports scss:
import '!style!css!sass!postcss-loader!../style.scss'
This code causes an error when I run tests:
Error: Cannot find module '!style!css!sass!postcss-loader!../../stylesheets/parts/Breadcrumbs.scss'
at Function.Module._resolveFilename (module.js:336:15)
at Function.Module._load (module.js:286:25)
at Module.require (module.js:365:17)
at require (module.js:384:17)
Cheap workaround
I've been working around this issue with:
try {
require('!style!css!sass!postcss-loader!../style.scss');
} catch(err) { console.log('Not webpack'); }
But this smells dirty, and I would rather not have this code in my SUT.
Running Tests
I can't figure out how to work in the solutions that I have found for this when using babel-node and babel-istanbul instead of mocha directly. Here is how I am currently running tests:
$ babel-node babel-istanbul cover _mocha -- --require ./test/setup.js --recursive
All of the answers I have found are for mocha directly, but I am not running tests with:
$ mocha --compilers js:babel-core/register --require ./test/setup.js --recursive
?
How can I work in a compiler or setup file to tell mocha to ignore .scss files. I am going to have this problem next with .svg files too I am sure.
What about github.com/css-modules/css-modules-require-hook or if you wanna just ignore the css npmjs.com/package/ignore-styles
EDIT:
If you install ignore-style module and then run:
babel-node babel-istanbul cover _mocha -- --require ./test/setup.js --require node_modules/ignore-styles --recursive
im sure it will work, bare in mind you might need to change the path node_modules/ignore-styles im assuming you have your node_modules in the root of your project.
So I had a similar problem trying to require with a webpack-loader prefix and failing as not in the context of webpack.
prunk was better than rewire etc as covered me for all files as was able to do path matching and replacement.
var prunk = require('prunk');
prunk.alias(/^(your loader prefix)/, '');
Then I modified requires extension handling to replace what was being imported.
require.extensions['.scss'] = function (module, filename) {
module.exports = 'whatever you want';
};
(exactly what style-loader does but style-loader cleans itself up! Also note style loader is misnamed and can handle many extensions))
I added this at the top of my test runner and no unfound modules!
Note I actually went further and used the original loader by itself by reading in the file with fs and passing it to the loader but that may have been over kill and should be using webpack to transpile tests with that sole loader in the first place!
With jpm, one now (from Firefox 38 on) has the possibility to use npm modules in Firefox Add-ons, cf. the documentation on MDN.
This appears to be restricted to the main entry file (index.js by default), especially since require() isn't defined in content scripts.
Is there any way of using npm modules in content scripts for Firefox-Addons?
You can get the url of a file via require.resolve, so use something like:
contentScriptFile: [ require.resolve("something/lib/file.js"), require("sdk/self").data.url("content-script.js") ]
This will use a file from npm in a content script.
If the npm file is a CommonJS file then this becomes more tricky, you might have to read the content of the file, and pass that to the content script (using message passing or the contentScriptOptions) to have it evaluated with requireJS or something.