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 versionsrelevant 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. |
joshwiens
added
status: Needs repro
status: Needs triage
and removed
awaiting response
labels
|
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, andsingleRunas well asautoWatchset 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 tddtask 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: