-
Notifications
You must be signed in to change notification settings - Fork 220
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
File change detected, webpack builds initial version #100
Comments
I'm having similar issues, though I'm running PhantomJS and not using gulp (just I'm wondering whether it might be a browser cache issue: karma-runner/karma-phantomjs-launcher#110 but not sure if that helps you. Haven't had a chance to investigate this further. |
I can confirm the same issue. We are using karma CLI with chrome and firefox. EDIT: A couple other notes - We are using the "alternative usage" for a single entry point (https://github.com/webpack/karma-webpack#alternative-usage) and curiously the rebuild picks up changes for some files, but not others. Config: package versions
relevant karma conf browsers: ['Chrome', 'Firefox'], preprocessors: {
'./app/client-tests.bundle.js': ['webpack', 'sourcemap'],
}, webpack: {
devtool: 'inline-source-map',
module: {
preLoaders: [
{
test: /\.js$/,
include: [
/-test\.js/,
/fixtures/,
],
loader: 'babel',
},
{
test: /\.js$/,
exclude: [
/-test\.js/,
/fixtures/,
/node_modules/,
],
loader: process.env.TEST_WATCH ? 'babel' : 'isparta',
},
], |
@SpainTrain can you link your entire karma config |
this is happening for me also |
'use strict'
const assign = require('lodash/assign')
const get = require('lodash/get')
const path = require('path')
const webpack = require('webpack')
const combineLoaders = require('webpack-combine-loaders')
const loadersConfigs = require('./webpack.loaders')
const browserExternals = require('./webpack.browser-externals')
// If you need object diffs, run with `DISABLE_FUN=1`
const localReporters = [process.env.DISABLE_FUN ? 'mocha' : 'nyan']
const ciReporters = ['coverage', 'mocha', 'junit']
const appName = require('./package.json').name
module.exports = function(config) {
config.set({
browsers: ['Chrome', 'Firefox'],
files: [
'./app/client-tests.bundle.js',
{
pattern: `dist/${appName}/**/*`,
watched: false,
included: false,
served: true,
nocache: false,
},
],
proxies: {
[`/${appName}/`]: `/base/dist/${appName}/`,
},
frameworks: ['chai', 'mocha'],
plugins: [
'karma-chrome-launcher',
'karma-firefox-launcher',
'karma-chai',
'karma-mocha',
'karma-mocha-reporter',
'karma-sourcemap-loader',
'karma-webpack',
'karma-coverage',
'karma-nyan-reporter',
'karma-junit-reporter',
],
// run the bundle through the webpack and sourcemap plugins
preprocessors: {
'./app/client-tests.bundle.js': ['webpack', 'sourcemap'],
},
reporters: process.env.CI ? ciReporters : localReporters,
mochaReporter: {
showDiff: true,
},
singleRun: true,
// webpack config object
webpack: {
devtool: 'inline-source-map',
plugins: [
new webpack.DefinePlugin({
__IS_SERVER__: false,
}),
new webpack.IgnorePlugin(/ReactContext/),
new webpack.IgnorePlugin(/react\/addons/),
new webpack.IgnorePlugin(/react\/lib\/ExecutionEnvironment/),
new webpack.IgnorePlugin(/homebuddy-asset-path/),
],
externals: assign(browserExternals, {
'hz-tier': '"local-testing"',
window: JSON.stringify({
location: {},
CONTENTFUL_API_HOST: process.env.CONTENTFUL_API_HOST_TEST,
CONTENTFUL_HOMEZEN_SPACE_ID: process.env.CONTENTFUL_HOMEZEN_SPACE_ID_TEST,
CONTENTFUL_HOMEZEN_SPACE_AT: process.env.CONTENTFUL_HOMEZEN_SPACE_AT_TEST,
}),
}),
module: {
preLoaders: [
// transpile all files except testing sources with babel as usual
{
test: /\.js$/,
include: [
/-test\.js/,
/fixtures/,
],
loader: 'babel',
},
// transpile and instrument only testing sources with isparta
{
test: /\.js$/,
exclude: [
/-test\.js/,
/fixtures/,
/node_modules/,
],
loader: process.env.TEST_WATCH ? 'babel' : 'isparta',
},
],
loaders: [
loadersConfigs.json,
loadersConfigs.md,
loadersConfigs.yaml,
loadersConfigs.svg,
loadersConfigs.legacySccs,
loadersConfigs.flexboxgridCss,
{ // postcss + css modules
test: /\.css$/,
loader: combineLoaders([
{
loader: 'style-loader',
},
{
loader: 'css-loader',
query: loadersConfigs.cssLoaderQuery,
},
{
loader: 'postcss-loader',
},
]),
exclude: /flexboxgrid/,
},
],
},
},
webpackMiddleware: {
stats: 'errors-only',
},
coverageReporter: {
reporters: [
// reporters not supporting the `file` property
{type: 'html', subdir: 'report-html'},
{type: 'lcov', subdir: 'report-lcov'},
// reporters supporting the `file` property, use `subdir` to directly
// output them in the `dir` directory
{type: 'json', subdir: '.', file: 'report.json'},
{type: 'cobertura', subdir: '.', file: 'cobertura.txt'},
{type: 'lcovonly', subdir: '.', file: 'report-lcovonly.txt'},
{type: 'teamcity', subdir: '.', file: 'teamcity.txt'},
{type: 'text', subdir: '.', file: 'text.txt'},
{type: 'text-summary', subdir: '.', file: 'text-summary.txt'},
],
},
junitReporter: {
outputDir: path.join(get(process, 'env.CIRCLE_TEST_REPORTS', '/tmp'), 'karma'),
},
})
} |
Was this ever solved? |
I'm using Gulp + Webpack-stream + watch. When I make changes to scss or html files, everything is synced the the serve directory, but when I make changed to TS files, the new js file isn't emitted. When i use cache: false, the problem goes away. So maybe this isn't Karma related at all. What I can also share is that 2 of my team-mates are using MacOS with the same gulp files (same git repo) and it's working as expected for them. I am using Windows 10, and I have to use the cache: false workaround. Not sure if this info helps, I don't even know if the problem is webpack or webpack-stream related so treat this info with caution not to waste your time. |
Here - If I can get a minimal demo that reproduces this issue, i'll get it into the v3 milestone and ensure it's addressed. |
To be completely honest, I'd be happy to provide what ever you need, I'm just a little new to all this (gulp,ts,js,webpack...), I find it hard to set up a new project just to provide a demo. I working with 2 other people on a project that's already part of a production product, they both work on mac, I use windows so I am the only one facing these issues. But I didn't set up the project and the whole build system. How exactly do you want me to provide the demo? a desktop capture with camstudio or something like that? or...? |
Sorry, should have been a bit more specific. Something like this - https://github.com/Silviu-Marian/karma-webpack-pr69 |
@eitama - Your issue is going to be specific to Windows and I would bet has nothing to do with karma, if it's public I can go take a look at it. In all seriousness, if you are going to be working on webdev as a career, save yourself the pain and make the move to OSX. We developers have enough challenges without having to first figure out if a bug is related to the OS we are using and not the code we are authoring. |
@d3viant0ne I understand what you are saying but not sure I agree :) |
I had an issue similar to this. In my case the problem was that some files were matched by two different globs. |
@eitama - I ran on Windows for more than a decade, once I went full time webdev I finally folded and switched. Microsoft & the JS community are trying to make the DX experience better but it's got a long way to go :/ Out of curiosity, have you tried running the |
@Morantron I'll look into that but I bet that's not the problem as the mac users don't have this issue. As for |
Ah! Me too. My repo is public, so I'll link it below. I am also using ts-loader. I happen to be using the "alternative" method as well, but the same issue occurs if you use the non-alternative method. My setup is a little crazy. I am running You can see the issue at this branch (not master): To reproduce:
Refreshing does nothing. Saving the file multiple times does nothing. |
FYI this is super consistent. Also, I am on Windows, but I will test again when I am home to see if I have the same issue on macOS. Update: The behavior is the same on my Mac at home. (Thanks @Blackbaud-SteveBrush for commenting below: It reminded me to check into this on macOS.) |
I'm seeing this issue on MacOS as well. My config is nearly identical to yours, @happycollision . |
Same issue here. I am using the "alternative method" as @SpainTrain mentioned. Here's my relevant snippets. "devDependencies": {
"@types/angular": "^1.6.51",
"@types/angular-mocks": "^1.7.0",
"@types/jasmine": "^2.8.9",
"@types/node": "^10.12.12",
"angular-mocks": "^1.5.8",
"autoprefixer": "^7.1.6",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.5",
"html-webpack-plugin": "^2.30.1",
"imports-loader": "^0.8.0",
"jasmine-core": "^3.3.0",
"karma": "^3.1.3",
"karma-chrome-launcher": "^2.2.0",
"karma-jasmine": "^2.0.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.32",
"karma-webpack": "^3.0.5",
"ng-annotate-loader": "^0.6.1",
"node-sass": "^4.7.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"postcss-loader": "^2.0.9",
"raw-loader": "^0.5.1",
"rimraf": "^2.6.2",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.0",
"ts-loader": "^3.1.1",
"typescript": "^2.4.2",
"webpack": "^3.3.0",
"webpack-dev-server": "^2.9.5",
"webpack-merge": "^4.1.1"
} karma.conf.js const webpackConfig = require('./webpack-configs/webpack.common');
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
files: [
'webpack.tests.js'
],
exclude: [],
preprocessors: {
'webpack.tests.js': ['webpack', 'sourcemap'],
},
webpack: {
resolve: webpackConfig.resolve,
module: webpackConfig.module
},
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
concurrency: Infinity,
cache: false
})
} webpack.common.js const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
entry: {
app: './src/app.ts',
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, '../', 'dist')
},
module: {
rules: [
{
test: /\.ts?$/,
use: [
{
loader: 'ng-annotate-loader'
},
{
loader: 'ts-loader'
}
],
exclude: /node_modules/
},
{
test: /\.css?$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.scss?$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.(woff|woff2|eot|ttf|svg|png|jpg|jpeg)$/,
use: 'file-loader'
},
{
test: /\.html$/,
use: 'raw-loader'
},
{
test: require.resolve('snapsvg'),
use: 'imports-loader?this=>window,fix=>module.exports=0',
},
]
},
resolve: {
extensions: [".ts", ".js"]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: '[name].bundle.js',
minChunks(module, count){
var context = module.context;
return context && context.indexOf('node_modules') >= 0;
}
})
]
}; |
I can confirm that this occurs with |
Thanks for the easy reproduction steps @happycollision |
could this be related to karma-runner/karma#3226? i'm using the alternative usage setup and only started seeing webpack compiled changes not being picked up after upgrading karma from an earlier version to |
Aha! We have a winner! Not a |
So it looks like this same symptom has happened twice, then? Because this issue is super old. Glad you found the newest source. I wonder if it was due to the runner in the past as well... |
I'm having a problem, and I kinda figure it's not a bug but some fairly obvious configuration problem but I can't find anything on it, so here's to hoping.
Here's how it works: I have Webpack set up to load Typescript files with
ts-loader
. I require all the test files dynamically inspec.bundle.js
. I have Webpack set towatch: true
, andsingleRun
as well asautoWatch
set tofalse
. I'm testing on Chrome and running karma from gulp. What happens is that Webpack, or maybe the Typescript loader, is compiling the files each time I change a tested file, but it's not compiling the changes I've made, instead emitting the error that I just fixed over and over again.I've tested this by making a very obvious typing error and undoing it while having my
gulp tdd
task running. If I start the task while the error is present, every change to the code (including removing the error) will emit a Typescript error message. If I start the task while the error isn't present, the reverse will happen: every file change triggers a compile that runs successfully.Does this issue seem familiar to anyone? I can't find anything about it on the web, which suggests that it's probably some stupid mistake I've made. Hopefully someone can offer some help :)
gulp task:
spec.bundle.js
:karma.conf.js
:The text was updated successfully, but these errors were encountered: