How to disable sourcemaps in Preact production build? - source-maps

I haven't use preact before. tried a working method with react. seems it's not working with preact.

The correct way to do this w/ Preact-CLI is to create (or edit) your preact.config.js like the following:
// preact.config.js
export default (config, env, helpers) => {
if (env.isProd) {
config.devtool = false;
}
}
We suggest this config (and others) in our config wiki, which you may want to take a look at: https://github.com/preactjs/preact-cli/wiki/Config-Recipes#disabling-source-maps-using-plugin-helpers

Related

All specs disappear in Cypress after experimentalSessionAndOrigin is implemented

I'm very new to Cypress. I am having a roadblock and don't seem to be able to proceed. I have a few specs written but I'm having trouble having Cypress retain the cookies and not clear them before each test. I've read about cy.session(), it's all pretty confusing lol but it seems that, in order for me to use cy.session(), I first have to implement this script: 
e2e: { experimentalSessionAndOrigin: true, },
But, as soon, as I add that to cypress.config.js, a new file, e2e.js, is created in support folder and, when I launch Cypress, it treats it as a new project, none of the existing specs are showing up. What am I doing wrong?
It may happen if you upgrade from Cypress v9 to v10. There's a wizard that creates a few things for you to ease the migration.
In any case, with default settings in Cypress 10
specs should be in the /cypress/e2e/ folder
specs should have the extension .cy.js
This section of the config docs shows how you can modify the pattern, for example to use v9 settings
const { defineConfig } = require('cypress')
module.exports = defineConfig({
e2e: {
// revert to v9 configuration pattern
specPattern: 'cypress/integration/**/*.spec.{js,jsx,ts,tsx}'
}
})

setRepresentedFilename for electron app not working

I'm trying to use the setRepresentedFilename option for my app's browserwindow, but it doesn't seem to do anything.
I don't get errors, and any path (resolved or hard-coded) does not change the titlebar to the file's name.
app.on('open-file', function(ev, path) {
win.setRepresentedFilename( path );
});
The app is packaged for Mac, so unless macOS versions is involved in some way, I'm not sure why it's not working.
Am I missing something here? The docs for this is not in-depth and provides only a basic example that apparently 'works'.
Seems it was an order of operations problem, the set command should be executed when the app has finished loading. For example:
win.webContents.on('did-finish-load', function() {
win.setRepresentedFilename( filePath );
});
The above should work. You'll have to handle it such that you have the url to pass. You can use ipcMain and such.

How do I keep the packager from trying to include a file that doesn't exist?

I am trying to use socket.io-client in my React app and am running into an odd problem. Deep inside engine.io (required by socket.io-client) there is a file called websocket.js with the following bit of code:
if (typeof window === 'undefined') {
try {
NodeWebSocket = require('ws');
} catch (e) { }
}
Since window is not undefined, you might think that this code does nothing, but you’d be wrong.
My packager (the standard React Native packager, so far as I know) goes through all the Javascript files and looks for all the import and require commands, and packages up the files they refer to.
The ws module contains a file called WebSocket.js, which intended for Node.js and makes use of Node.js modules like url.js and http.js, which of course do not exist in React, so the attempt at packaging fails.
Deleting those five lines fixed the problem and everything worked, but there must be a better way. Can I tell the packager to exclude certain modules?
I wasn't able to reproduce your problem, but you can try to blacklist the ws package.
How to blacklist specific node_modules of my package's dependencies in react-native's packager?
You can try the below code :
if (typeof window === 'undefined') {
try {
var wsNode = 'ws' // store node module name in a string
NodeWebSocket = require(wsNode); // dynamic require will exclude the node module to get bundled in react-native
} catch (e) { }
}
I haven't solve my problem as posed, but I figured out what was going on, why I was having difficulties other users were not.
In the file node_modules/engine.io-client/package.json was the following entry:
"browser": {
"ws": false,
"xmlhttprequest-ssl": "./lib/xmlhttprequest.js"
},
My venerable version of the React packager did not understand the "false" to mean "skip including ws [WebSockets] when you are building for the client side". Upgrading the packager made the problem go away.

Vuejs 2 + laravel elixir + lodash Uncaught ReferenceError: _ is not defined

I'm using the tools specified in the title. I import lodash in my bootstrap.js
window._ = require('lodash');
However, when I try to use something like this (similar example to here), I get the error discribed in the title
created() {
this.test();
},
methods: {
test: _.debounce(function () {
console.log('calculating', true);
setTimeout(function () {
console.log('calculating', false);
}.bind(this), 1000)
}, 500),
}
However, if I remove the window._ = require('lodash'); and insert lodash manually in the page it works fine, like
<script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.js"></script>
What I'm missing?
Also, What is the advantage of importing the libraries by require instead of using Gulp to merge and uglyfy everything?
I am not sure why you are getting that error related to _.
On your other question, I can think following advantage of using require over gulp or any other build tool:
All build tools comes with their own set of dependencies and other accessories, which bloats your overall code size.
You may start to rely on their plugins and time can come, when you need to use grunt for one task, while for other tasks you are using grunt, quting from gulp-grunt
What if your favorite grunt plugin isn't available for gulp yet? Don't fret, there is nothing to worry about! Why don't you just hook in your grunt configuration?
You will have to manage updating of different plugins of gulp and make sure all are working with new updated versions.
These are some of the things I have experienced or read about, but these tools do remove the pain of building, hot-reloading, compressing or obfuscating your code, but definetely there can be other raw way to do these, as what these are doing is providing you an abstraction.

Parse.Config does not work on Parse Server?

I can't seem to find anything official about this: Does Parse.Config work on Parse Server? It used to work on Parse.com but when I try to migrate to Parse.Server, when trying the REST API it seem to fail:
GET http://localhost:1337/parse/config
Passing in my app ID. I read somewhere Config does not work on Parse Server, but wanted to confirm
Although is not officially supported as mentioned on the docs,there is a way to make it work. It is still an experimental implementation though.
As mentioned here & here, you should set the environment variable:
PARSE_EXPERIMENTAL_CONFIG_ENABLED=1
Then restart your node server. In case you deployed it on heroku for example you should on cli heroku restart -a <APP_NAME>
If that doesn't work I would suggest to simply add your route with your configuration options on your project's index.js file where express is initialized like so.
var parseConfig = {
"params": { /*...put your options here*/ }
};
// :one? is for old SDK compatibility while is optional parameter.
app.all('/parse/:one?/config', function (req, res) {
res.json(parseConfig);
});

Resources