Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mocha-webpack does not appear to work with webpack 4 #209

Closed
ctaylo21 opened this issue Feb 26, 2018 · 34 comments
Closed

Mocha-webpack does not appear to work with webpack 4 #209

ctaylo21 opened this issue Feb 26, 2018 · 34 comments

Comments

@ctaylo21
Copy link

Issue
Running mocha-webpack with the latest webpack 4 appears to fail. No test output is displayed.

I have create a repo that recreates the issue here: https://github.com/ctaylo21/mocha-webpack-webpack4-bug

I see a deprecation warning about DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead but from what I've read that shouldn't be a breaking change.

Any way to debug this to see if something is blowing up and the error just isn't getting output anywhere?

@astorije
Copy link
Contributor

astorije commented Mar 9, 2018

If anyone wants to help, I opened a PR at #211, solely counting on CI reports to tell me if things are working smoothly 😅

@kiaking
Copy link

kiaking commented Mar 16, 2018

Super nice attempt there! I would really love to see mocha-webpack support webpack 4 and (mocha 5).

But even if your PR gets working, would it be merged and published? Seems like this project has stopped for a while... I'm concerned on that more than the PR.

/Cc @zinserjan

@astorije
Copy link
Contributor

@kiaking, I wouldn't be too worried about this, because there are ways to solve this: fork the project, contact @zinserjan by some other means to kindly ask for his attention, ask him to add maintainers to the project, etc.

And even if that doesn't happen, once support for Webpack v4 is ensured, one can always use the GitHub URL in their package.json until this gets released or forked. Not ideal, but I'll take this over not being able to upgrade Webpack at all :)

About this PR, I'm unfortunately stuck and could use some help. If you or anyone else is willing to help, I am happy to grant access to my branch for people to play with, or apply changes if you have any to suggest!

🙏 🙏 🙏

@kiaking
Copy link

kiaking commented Mar 16, 2018

Wow and see what happened. New release was published!!! Yeah!!! 🎉

I would really love to help, I do but I just don't have enough time... But if I can find any, I will for sure!

@kraenhansen
Copy link

👍 for the release, although that doesn't seem to fix this issue. @astorije I'm cheering for you (or anyone else that can help move this along)!

@adonespitogo
Copy link

Thanks for working on this @darrinholst . Really wanted to work on this. But looking at the huge pile of codes, couldn't figure out where to start as I have not worked on any webpack plugin before. @astorije Can you point me to the right direction?

@astorije
Copy link
Contributor

@adonespitogo, there is current work on this and @zinserjan is almost done! Props to him!!

@adonespitogo
Copy link

Thanks @astorije and to @zinserjan . Really looking forward for this to work. Kudos to you guys!

@adonespitogo
Copy link

Wow that was fast 🎊 Thanks so much for the hard work you guys put on this. Looking forward for the release 😃

@adonespitogo
Copy link

@zinserjan

I tried to use the newly merged PR for webpack 4 support in master branch. When I attempt to run my tests, I get this error:

module.js:559
    throw err;
    ^

Error: Cannot find module '../lib/cli'
    at Function.Module._resolveFilename (module.js:557:15)
    at Function.Module._load (module.js:484:25)
    at Module.require (module.js:606:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/home/adonesp/Projects/espresowifi/node_modules/mocha-webpack/bin/mocha-webpack:2:1)
    at Module._compile (module.js:662:30)
    at Object.Module._extensions..js (module.js:673:10)
    at Module.load (module.js:575:32)
    at tryModuleLoad (module.js:515:12)
    at Function.Module._load (module.js:507:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! piso-wifi@3.0.3 test: `mocha-webpack "test/**/*.spec.js"`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the piso-wifi@3.0.3 test 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!     /home/adonesp/.npm/_logs/2018-03-18T22_55_35_622Z-debug.log

@zinserjan
Copy link
Owner

Installing from github doesn't work. You need to build the sources with npm run build ;)

@adonespitogo
Copy link

adonespitogo commented Mar 18, 2018

Can I build the sources with github as a source? If so, how? Sorry really need this to work badly. What is your ETA for the next release?

@adonespitogo
Copy link

I was able to build the sources by forking the master branch and ran npm build then copy the sources to my local node_modules directory. Now I'm having another error:

> mocha-webpack "test/**/*.spec.js"

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'optimization'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.
   For loader options: webpack 2 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           optimization: ...
         }
       })
     ]
    at webpack (/home/adonesp/Projects/espresowifi/node_modules/mocha-webpack/node_modules/webpack/lib/webpack.js:19:9)
    at createCompiler (/home/adonesp/Projects/espresowifi/node_modules/mocha-webpack/lib/webpack/compiler/createCompiler.js:15:40)
    at TestRunner.<anonymous> (/home/adonesp/Projects/espresowifi/node_modules/mocha-webpack/lib/runner/TestRunner.js:164:51)
    at eval (eval at processIncludes (/home/adonesp/Projects/espresowifi/node_modules/mocha-webpack/node_modules/nodent-runtime/runtime.js:36:12), <anonymous>:3:4727)
    at <anonymous>
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! piso-wifi@3.0.3 test: `mocha-webpack "test/**/*.spec.js"`
npm ERR! Exit status 1
npm ERR! 
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!     /home/adonesp/.npm/_logs/2018-03-18T23_24_43_851Z-debug.log

