React Native : RelayQL: Unexpected invocation at runtime - react-native

I am getting the error:
RelayQL: Unexpected invocation at runtime. Either the Babel transform
was not set up, or it failed to identify this call site. Make sure it
is being used verbatim as Relay.QL
I have the following packages with versions:
"babel-preset-es2015": "^6.14.0",
"babel-relay-plugin": "^0.9.2",
"react-native": "^0.30.0",
"react-relay": "^0.9.2",
"babel-preset-react-native": "^1.9.0"
My babelrc looks like this:
{
"passPerPreset": true,
"presets": [
{
"plugins": [
"./schema/babel-myrelay-plugin.js"
]
},
"react-native",
"es2015"
]
}
My babel-myrelay-plugin.js looks like this:
// `babel-relay-plugin` returns a function for creating plugin instances
const getBabelRelayPlugin = require('babel-relay-plugin');
// load previously saved schema data (see "Schema JSON" below)
const schemaData = require('./schema.json');
// create a plugin instance
const plugin = getBabelRelayPlugin(schemaData.data);
module.exports = plugin
This was working earlier, till I renamed(mv) the main directory of the project. I did a rm -rf node_modules and re-installed. I performed a npm cache clean. I also cleaned the $TMPDIR.
But the error is persistent.
I am able to query/mutate using GraphiQL.
Any help appreciated.
PS: I have also researched the issues logged on relay. The solutions listed there didn't help.

Related

Getting: "ESLint: Unable to resolve path to module '#vercel/analytics/react'.(import/no-unresolved)" but package & path inside is actually present

As the title says, ESLint is complaining with this error message:
ESLint: Unable to resolve path to module '#vercel/analytics/react'.(import/no-unresolved)
In the line: import { Analytics } from '#vercel/analytics/react';
When following the instructions from this Vercel quickstart guide, using Next.js.
To sum up, the instructions are:
1- install package via NPM
npm install #vercel/analytics
2- in /pages/_app.tsx file, import it:
import { Analytics } from '#vercel/analytics/react';
function MyApp({ Component, pageProps }) {
return (
<>
<Component {...pageProps} />
<Analytics />
</>
);
}
export default MyApp;
My packages used:
"next": "^12.1.0",
"react": "17.0.2",
"#typescript-eslint/eslint-plugin": "^4.33.0",
"#typescript-eslint/parser": "^4.33.0",
"eslint": "^7.32.0",
"eslint-config-next": "^12.2.5",
"eslint-config-prettier": "^6.15.0",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-flowtype": "^5.10.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-jest": "^24.7.0",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.27.0",
"eslint-plugin-react-hooks": "^4.3.0",
"eslint-plugin-testing-library": "^3.10.2",
The NPM package installed, has this folder structure:
/node_modules/#vercel
analytics/
dist/
react/
index.cjs
index.d.ts
index.js
index.cjs
index.d.ts
index.js
package.json
tsconfig.json
...
Notice how the path in node_modules actually is '#vercel/analytics/dist/react' rather than just '#vercel/anaylitics/react' as the instructions state to do in the code to use it.
But, when CTRL+click'ing on the variable imported Analytics, my IDE properly navigates me to the definition in node_modules, to the file #vercel/analytics/dist/react/index.d.ts, which is defined like so:
// ./node_modules/#vercel/analytics/dist/react/index.d.ts
// ...
declare function Analytics(props: AnalyticsProps): JSX.Element;
export { Analytics };
My ESLint config related to the import/ module is
settings: {
'import/resolver': {
node: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
paths: ['src'],
},
},
},
If I import it as this instead:
import { Analytics } from '#vercel/analytics/dist/react'
then ESlint doesn't complain, but TSC does, with this error message:
TS2305: Module '"#vercel/analytics/dist/react"' has no exported member 'Analytics'.
Which also doesn't seem to make sense as the IDE is still finding the definition, and I can also see how the export { Analytics } line is there, so it should work...
What ESlint config or steps should I take differently to make this work without any lint/compiler errors?
When using eslint you will need to use the plugin: eslint-import-resolver-typescript with version 3.1.0 or later.
We also merged this version into eslint-config-next in this Pull Request. So this issue should also be resolved by upgrading to the latest package (13.0.4)
There is also a issue on our Github repo which with the solution: https://github.com/vercel/analytics/issues/18#issuecomment-1318424277
I have a question into vercel for a solution as I have the same issue. Probably to be expected since this is a beta product. I added the following line to my _app.js file in the meantime which allowed me to bypass the linting error and deploy to vercel. I have tested and the analytics is showing so must simply be a bug.
...
// eslint-disable-next-line import/no-unresolved
import { Analytics } from "#vercel/analytics/react";
...
Try this way
//tsconfig.json
"compilerOptions": {
"baseUrl": "./",
"paths": {
"#vercel/analytics/react": ["./node_modules/#vercel/analytics/dist/react"]
}
}

