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).
Related
I am trying to build a simple web project
project structure like this
-src
--index.html
--index.js
--style.css
package.json
yarn.lock
I installed parcel-bundler with this
yarn global add parcel-bundler
And I run the parcel build command
parcel build src/index.html
But error has occurred followed by this log
D:\playground\js\sample>parcel build src/index.html
× D:\playground\js\sample\src\style.css:undefined:undefined: plugin is not a function
at LazyResult.run (C:\Users\pc\AppData\Roaming\nvm\v15.14.0\node_modules\parcel-bundler\node_modules\postcss\lib\lazy-result.js:288:14)
at LazyResult.asyncTick (C:\Users\pc\AppData\Roaming\nvm\v15.14.0\node_modules\parcel-bundler\node_modules\postcss\lib\lazy-result.js:212:26)
at C:\Users\pc\AppData\Roaming\nvm\v15.14.0\node_modules\parcel-bundler\node_modules\postcss\lib\lazy-result.js:254:14
at new Promise (<anonymous>)
at LazyResult.async (C:\Users\pc\AppData\Roaming\nvm\v15.14.0\node_modules\parcel-bundler\node_modules\postcss\lib\lazy-result.js:250:23)
at LazyResult.then (C:\Users\pc\AppData\Roaming\nvm\v15.14.0\node_modules\parcel-bundler\node_modules\postcss\lib\lazy-result.js:131:17)
I'm just following the instruction of parcel's official docs
I cannot find a solution
please help me
Try --no-minify
Why is the accepted answer, "throw out the baby with the bathwater?"
parcel-bundler does still work, but instead of fixing what's broken, it's been abandoned for Parcel 2, which DOES NOT support Vue 2 SFCs.
Building a Rails 6/Vue 2 app and converting to parcel from webpack(er), so Parcel 2 is not an option for me. (Demanding people upgrade, and then not providing an upgrade path or decent docs, reminds me too much of webpack!)
parcel build ./app/packs/entrypoints/*.js --no-minify
This disables minification, which at least eliminates this particular error for me.
Problem solved: parcel-bundler is deprecated. Use 'parcel' not 'parcel-bundler'
package.json
If you have preset the scripts...
"scripts": {
"start": "parcel index.html",
"dev": "parcel index.html",
"build": "parcel build index.html"
},
...simply run
npm run build
otherwise use this syntax:
npm run build index.html
Replace index.html to whatever file you want to build, but make sure it is the same type of file.
I'm trying to get PostCSS CLI to work on Windows, to use with PHPStorm. I've got it working via command line options, but I want to use it with the javascript config file.
Here are the commands I used to install PostCSS through NPM:
# NPM is installed at PostCSS\node\npm. Commands are run in the PostCSS dir.
"node\npm" install --global postcss-cli # PostCSS\node\node_modules\postcss-cli\
"node\npm" install --global lost # PostCSS\node\node_modules\lost\
# and a few other modules...
So I've got about 6 modules are in the node/node_modules directory now.
I have this batch file (split into multiple lines for your viewing pleasure). This is in the PostCSS folder, just for testing:
"node\postcss" -u postcss-normalize
-u postcss-cssnext
-u postcss-import
-u lost
-o output.css
source.css
This batch file works, and all of the plugins work too.
My problem:
I want to use postcss.config.js, instead of command line parameters, so that I can customize the plugins easily and make it even more portable. I have dozens of separate projects that I will use the same settings for in different directories and computers. So to do that, I've got a new batch file called "run-from-config.bat" with the following content:
"node\postcss" -c "postcss.config.js"
-o output-configured.css
source.css
This new batch file is in the same folder as the command line version, along with the new file postcss.config.js:
module.exports = {
plugins: [
require('postcss-normalize')({
"browserslist": "last 2 versions" // I intend to add more options...
}),
require('postcss-cssnext')({}),
require('postcss-import')({}),
require('lost')({})
]
}
This follows the instructions on the PostCSS-CLI page under "Content": https://github.com/postcss/postcss-cli
But it gives me an error, and appears to be loading modules from the wrong location:
Processing source.css
{ Error: Cannot find module 'postcss-normalize'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (G:\Dropbox\Web Development\PostCSS\postcss.config.js:3:5)
at Module._compile (module.js:570:32)
at requireFromString (G:\Dropbox\Web Development\PostCSS\node\node_modules\postcss-cli\node_modules\require-from-string\index.js:27:4)
at G:\Dropbox\Web Development\PostCSS\node\node_modules\postcss-cli\node_modules\cosmiconfig\lib\loadJs.js:11:15 code: 'MODULE_NOT_FOUND' }
So it seems it can't find the module when using this javascript config file. But it can when loading plugins through the command line option -u. I simply don't know how to change the module directory.
I tried using some other options to change the directory, including -b and -d, but nothing seems to work. And I just don't understand PostCSS (or the underlying javascript software) enough to debug the problem on my own.
I'm getting a syntax error on link: this line, but I don't understand why it's failing.
> mocha-webpack --webpack-config webpack-test.config.js --growl --colors --require source-map-support/register --watch ./test/*.js
ERROR in ./src/index.js
Module build failed: SyntaxError: /Users/h/dev/haf/logary/vendor/logary-js/src/index.js: Unexpected token (5:7)
};
export Identity from './identity';
at Parser.pp.raise (/Users/h/dev/haf/logary/vendor/logary-js/node_modules/babylon/index.js:1378:13)
at Parser.pp.unexpected (/Users/h/dev/haf/logary/vendor/logary-js/node_modules/babylon/index.js:2817:8)
at Parser.pp.expect (/Users/h/dev/haf/logary/vendor/logary-js/node_modules/babylon/index.js:2811:33)
I'm probably missing something. Babel preset is es2015. It's a pure lib, so no react preset needed. Removing this line makes it all work fine. Except of course that I'm not able to compose the lib in that case.
According to the link you provided, it seems you wanted to do:
export { default as Identity } from './identity';
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!
Using windows, I keep running into NPM errors when running scripts. Is pattern matching different between OSX and Win7? Or is this mocha specific?
For example, my tests are in:
src/redux/normalizers/__tests__
and the npm script is:
"test": "mocha --compilers js:babel/register --recursive 'src/**/__tests__/*'"
My console (also in screenshot below) says this:
> mocha --compilers js:babel/register --recursive 'src/**/__tests__/*'
C:\Users\User\WebstormProjects\redux-form\node_modules\mocha\lib\utils.js:626
throw new Error("cannot resolve path (or pattern) '" + path + "'");
^
Error: cannot resolve path (or pattern) ''src/**/__tests__/*''
screenshot: http://i.imgur.com/EL7LOna.png
Edit I was able to change the repo author's test script for the time being to
"test": "mocha --compilers js:babel/register --recursive src/**/__tests__/*"
Perhaps this is just an error on their part which nobody noticed because nobody else uses windows?
Still, I'd like to understand why. Maybe these links are useful for anyone who comes across this:
Cannot resolve path in Mocha
Two asterisks in file path
You don't need the single quotes. I was able to run the command you provided without them. Like so:
mocha --compilers js:babel/register --recursive src/**/__tests__/*.js