While using Vue.js 2.3.4 in development on Chrome 58.0.3029 I keep getting this error in developer tools console:
Failed to load resource: net::ERR_INCOMPLETE_CHUNKED_ENCODING
:8080/__webpack_hmr
Everything appears to be working OK, but after updating everything I still see this error and wondered if it's something I need to pay attention to.
Also, I want to clear out any unnecessary errors.
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
log: () => {},
heartbeat: 2000
})
Worked for me, and also this:
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
log: false,
heartbeat: 2000
})
and you must run again npm run dev command.
Thanks to #Jack Barham
Note: im using the PWA Template.
There's a pull request to fix this in the webpack template repo, but it hasn't been merged as of this writing.
I've implemented the fix from the PR in several projects and it seems to work fine.
In build/dev-server.js, add heartbeat: 2000 to the options object passed to require('webpack-dev-middleware') so it ends up looking like:
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
log: () => {},
heartbeat: 2000
})
Edit: it seems as though a newer identical PR was just accepted/merged.
Related
I'm using Sentry for error reporting on the React app that I created.
The problem with it is that I don't have an idea how to debug certain issues because I don't know what's the exact file the error occurred in:
I'm using Laravel mix for compiling. The webpack.mix.js looks like this:
mix
.react("resources/js/checkout/CheckoutRoot.js", "public/js")
.version();
I tried using sourceMaps() like so:
const productionSourceMaps = true;
mix
.react("resources/js/checkout/CheckoutRoot.js", "public/js")
.react("resources/js/checkout/DonationRoot.js", "public/js")
.version()
.sourceMaps(productionSourceMaps, "source-map")
But it doesn't seem to work. It appended this right below the file when viewing in Chrome dev tools:
//# sourceMappingURL=27.js.map?id=c4f9bf41f206bfad8600
But when I pretty print it still results in the same gibberish:
I'm expecting to see it point out to the component file I'm working on locally. Is that possible?
Update
I tried installing Sentry's webpack plugin:
const SentryWebpackPlugin = require("#sentry/webpack-plugin");
let config = {
output: {
publicPath: "/",
chunkFilename: "js/chunks/[name].js?id=[chunkhash]",
},
plugins: [
new SentryWebpackPlugin({
// sentry-cli configuration
authToken: "MY_AUTH_TOKEN",
org: "MY_ORG",
project: "MY_PROJECT",
release: "MY_RELEASE",
include: ".",
ignore: ["node_modules", "webpack.config.js"],
}),
],
};
Used the same release when initializing Sentry on my source file:
Sentry.init({
dsn: "MY_DSN",
release: "testing",
});
Put some failing code:
useEffect(() => {
console.bog("MY_RELEASE");
}, []);
Then compiled like usual:
npm run production
I triggered the error on the browser and I got the expected file in there (MobilePayment.js):
But from Sentry, all I get is this:
I would expect to find MobilePayment.js in there but there's none.
When compiling, I got this:
So I assume it uploaded the sources to Sentry.
I even tried the same thing using Sentry-cli:
sentry-cli releases files release upload-sourcemaps --ext js --ext map /path/to/public/js
And it pretty much did the same thing:
I then triggered the same error. But I still got the same output from Sentry dashboard. Please help.
I've run into this before.
IIRC the trick was finding the correct devtool WebPack option.
I can't remember exactly, but I think I used eval-cheap-module-source-map or eval-source-map.
I am trying to use fingerprintjs2 for the identification of devices. However, I am new to using Libraries and I get the error Uncaught ReferenceError: Fingerprint2 is not defined.
Here is my code:
<script src="https://github.com/Valve/fingerprintjs2"></script>
<script>
if (window.requestIdleCallback) {
requestIdleCallback(function () {
Fingerprint2.get(function (components) {
console.log(components) // an array of components: {key: ..., value: ...}
})
})
} else {
setTimeout(function () {
Fingerprint2.get(function (components) {
console.log(components) // an array of components: {key: ..., value: ...}
})
}, 500)
}
</script>
Can someone tell me why this is not working? I have done the yarn install to this.
Is this not the correct way to use javascript libraries?
Also, please tell me if there are any alternatives to remembering devices, however, there seems to be none as far as I have done some research.
Edit:
I am now thinking that it might be about CORS since it gives the warning: Cross-Origin Read Blocking (CORB) blocked cross-origin response https://cdnjs.com/libraries/fingerprintjs2 with MIME type text/html
I fixed this issue by downloading the file locally and setting the source of the script to that fingerprint2.js file
In my case, download all the github repository and install it locally in my plugins folder is working. After that, you can minify it again.
I'm working on migrating a Nuxt.js project from Nuxt#1.4 to 2.7, and after updating the Webpack config as required, etc. I'm now running into the following error.
When I try to access any of the pages on the website, I hit the stock Nuxt loading screen showing bundling progress, which then immediately refreshes ad infinitum. The application never progresses past this screen, and the tab title never changes from Nuxt.js: Loading app....
There are no errors in the console, nor any compile time errors, but when I go to the devtools Network tab, I see a failed (HTTP 500) request to localhost:3000, with the following error as response payload:
NuxtServerError
render function or template not defined in component: NuxtLoading
I looked into NuxtLoading, and the only reference to it I can find is a file in the .nuxt folder called nuxt-loading.vue, which looks like a regular functioning component. It has a render() method, which is implemented as follows:
render(h) {
let el = h(false)
if (this.show) {
el = h('div', {
staticClass: 'nuxt-progress',
class: {
'nuxt-progress-notransition': this.skipTimerCount > 0,
'nuxt-progress-failed': !this.canSucceed
},
style: {
'width': this.percent + '%',
'left': this.left
}
})
}
return el
}
What I've tried:
Reinstall node_modules;
rm -rf .nuxt && yarn dev (EDIT: and yarn.lock);
Upgrading element-ui to latest version.
Thanks in advance for any help. If any more info is needed, please ask.
You have a wrong configuration for i18n loader. It should be like this:
config.module.rules.push({
resourceQuery: /blockType=i18n/,
type: 'javascript/auto',
loader: '#kazupon/vue-i18n-loader'
});
Or you can use nuxt-i18n module, that will setup this for you using vueI18nLoader option.
I am learning to use Eletron and I found very useful this debugging tool: Devtron.
But it not works and I don't know if it is a bug or I am not using it correctly.
The installation guide from Devtron's website says:
# Install Devtron
$ npm install --save-dev devtron
// Run the following from the Console tab of your app's DevTools
require('devtron').install()
// You should now see a Devtron tab added to the DevTools
I did it correctly, and now I can see the Devtron tab on the Inspector panel:
But when I run my Quick Start by npm start application the graph does not show and I get following errors in the shell:
I looked for the faulty function in ./devtron/out/index.js
loadGraph () {
modules.getRenderModules().then((mainModule) => {
this.tableDescription.classList.add('hidden')
const suffix = this.getTabLabelSuffix(mainModule)
this.renderProcessTab.textContent = `Renderer Process ${suffix}`
this.renderRequireRows.innerHTML = ''
if (this.rootRenderView) this.rootRenderView.destroy()
this.rootRenderView = new ModuleView(mainModule, this.renderRequireRows)
this.rootRenderView.select()
}).catch((error) => {
console.error('Loading render modules failed')
console.error(error.stack || error)
})
But can't understand what wrong.
How to fix this problem?
I am currently using protractor, cucumber and chai/chai-as-promised for my automated tests. My current code is using protractor 1.8.0 and I would like to update it to the most recent version. The problem is that the most recent version of protractor doesn't support cucumber.
To use cucumber as your framework, protractor (http://angular.github.io/protractor/#/frameworks) points you to using protractor-cucumber-framework (https://github.com/mattfritz/protractor-cucumber-framework). I have tried integrating this with my current code and some smaller example projects with no luck at getting them working. The main error I get is:
Error: Step timed out after 5000 milliseconds at Timer.listOnTimeout
(timers.js:92:15)
I have tried changing the default timeout globally as cucumber suggests by:// features/support/env.js
var configure = function () {
this.setDefaultTimeout(60 * 1000);
};
module.exports = configure;
But I seem to be missing something with my setup.
So, does anyone know of a good example that can show me the proper setup for the new protractor/cucumber framework? If not, does anyone know of an example that shows how to change the default timeout globally?
You should add
this.setDefaultTimeout(60000);
to one of your step_def files. For example:
module.exports = function () {
this.setDefaultTimeout(60000);
this.After(function (callback) { ... }
}
Or you should add //features/support/env.js to
cucumberOpts:{require: ['//features/support/env.js']}
to array with your stepDefinition files
thx to #Ivan,
with cucumber-protractor-framework and typescript:
in protractor.conf.js
cucumberOpts: {
compiler: "ts:ts-node/register",
require: [
'./src/env.ts', //<- added
'./src/**/*.steps.ts'
]
},
in src/env.ts:
import {setDefaultTimeout} from 'cucumber';
setDefaultTimeout(9001);