Not able to work with peer dependency in react native

I have one react-native app in which I am using "json-schema-rules" library. Now I have also created one library which is getting used in my react-native app like this "file:../custom_library" in package.json.
Now to resolve the version conflict, I decided to use "json-schema-rules" as a peer dependency in my custom library. So, the package.json is like this
Package.json of my react-native app:
{
"dependencies": {
"json-rules-engine": "^2.3.0",
"custom_library": "file:../custom_library"
}
}
package.json of my custom_library:{
"peerDependencies": {
"json-schema-rules": "^2.3.0"
}
}
Now the problem is, whenever I am using metro bundler, I get an error
error: bundling failed: Error: Unable to resolve module json-rules-engine
json-rules-engine could not be found within the project.
This is the case when I am using it in peerDependencies, I do not get any error if I use this library in dependencies.
Please help.
You can try to add an alias for the module in your project's babel config.
This means that when your custom packages tries to import "json-rules-engine" it will get served the version from the main app.
First install 'babel-plugin-module-resolver' then configure the alias in "module-resolver"
babel.config.js
const config = {
presets: ["module:metro-react-native-babel-preset"],
plugins: [
[
"module-resolver",
{
root: ["./src"],
extensions: [".js", ".jsx", ".ios.js", ".android.js"],
alias: {
"json-rules-engine": require.resolve("json-rules-engine")
}
}
]
]
};
module.exports = config;

Use stream-browserify with expo

stream cannot be used with expo, as it is a Node.js standard package. However, the package stream-browserify can be used as an alternative in those scenarios.
In order to make modules resolve this instead of the native Node package, I am trying to make babel-plugin-require-rewrite work with expo.
I am adding this to babel.config.js:
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
["rewrite-require", { aliases: {
"stream": "stream-browserify"
}}]
]
};
};
Unfortunately, it is not respected by the bundler. I get this error when trying:
The package at "node_modules\qr-image\lib\qr.js" attempted to import the Node standard library module "stream". It failed because React Native does not include the Node standard library. Read more at https://docs.expo.io/versions/latest/introduction/faq.html#can-i-use-nodejs-packages-with-expo
Is it possible to make this work in Expo?
You dont need to modify babel config to use stream-browserify in your source. You can import stream-browserify in your App.js. I have created a simple example on GitHub.
App.js
const Stream = require('stream-browserify');
Package.json
"dependencies": {
"buffer": "^5.2.1",
"events": "^3.0.0",
"stream-browserify": "^2.0.2",
"readable-stream": {
"version": "2.3.6",
"dependencies": {
"core-util-is": "github:mjmasn/core-util-is"
}
}
...
}
stream-browserify has dependency readable-stream which has its own dependency and use node environment. To resolve it you have to add these node packages. You can read about core-util-is fork here.
This answer rn-nodeify install that i have posted should work. Except Step 1 & Step 5 follow all steps. Step 3 is used for adding node packages you are specifically looking to install, in this case specify stream. Please do modifications in Step 4 based on your requirement in Step 3.
Please do comment if you want me to elaborate.
What ended up working for me was creating a metro.config.js file with the following content (I used readable-stream instead of stream-browserify, but I think either should work):
module.exports = {
resolver: {
extraNodeModules: {
stream: require.resolve('readable-stream'),
},
},
};
And then I just used yarn add readable-stream and this allows dependencies to use readable-stream as if it were stream.
This was based on the info I found here: https://gist.github.com/parshap/e3063d9bf6058041b34b26b7166fd6bd#file-node-modules-in-react-native-md