I guess I just have to wait for the next release. Thanks so much for your work @zinserjan

@zinserjan
Copy link
Owner

Just tried to release it as pre-release... But that failed cause npm run docs:prepare gives me some peerDependencies failures instead of warnings...
Error: The package eslint does not satisfy its siblings' peerDependencies requirements!

This needs to be fixed before I can release it.

@astorije
Copy link
Contributor

@zinserjan, this is what I was talking about at #211 (comment). I'll look into it tonight :)

@zinserjan
Copy link
Owner

Released as 2.0.0-beta.0

@astorije
Copy link
Contributor

Just started using it in thelounge/thelounge#2117, and so far so good, it seems.

@yinsang
Copy link

yinsang commented Mar 25, 2018

yarn upgrade mocha-webpack@v2.0.0-beta.0
or
npm install mocha-webpack@next

@ezmiller
Copy link

Upgrade to 2.0.0-beta.0 fixed this for me. Thanks @zinserjan!

@markerikson
Copy link

It appears that this update to work with Webpack v4 made mocha-webpack incompatible with Webpack 3, due to the change in importing Webpack's watching compiler:

Error: Cannot find module 'webpack/lib/Watching'
    at Function.Module._resolveFilename (module.js:555:15)
    at Function.Module._load (module.js:482:25)
    at Module.require (module.js:604:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\myproject\node_modules\mocha-webpack\lib\webpack\compiler\createWatchCompiler.js:21:17)

Can this be handled in a way that's compatible with both Webpack 3 and Webpack 4, or are all the other Webpack 4 changes too much for it to work with both?

@PandaWood
Copy link

PandaWood commented May 4, 2018

I'm slightly confused, the doco at http://zinserjan.github.io/mocha-webpack/ claims that mocha-wepback works with webpack v4.x.x but this thread suggests it won't and I'll need 2.0.0-beta.0 ...?

I've just discovered the project and using WebPack v4

@adonespitogo
Copy link

@PandaWood support for webpack 4 is in beta 2.0.0 that's why you need to install the beta in order to use it with webpack 4.

@a1mersnow
Copy link

I update to mocha-webpack@next
But still not work
image
It just output nothing

@nevercast
Copy link

@aimergenge Can you check this again? It may have been resolved this week.

timiscoding added a commit to timiscoding/mocha-webpack that referenced this issue Jun 14, 2018
Currently, installing mocha-webpack via npm defaults to 1.1.0 which does not
work with webpack 4 but the docs say otherwise. Updated readme so it is more
explicit (zinserjan#209)
@mbana
Copy link

mbana commented Jul 24, 2018

is this fixed?

@vivaldus
Copy link

I'm using webpack@4.16.5, mocha-webpack@2.0.0-beta.0 with command:

./node_modules/mocha-webpack/bin/mocha-webpack --webpack-config ./test/webpack.test-backend.config.ts ./src/**/*.spec.ts

with specs in webpack.test-backend.config.ts that run fine with plain old webpack. Below is the error I'm getting. Not sure what to make of this -- looks like an antiquated 'solution'. Any insights/suggestions would be appreciated.

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'commonWebpackConfig'. These properties are valid:
   object { mode?, amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, externals?, loader?, module?, name?, node?, output?, optimization?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, serve?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.
   For loader options: webpack >= v2.0.0 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           commonWebpackConfig: …
         }
       })
     ]

