Closed raghur closed 4 years ago
data:
URLs were fixed a while back; if you are using 57 then they should be fine. However, there are various other source map bugs still ... is your app available somewhere so I could try it? I know nothing about vue, karma, ...
Repo - https://github.com/raghur/vue-testdrive
npm i
node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js
npm run test:debug
This will run unit tests with karma on the console. Now you can browse to http://localhost:9876 (karma web console). There's a debug button - if you hit that you get a blank page. Open dev tools and look at /base/test/index.js
which has a //# sourcemappingurl
. Same thing on Chrome provides sourcemapped files.I tried this, and indeed it doesn't work, but I also see errors while building the pack and errors from the server:
ERROR in ./~/bootstrap/dist/css/bootstrap.css
Module build failed: Error: A valid query string passed to parseQuery should begin with '?'
at Object.parseQuery (/home/tromey/firefox-git/Source-Maps/vue-testdrive/node_modules/loader-utils/lib/parseQuery.js:13:9)
at Object.module.exports (/home/tromey/firefox-git/Source-Maps/vue-testdrive/node_modules/css-loader/lib/loader.js:15:26)
@ dll vendor
ERROR in ./~/bootstrap/dist/css/bootstrap.css
Module build failed: ModuleBuildError: Module build failed: Error: A valid query string passed to parseQuery should begin with '?'
at Object.parseQuery (/home/tromey/firefox-git/Source-Maps/vue-testdrive/node_modules/loader-utils/lib/parseQuery.js:13:9)
at Object.module.exports (/home/tromey/firefox-git/Source-Maps/vue-testdrive/node_modules/css-loader/lib/loader.js:15:26)
at runLoaders (/home/tromey/firefox-git/Source-Maps/vue-testdrive/node_modules/webpack/lib/NormalModule.js:192:19)
at /home/tromey/firefox-git/Source-Maps/vue-testdrive/node_modules/loader-runner/lib/LoaderRunner.js:364:11
at /home/tromey/firefox-git/Source-Maps/vue-testdrive/node_modules/loader-runner/lib/LoaderRunner.js:230:18
at runSyncOrAsync (/home/tromey/firefox-git/Source-Maps/vue-testdrive/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
at iterateNormalLoaders (/home/tromey/firefox-git/Source-Maps/vue-testdrive/node_modules/loader-runner/lib/LoaderRunner.js:229:2)
at /home/tromey/firefox-git/Source-Maps/vue-testdrive/node_modules/loader-runner/lib/LoaderRunner.js:202:4
at /home/tromey/firefox-git/Source-Maps/vue-testdrive/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:62:14
at _combinedTickCallback (internal/process/next_tick.js:131:7)
at process._tickCallback (internal/process/next_tick.js:180:9)
Child extract-text-webpack-plugin:
ERROR in ./~/css-loader!./~/bootstrap/dist/css/bootstrap.css
Module build failed: Error: A valid query string passed to parseQuery should begin with '?'
at Object.parseQuery (/home/tromey/firefox-git/Source-Maps/vue-testdrive/node_modules/loader-utils/lib/parseQuery.js:13:9)
at Object.module.exports (/home/tromey/firefox-git/Source-Maps/vue-testdrive/node_modules/css-loader/lib/loader.js:15:26)
Then later
PhantomJS 2.1.1 (Linux 0.0.0) ERROR
Error: Module build failed: Error: A valid query string passed to parseQuery should begin with '?'
at Object.parseQuery (/home/tromey/firefox-git/Source-Maps/vue-testdrive/node_modules/loader-utils/lib/parseQuery.js:13:9)
at Object.module.exports (/home/tromey/firefox-git/Source-Maps/vue-testdrive/node_modules/css-loader/lib/loader.js:15:26)
at test/index.js:3885
11 09 2017 08:41:25.942:WARN [reporter]: SourceMap position not found for trace: undefined
Yes - that doesn't look right. I just double checked and it looks like my npm-shrinkwrap.json
was referring to a private feed which would have caused problems for you. Removed those and have pushed a commit. Also checked on a clean clone. Can you pull from the repo and try again?
I still get the webpack errors.
One thing that would be helpful is to know what file I should be able to see that I don't currently see.
Did you retry the npm -i
after pulling? Also clean out wwwroot/dist
before building vendor.js and/or running npm test:debug as well. I'm not quite sure why you're getting the errors - I've double checked on a clean env. Will try on my linux m/c tomorrow.
You should see a webpack built file at http://localhost:9876/base/test/index.js with the inline source map - this is served by Karma (in memory) and doesn't actually exist on the file system.
Yeah, I did re-run npm
but to be sure, just now I:
rm -rf node_modules
rm -rf rm -rf wwwroot/dist/
npm i
node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js
... and I see those same errors.
I do see base/text/index.js in the debugger. Which original sources should I be able to see?
You should see sources from ClientApp/**/*.vue
or ClientApp/**/*.ts
. (On chrome, works as intended)
BTW, I re-ran everything on my linux box and it works without errors (npm run test:debug will spew out some errors the first time but they're harmless). For reference, I have
node --version
v7.10.1
node node_modules/webpack/bin/webpack.js --version
2.7.0
I do see those files, but they appear to have been mangled by webpack. Like, the .vue files don't start with <template>
. The .ts files look reasonable though.
here's what I see in Chrome on browsing to http://localhost:9876 and then the Debug button
And here's firefox nightly
@raghur Any news on this? I've been having similar problems with source maps myself.
@SwagMuffinMcYoloPants - no nothing here though you'll have to ask @tromey. I have gone back to using Chrome for debugging and on to other stuff.
Sorry about the delay on this. I'm not actively working on source maps now and so I've also lost some state.
@raghur I think in your screenshot, if you go to the webpack://
part, you would see the original sources.
@SwagMuffinMcYoloPants what problems are you seeing; with what version of Firefox; and do you have a way to reproduce the problem?
@tromey I have an application that's using Spring Security and the Javascript files require authentication I just get an error saying that Firefox couldn't parse the source map because it's not valid JSON. I take the Javascript code and move it outside the Spring Security enforced web app and the source maps load. My only guess it that when it load the source maps, it's redirecting to the login page. I don't have time right now to make an example today but I'll see if I can get a Docker instance up and running.
the Javascript files require authentication
This sounds like a different bug - https://bugzilla.mozilla.org/show_bug.cgi?id=1404245
Thanks @tromey, i'll track that bug.
@raghur i just tried to reproduce and could not run npm run test:debug
we've fixed a bunch of sourcemap / vue bugs in the past year so i'm hopeful it will work...
➜ vuejs2-typescript-starter node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js
Hash: c1d4e8afb52d40031a6c
Version: webpack 3.12.0
Child
Hash: c1d4e8afb52d40031a6c
Time: 1759ms
Asset Size Chunks Chunk Names
89889688147bd7575d6327160d64e760.svg 109 kB [emitted]
vendor.js 674 kB 0 [emitted] [big] vendor
vendor.css 315 kB 0 [emitted] [big] vendor
vendor.js.map 852 kB 0 [emitted] vendor
vendor.css.map 87 bytes 0 [emitted] vendor
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/bootstrap/dist/css/bootstrap.css:
1 asset
➜ vuejs2-typescript-starter npm run test:debug
> netcore@0.0.0 test:debug /Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter
> node node_modules/karma/bin/karma start --no-single-run --debug --browsers PhantomJS
Is Debugging true
Is running tests: 1
Dev Build: true
Starting type checking service...
Using 1 worker with 2048MB memory limit
resolve failed: { Error: Cannot find module 'pn'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
at Function.requireRelative.resolve (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/require-relative/index.js:30:17)
at resolve (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:25:26)
at findAndRemove (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:67:11)
at /Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:108:13
at Array.map (<anonymous>)
at loadPreset (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:100:29)
at module.exports (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/index.js:88:19)
at Object.<anonymous> (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/babel-preset-es2015-mod/index.js:3:18)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:20:18) code: 'MODULE_NOT_FOUND' } pn
node_modules/nan
mootools already loaded
resolve failed: { Error: Cannot find module '@types'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
at Function.requireRelative.resolve (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/require-relative/index.js:30:17)
at resolve (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:25:26)
at findAndRemove (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:67:11)
at /Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:108:13
at Array.map (<anonymous>)
at loadPreset (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:100:29)
at module.exports (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/index.js:88:19)
at Object.<anonymous> (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/babel-preset-es2015-mod/index.js:3:18)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:20:18) code: 'MODULE_NOT_FOUND' } @types
resolve failed: { Error: Cannot find module 'caniuse-db'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
at Function.requireRelative.resolve (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/require-relative/index.js:30:17)
at resolve (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:25:26)
at findAndRemove (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:67:11)
at /Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:108:13
at Array.map (<anonymous>)
at loadPreset (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:100:29)
at module.exports (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/index.js:88:19)
at Object.<anonymous> (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/babel-preset-es2015-mod/index.js:3:18)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:20:18) code: 'MODULE_NOT_FOUND' } caniuse-db
resolve failed: { Error: Cannot find module 'babel-runtime'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
at Function.requireRelative.resolve (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/require-relative/index.js:30:17)
at resolve (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:25:26)
at findAndRemove (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:67:11)
at /Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:108:13
at Array.map (<anonymous>)
at loadPreset (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:100:29)
at module.exports (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/index.js:88:19)
at Object.<anonymous> (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/babel-preset-es2015-mod/index.js:3:18)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:20:18) code: 'MODULE_NOT_FOUND' } babel-runtime
resolve failed: { Error: Cannot find module '@vue'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
at Function.requireRelative.resolve (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/require-relative/index.js:30:17)
at resolve (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:25:26)
at findAndRemove (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:67:11)
at /Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:108:13
at Array.map (<anonymous>)
at loadPreset (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:100:29)
at module.exports (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/index.js:88:19)
at Object.<anonymous> (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/babel-preset-es2015-mod/index.js:3:18)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:20:18) code: 'MODULE_NOT_FOUND' } @vue
resolve failed: { Error: Cannot find module '@sinonjs'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
at Function.requireRelative.resolve (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/require-relative/index.js:30:17)
at resolve (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:25:26)
at findAndRemove (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:67:11)
at /Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:108:13
at Array.map (<anonymous>)
at loadPreset (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:100:29)
at module.exports (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/index.js:88:19)
at Object.<anonymous> (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/babel-preset-es2015-mod/index.js:3:18)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:20:18) code: 'MODULE_NOT_FOUND' } @sinonjs
(node:19039) [DEP0025] DeprecationWarning: sys is deprecated. Use util instead.
(node:19039) [DEP0027] DeprecationWarning: util.puts is deprecated. Use console.log instead.
(node:19039) [DEP0016] DeprecationWarning: 'GLOBAL' is deprecated, use 'global'
04 01 2019 12:11:22.132:ERROR [karma]: TypeError: Cannot read property 'length' of undefined
at NormalModuleFactory.resolveRequestArray (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/webpack/lib/NormalModuleFactory.js:249:12)
at /Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/moo-server/mootools.js:710:16
at /Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/async/dist/async.js:3880:24
at eachOfArrayLike (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/async/dist/async.js:1069:9)
at eachOf (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/async/dist/async.js:1117:5)
at _parallel (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/async/dist/async.js:3879:5)
at Object.parallelLimit [as parallel] (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/async/dist/async.js:3962:5)
at asyncLib.parallel (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/webpack/lib/NormalModuleFactory.js:188:14)
at /Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/async/dist/async.js:3888:9
at /Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/async/dist/async.js:473:16
at iteratorCallback (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/async/dist/async.js:1064:13)
at /Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/async/dist/async.js:969:16
at /Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/async/dist/async.js:3885:13
at resolvers.normal.resolve (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/webpack/lib/NormalModuleFactory.js:120:7)
at onResolve (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/enhanced-resolve/lib/Resolver.js:70:11)
at innerCallback (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/enhanced-resolve/lib/Resolver.js:143:22)
(node:19039) [DEP0079] DeprecationWarning: Custom inspection function on Objects via .inspect() is deprecated
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! netcore@0.0.0 test:debug: `node node_modules/karma/bin/karma start --no-single-run --debug --browsers PhantomJS`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the netcore@0.0.0 test:debug script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
We've fixed a bunch of sourcemap issues in the last few months, so I'm going to close this as likely fixed. It anyone wants to test, make sure to look at Nightly or Beta. If there are still any issues, please file on Bugzilla.
I'm developing an app in vue.js with Karma and webpack. While debugging in browser, the sourcemap is specified with a //# sourcemappingurl = and a data uri with the source map. This seems to work fine in Chrome but not in FF (57). I prefer to use FF but in this case am forced to use Chrome. I checked bugzilla and googled a bit but it's unclear if there's a reason why firefox doesn't support this.