Gulp + Browserify + Jquery + Bootstrap

I'm trying to load jquery + jquery-ui + bootstrap inside my project throught NPM and gulp.
My configuration is this:
Package.json
"browser": {
"jquery": "/node_modules/jquery/dist/jquery.js",
"jquery-ui": "/node_modules/jquery-ui-browserify/jquery-ui.js"
},
"browserify-shim": {
"jquery": "$",
"jquery-ui": {
"exports": "jquery-ui",
"depends": [ "jquery:jQuery" ]
}
},
"browserify": {
"transform": [ "browserify-shim" ]
},
"dependencies": {
"bootstrap": "^3.3.6",
"jquery": "2.1.0",
"jquery-ui-browserify": "^1.11.0-pre-seelio",
}
gulpfile.js
gulp.task('browserify', function(){
return browserify([
'node_modules/jquery/dist/jquery.js',
'node_modules/jquery-ui-browserify/dist/jquery-ui.js',
'node_modules/bootstrap/dist/js/bootstrap.js',
])
.bundle()
.pipe(source('core.js'))
.pipe(buffer())
.pipe(gulp.dest('build/js'));
});
Then I load core.js with assetic from my index.php but I get this error:
Uncaught ReferenceError: jQuery is not defined
What am I doing wrong?
Thank you.
I don't know what you're trying to do there but keep in mind that what you should pass to the browserify instance is the entry point of your application, not your dependencies.
Then in your application you can use the require function to load those dependencies:
var $ = require('jquery');
While compiling browserify will autonomously do two things for you:
He will put into your bundle any library you required.
He will resolve your require statements by replacing them with a reference to the bundled copy of that library.
As long as the library is installed through npm you don't need any additional configuration. On the other hand if the library is situated in an unconventional location you'll need to tell browserify how to resolve it.
Anyway you can find more documentation on the repo's readme

Using the FileAPI library with browserify

The FileAPI library (https://github.com/mailru/FileAPI/issues/202) does not officially support CommonJS modules. I've tried using browserify-shim but I'm not able to make it work. After requireing fileapi I just get an empty object back. I've created a repo for reproduction here https://github.com/Prinzhorn/browserify-fileapi
Relevant package.json part
{
"dependencies": {
"fileapi": "2.0.15"
},
"devDependencies": {
"browserify": "11.1.0",
"browserify-shim": "3.8.10"
},
"browser": {
"fileapi": "./node_modules/fileapi/dist/FileAPI.html5.js"
},
"browserify-shim": {
"fileapi": "FileAPI"
}
}
If you want to try it locally:
git clone git#github.com:Prinzhorn/browserify-fileapi.git
npm install
npm run build
chromium-browser index.html
Check out the console in Chromium, you'll see an empty array from running console.log(Object.keys(require('fileapi'))). Note that there is a global window.FileAPI with the correct API.
Does anyone know if browserify-shim is able to shim FileAPI? Because I believe it does some exotic things to manage it's dependencies (the concatenated files expect certain globals).
You'll need to tell browserify to use browserify-shim as a transform in the package.json as outlined in this example
Mainly you're missing:
"browserify": {
"transform": [ "browserify-shim" ]
}