@jocabrera
Copy link

@ctaylo21 to fix this warning
DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead
I updated that
npm i -D karma-webpack@next

@kraenhansen
Copy link

kraenhansen commented Jan 10, 2019

@yinsang / @zinserjan - Is it time for a 2.0.0 release? :)

@chulman444
Copy link

Do we need a new maintainer?

mocha-webpack 2.0.0-beta (npm link) was published last year and is still the latest version.

Came across this issue long ago, and same solution fixed it. npm i -D mocha-webpack@next.

@mattbontrager
Copy link

Resolved issue by removing mocha-webpack and installing mochapack.

@Neha8482
Copy link

Neha8482 commented Jul 9, 2020

Can anyone please help me with this issue TypeError: mocha.useColors is not a function

WEBPACK Failed to compile with 1 error(s)

TypeError: mocha.useColors is not a function
at configureMocha (C:\Users\dell\AppData\Roaming\npm\node_modules\mocha-webpack\lib\runner\configureMocha.js:34:9)
at TestRunner.prepareMocha (C:\Users\dell\AppData\Roaming\npm\node_modules\mocha-webpack\lib\runner\TestRunner.js:139:48)
at C:\Users\dell\AppData\Roaming\npm\node_modules\mocha-webpack\lib\runner\TestRunner.js:193:36
at C:\Users\dell\AppData\Roaming\npm\node_modules\mocha-webpack\lib\webpack\compiler\registerReadyCallback.js:26:7
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\dell\AppData\Roaming\npm\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), :16:1)
at AsyncSeriesHook.lazyCompileHook (C:\Users\dell\AppData\Roaming\npm\node_modules\webpack\node_modules\tapable\lib\Hook.js:154:20)
at C:\Users\dell\AppData\Roaming\npm\node_modules\webpack\lib\Compiler.js:304:22
at Compiler.emitRecords (C:\Users\dell\AppData\Roaming\npm\node_modules\webpack\lib\Compiler.js:499:39)
at C:\Users\dell\AppData\Roaming\npm\node_modules\webpack\lib\Compiler.js:298:10
at C:\Users\dell\AppData\Roaming\npm\node_modules\webpack\lib\Compiler.js:485:14
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\dell\AppData\Roaming\npm\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), :18:1)
at AsyncSeriesHook.lazyCompileHook (C:\Users\dell\AppData\Roaming\npm\node_modules\webpack\node_modules\tapable\lib\Hook.js:154:20)
at C:\Users\dell\AppData\Roaming\npm\node_modules\webpack\lib\Compiler.js:482:27
at C:\Users\dell\AppData\Roaming\npm\node_modules\webpack\node_modules\neo-async\async.js:2818:7
at done (C:\Users\dell\AppData\Roaming\npm\node_modules\webpack\node_modules\neo-async\async.js:3522:9)
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\dell\AppData\Roaming\npm\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), :4:1)
at AsyncSeriesHook.lazyCompileHook (C:\Users\dell\AppData\Roaming\npm\node_modules\webpack\node_modules\tapable\lib\Hook.js:154:20)
at C:\Users\dell\AppData\Roaming\npm\node_modules\webpack\lib\Compiler.js:464:33
at MemoryFileSystem.writeFile (C:\Users\dell\AppData\Roaming\npm\node_modules\mocha-webpack\node_modules\memory-fs\lib\MemoryFileSystem.js:328:9)

@Neha8482
Copy link

Neha8482 commented Jul 9, 2020

Can anyone help me with this issue TypeError: mocha.useColors is not a function

@KMarshland
Copy link

KMarshland commented Jul 22, 2020

@Neha8482 I fixed TypeError: mocha.useColors by downgrading mocha from 8.0 to 7.2

@snolangps
Copy link

yarn upgrade mocha-webpack@v2.0.0-beta.0
or
npm install mocha-webpack@next

@yinsang still didn't work with mocha 8.., last it worked with for me was mocha 7.2.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests