Recently I ran into a problem that it seems no one know how to solve.
I want to run async code (#1) when I ...
start dev ( i.e. npm run dev or npm run serve )
before compiling
That means, the async code can only run once!
And I can't use the feature of of "Service Plugin" (#2) in Vue Cli to do that.
Because it's async, I even can't use any webpack hook list here (#3)
BUT!
I knew that can be achieved by using Vite (#4)
I just out of idea how to do that in Vue CLI (after spent tons of hours)
Any expert have an idea?
Note
#1 This should be not important at all, because it's an implementation details, but I'll just leave it here: The async task for me is starting a local websocket server.
#2 Because you can write down async code in Service Plugin, for more info, check this
#3 You might see a webpack compiler hook called beforeRun can support async, but sorry, that also doesn't work for me.
#4 As shown here, you can see there's a method called configResolved, which can let you do async task, and achieve what I want as I described in this post. I'm not considering to choose Vite for just solving this problem, because this would be too overkill.
Related
first off apologies if I've forgotten to include anything, new here! I am having a pretty odd issue using react-native-windows version 0.63.0-0 with react-native version 0.63.2. The problem is that network calls made from my windows laptop appear as if they are not attempting to execute... period. They fail instantaneously and simply return a TypeError.
TypeError: Network request failed
This happens to me on a completely fresh init of RN/RNW, and I've tested with a couple http libraries and variations of calls, such as swapping in axios for fetch all using the same then and catch logic (excluded on some examples below for brevity's sake). I have tried and failed to reach several different domains. The API I'm attempting to reach is available (tested successfully with postman). Other standard React-Native projects work just fine from my laptop. I've cleared metro, run --reset-cache, removed tmp, reinstalled node-modules, everything standard you're supposed to try to troubleshoot like that.
fetch('https://subdomain.domain.com/<api-path>', { // my example then & catch
method: "GET",
headers: { "Content-Type": "application/json" }
})
.then(response => response.json())
.then(responseData => console.log(responseData))
.catch(error => console.log(error));
fetch('https://subdomain.domain.com/<api-path>'); // without headers this time, used same then & catch block
axios.get('https://subdomain.domain.com/<api-path>'); // again used same then & catch
// ... and so on, triggering the catch block instantly, as if it fails without trying
I do also see the following error in my debugger console, even though I can see the debuggerWorker from within my 'chrome dev tools -> sources -> page' panel which from what I understand, the error just has to do with chrome not handling source maps correctly, feel free to correct me there. However I'm unsure whether they are even related or if this one is just a fluke:
Error: Unable to resolve module `./debugger-ui/debuggerWorker.cff11639.js` from ``: ./debugger-ui/debuggerWorker.cff11639.js could not be found within the project.
If you are sure the module exists, try these steps:
1. Clear watchman watches: watchman watch-del-all
2. Delete node_modules: rm -rf node_modules and run yarn install
3. Reset Metro's cache: yarn start --reset-cache
4. Remove the cache: rm -rf /tmp/metro-*
at ModuleResolver.resolveDependency (C:\Users\...\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:186:15)
at ResolutionRequest.resolveDependency (C:\Users\...\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:52:18)
at DependencyGraph.resolveDependency (C:\Users\...\node_modules\metro\src\node-haste\DependencyGraph.js:287:16)
at C:\Users\...\node_modules\metro\src\lib\transformHelpers.js:267:42
at Server.<anonymous> (C:\Users\...\node_modules\metro\src\Server.js:841:41)
at Generator.next (<anonymous>)
at asyncGeneratorStep (C:\Users\...\node_modules\metro\src\Server.js:99:24)
at _next (C:\Users\...\node_modules\metro\src\Server.js:119:9)
Generally I'll run npx react-native run-windows (or npx react-native start --reset-cache separately first) to execute the project, but debugging from VS Code's debug pane, as well as running from Visual Studio produce the same errors.
Is there something I am missing with my react native windows setup? I have followed the windows setup step by step several times and even simply adding an http request to execute from their default app instantly fails... This has blocked me for a while and it really feels like an environment setup issue, but I'm not sure what else I would check in Visual Studio/my configs in order to resolve this.
After some more continuously banging my head against this issue, I continued to dig a little further into Visual Studio's side. I went file by file looking for anything remotely related to what might be blocking this functionality. As I expected, it was an unfortunately simple solution to something that caused me a significant headache since I wasn't aware of it and could not find it anywhere else, so let this be a lesson to those after me who have network problems with React-Native-Windows:
Whenever you are beginning - or picking up - a RNW project that uses the network to send or retrieve information, make sure that you have first gone into Visual Studio (not VScode) and enabled the "Private Networks (Client & Server)" option. You can find this if you open your project in Visual Studio, and it's under
Project Solution -> 'Package.appxmanifest' file -> 'Capabilities' section
This should hopefully cause your network requests to succeed as you would expect from now on.
I have a .js file inside an electron app that uses the quasar framework.
inside this file i have axios to make requests to my api to pull data
once i get the response i use the data for further processing. However i need some string functions to escape some strings and when i try .replace it just fails.
var t = JSON.parse(JSON.stringify(someObj))
console.log(t.message.replace(/"/g, '\\"');)
the app just fails to build and tells me there is some error in x line. if i use console.log(t.message) i see that it print the text in the terminal console, so i know the value is not null.
Also when i hover my mouse over the variable it tells me (any) not sure what this means.
image:
P.S: this is my first time working this tech stack.
turned out there was a configuration issue with babel inside electron that was using quasar framework, it didn't not accept commonjs as module and hence no vanilla javascript would work.
Just had this issue myself, I know you've answered your own question but if you can use nodejs you can install replace-string from npm and use it
command: npm install replace-string
link:
https://www.npmjs.com/package/replace-string
This issue has literally caused me a morning of work - but hope someone finds this post and fixes this issue quicker!
I've googled many sites but cannot found a tutorial that actually works for react-native + flow type.
There was flow installation guide from react-native#0.22 document, but it's gone in react-native#0.46.
However, it comes up again in Running Tests and Contributing, I tested to run npm run flow but not working, and yet it doesn't say how to make it works. It's possibly been a missing part inside of react-native documentation.
What I need is to run flow correctly with react-native. Auto-check flow every time I reload the page with ⌘R would be the best.
I just finished covering half of our project by flow and we use RN 0.44.0.
The tricky part is: do you also want to know errors inside node_modules, someone says those errors are helpful.
Anyway, I disable the error in node_modules, and here is my .flowconfig:
[ignore]
<PROJECT_ROOT>/node_modules/.*
<PROJECT_ROOT>/flowLibs.js
.....
[include]
[libs]
./flowLibs.js
.....
[lints]
[options]
You should install flow first if you not setup correctly,
npm install --save-dev flow-bin
and also run this in you project root after install:
npm run flow init
If npm run flow init does not work, just add "flow": "flow" in npm scripts.
After init, put my .flowconfig in your project .flowconfig file.
Then create a js file flowLibs.js and if npm run flow check cause your any error like Module_Name. Required module not found
Write down code in flowLibs.js:
declare module 'Module_Name' { declare var exports: any; };
After that, you should be good to go with you project now.
BTW, don't forget add //#flow on the top of the file which you want to check type.
I found flowtype is built in with react-native#0.46+.
For react-native document, I think they should at least tell flowtype is already built in. And for the rest document ex: Testing Your Changes#flow, it won't work without flow-bin, they should mention that too.
To make flowtype of best use, I use it with Visual Studio Code.
Steps:
Install flow-bin globally, by npm i flow-bin -g.
Make sure your terminal is responsive to command flow.
Install vscode flow extension.
Set vscode workspace preference with "javascript.validate.enable": false, to disable default javascript validation, so flow validation can take place.
To access vscode preference, ALT+F,P,S for windows, ⌘+, for mac.
then you have flowtype installed with visual result with every key stroke:
Try this one:
Adding Flow to React Native
https://medium.com/react-native-training/getting-started-with-react-native-and-flow-d40f55746809
Hope this helps!
After bundling a simple aurelia application with jspm bundle-sfx I get the following error:
No PLATFORM.Loader is defined and there is neither a System API (ES6) or a Require API (AMD) globally available to load your app.
An example application: https://github.com/Baudin999/jspm-bundling-test
You can use: npm run setup:dev in a non windows env to switch back to the dev settings (which is just a comment/uncomment in the ./src/client/index.html) and you can use npm run setup:prod to switch back to the production environment, bundling will automatically be triggered. all other scripts can be found in the package.json.
I can't link to other questions because I haven't found any questions which relate to this problem. I "think" (which means absolutely nothing) that this might be related to the fact that aurelia needs a full loader even when bundling with bundle-sfx but I haven't found any ways to solve the error.
EDIT (25/01/2017 17:16): I've found out that the error is because I import the aurelia-bootstrapper.
As soon as I add: import * as bootstrapper from 'aurelia-bootstrapper'; I get the error
Please add the code how do you bootstrap your aurelia app.
There is nothing actually to import from bootstrapper apart from bootstrap function.
Which you would use in case of custom manual bootstrapping.
like in
import { bootstrap } from 'aurelia-bootstrapper'
const configure: (au: Aurelia) => {} = async function (au: Aurelia) {
au.use
.standardConfiguration();
await au.start()
au.setRoot() // or au.enchance()
})
bootstrap(configure)
in a happy path scenario with jspm - you System.import('aurelia-bootstrapper')
and it takes over finding the root node of your app and the script to configure Aurelia (main by default)
Have a look at Bootstrapping Aurelia in the docs
Oh.. and bundle-sfx is not supported there are other means to bundle aurelia apps using jspm
I’m writing tests for an Ember.js application with Mocha. I use the ember-mocha-adapter from Teddy Zeenny.
As soon as a promise is involved, the tests fail randomly. I usually get this error:
Error: Assertion Failed: You cannot defer readiness since the `ready()` hook has already been called.
Here is a JS Bin testcase. It contains 10 times the same test and usually fails (tested with Firefox and Chromium).
The same tests run fine with QUnit (maybe by chance :)) (JS Bin testcase). How can I make this work with Mocha? I tried wrapping the promise in an Ember.run() call, but it doesn’t solve the problem.
There is another question about the same problem, but the corrected JS Bin proposed by Teddy Zeenny also fails for me.
There are 3 problems with the code:
It should not call mocha.setup(), as is now explained in the README.
The function calls to setup Ember.js for testing should happen outside any Mocha callback, not in before().
mocha.run() should be called like this:
Ember.$(function() {
mocha.run();
});
Here is the fixed JS Bin testcase.
Teddy Zeenny found the solution to this problem in teddyzeenny/ember-mocha-adapter#18.
Really the only reason the qunit is working and mocha isn't is because you're running reset before each test vs after each test.
http://emberjs.jsbin.com/nusewoqi/4/edit