I'm using react native 0.54.0, trying to bundle a dependency which relies on some node core apis (net, fs, tls), but those are required only for part of functionality which is not gonna be used on the client. I've successfully bundled that dep for web client by specifying those node core modules as externals for webpack, making it omit them from bundling. Now I'm trying to do the same for metro bundler.
I'm trying to config rn-cli.config.js to handle that with getBlacklistRE:
const blacklist = require('metro/src/blacklist');
getBlacklistRE() {
return blacklist([
/^morgan$/,
/^superagent-proxy$/,
/^fs$/,
/^net$/,
/^tls$/
]);
but it doesn't seem to work, I still get bundling errors about being unable to locate those modules. What am I doing wrong? How can I make the metro bundler omit those?
Related
When i try to run react-native project via expo I get this error
E:/reacrNative23april/firestoreTester26April/node_modules/react-native/Libraries/StyleSheet/processColor.js
Module not found: Can't resolve '../Utilities/Platform' in 'E:\reacrNative23april\firestoreTester26April\node_modules\react-native\Libraries\StyleSheet'
This seems to be a common issue (as apparent through a google search), but appears to be unsolved.
There is some buzz on this link https://github.com/expo/web-examples/issues/73, but the solution is not clear.
Has anyone experienced and resolved this?
More data-
Mine is a bare workflow project, with some native modules, not sure if they can be the issue
I have tried deleteing the node_modules folder and running npm install, but no luck
There is no non-native (i.e. web) version of Utilities/Platform in react-native.
You can create a webpack.config.js (expo has a helper for this) and add an alias for the relative reference to Utilities/Platform used from within various rn libraries to the one provided by react-native-web:
const createExpoWebpackConfigAsync = require('#expo/webpack-config');
module.exports = async function (env, argv) {
const config = await createExpoWebpackConfigAsync(env, argv);
// Customize the config before returning it.
// Resolve relative reference ../Utilities/Platform using react-native-web
config.resolve.alias['../Utilities/Platform'] = 'react-native-web/dist/exports/Platform';
return config;
};
If I run yarn test, which runs jest, I get the following error:
C:\react-native-project\node_modules\react-native\Libraries\Utilities\warnOnce.js:15
const warnedKeys: {[string]: boolean} = {};
But that only happens if I follow the directions of the react-native-testing-library:
Then automatically to add it to your jest tests by using setupFilesAfterEnv option in the
jest.config.js file:
If I remove the file I will not get that error and I can get simple tests to run. When I remove the file, the test runs but AsyncStorage is not recognized so the tests still don't run. I have AsyncStorage. It's installed and the app works, but I want to add component tests. I also noticed the file, jest.config.js, is conspicuously missing from the testing project itself. Is there any documentation or working example? I would rather not do a diff of my project and the testing project. Is there a more well-documented or reliable testing framework/module available?
I'm able to get working tests by following the documentation of the React Native Testing Library with the npm package name of #testing-library/react-native not to be confused with the React Native Testing Library with the npm package name of react-native-testing-library. Both packages allow testing components and are recommended by React-Native documentation but this one works when following the instructions. It also has instructions "to define a custom render method that includes things like global context providers, data stores, etc" so that testing components with AsyncStorage and such shouldn't be a problem.
I need a solution to load/unload styles in my Aurelia app. This is because I have a special main.css for my 'public' root app and another admin.css for my 'private' (admin) root app. (Yes, 2 roots in my app). These css are not compatible one with each other.
I found a plugin named aurelia-useable-style-loader. I try to integrate it in my Aurelia application as explained in the readme. At runtime, I can see [aurelia-useable-style-loader] begin configure and
[aurelia-useable-style-loader] end configure in my console but css files are not loaded/unloaded. So something go wrong and I don't know what.
One thing I pointed is that my Aurelia app is based on the Aurelia CLI / Typescript / SystemJS as bundler. While the plugin is based on Webpack. Maybe the 2 are not compatible ?
Steps I did:
npm install aurelia-useable-style-loader
then use the plugin in main.ts:
aurelia.use.plugin('aurelia-useable-style-loader');
then added one reference in my aurelia.json:
"aurelia-useable-style-loader",
Tha's all. At runtime, no particular errors, but css are not loaded/unloaded.
Any help is greatly appreciated.
PS: as a workaround, I proceed differently (see below) but I'm curious to do it with the plugin aurelia-useable-style-loader
this.masterStyleSheetLoaded = true;
this.httpClient.fetch('./src/css/main.css')
.then((data) => data.text())
.then((styles) => {
DOM.injectStyles(styles, null, null, 'masterStylesheet');
this.masterStyleSheetLoaded = true;
});
I would like to generate my own module IDs when bundling React Native code with the Metro bundler, so that I can bundle a base Javascript bundle, and multiple application-specific bundles that reference it later.
The Metro bundler automatically generates numeric IDs for each module that are referenced by code that depends on them in the bundle.
The Metro Bundle constructor appears to use a fixed ID factory:
this._getModuleId = createModuleIdFactory();
Is it possible to substitute the ID factory used by metro.runBuild(opts) without modifying the Metro bundler source code?
My pull request the React Native Metro bundler was imported, which allows setting a custom ID factory
https://github.com/facebook/metro/pull/100
Example of usage (see https://github.com/doubledutch/cli/blob/master/packager.js#L29 for details)
await metro.runBuild({
config: {
createModuleIdFactory() {
return (path) => /* some ID */
},
...
}
})
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