i'm use create-react-app create project, and after yarn eject, i change webpack.config.js 'entry' propetry, and paths 'module.exports={}', when i yarn start, i get the error 'Cannot read property 'indexOf' of undefined'. i don't know where is mistakes.
env: macos 14
node: v10.13.0
npm: v6.11.3
yarn: 1.15.2
react: v16.9.0
webpack.config.js:
entry: {
index: [
paths.appIndexJs,
isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient')
].filter(Boolean),
query: [
paths.appQueryJs,
isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient')
].filter(Boolean),
order: [
paths.appOrderJs,
isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient')
].filter(Boolean),
ticketPage: [
paths.appTicketPageJs,
isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient')
].filter(Boolean)
},
paths.js
module.exports = {
dotenv: resolveApp('.env'),
appPath: resolveApp('.'),
appBuild: resolveApp('build'),
appPublic: resolveApp('public'),
appHtml: resolveApp('public/index.html'),
// this is new
appQueryHtml: resolveApp('public/query.html'),
appOrderHtml: resolveApp('public/order.html'),
appticketPageHtml: resolveApp('public/ticketPage.html'),
appIndexJs: resolveModule(resolveApp, 'src/index/index'),
appQueryJs: resolveModule(resolveApp, 'src/query/index'),
appTicketPageJs: resolveModule(resolveApp, 'src/ticketPage/index'),
appOrderJs: resolveModule(resolveApp, 'src/order/index'),
// new over
appPackageJson: resolveApp('package.json'),
appSrc: resolveApp('src'),
appTsConfig: resolveApp('tsconfig.json'),
appJsConfig: resolveApp('jsconfig.json'),
yarnLockFile: resolveApp('yarn.lock'),
testsSetup: resolveModule(resolveApp, 'src/setupTests'),
proxySetup: resolveApp('src/setupProxy.js'),
appNodeModules: resolveApp('node_modules'),
publicUrl: getPublicUrl(resolveApp('package.json')),
servedPath: getServedPath(resolveApp('package.json')),
};
i expect running 'yarn start', the react project is ok!
project folder:
(source: labike.xyz)
error:
(source: labike.xyz)
i found the error in paths.js:
module.exports = {
...
appTicketPage: ...
}
i'm write error!
Related
Describe the bug
react-monaco-editor cannot be used together with worker-loader.
To Reproduce
create a new typescript app with CRA, run a min react-monaco-editor demo. (everything is fine)
install worker loader and add config in config-overrides.js, and start app.
example repo to reproduce
ERROR in ./node_modules/monaco-editor/esm/vs/editor/editor.worker.js
Module build failed (from ./node_modules/worker-loader/dist/cjs.js):
TypeError: Cannot read properties of undefined (reading 'replace')
at getDefaultChunkFilename (/Users//Documents/test/my-project/node_modules/worker-loader/dist/utils.js:23:24)
at Object.pitch (/Users//Documents/test/my-project/node_modules/worker-loader/dist/index.js:61:108)
Child vs/editor/editor compiled with 1 error
assets by status 1.27 KiB [cached] 1 asset
./node_modules/monaco-editor/esm/vs/language/json/json.worker.js 39 bytes [not cacheable] [built] [1 error]
ERROR in ./node_modules/monaco-editor/esm/vs/language/json/json.worker.js
Module build failed (from ./node_modules/worker-loader/dist/cjs.js):
TypeError: Cannot read properties of undefined (reading 'replace')
at getDefaultChunkFilename (/Users//Documents/test/my-project/node_modules/worker-loader/dist/utils.js:23:24)
at Object.pitch (/Users//Documents/test/my-project/node_modules/worker-loader/dist/index.js:61:108)
Child vs/language/json/jsonWorker compiled with 1 error
details of my config-overrides.js
const webpack = require('webpack');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = function override(config, env) {
config.plugins.push(
new MonacoWebpackPlugin({
languages: ['json']
})
);
config.stats = {
children: true
}
config.module.rules.push(
{
test: /\.worker\.js$/,
use: {
loader: 'worker-loader',
options: {
inline: 'fallback',
filename: '[contenthash].worker.js',
},
},
},
{
test: /\.worker\.ts$/,
use: [
{
loader: 'worker-loader',
options: {
inline: 'fallback',
filename: '[contenthash].worker.js',
},
},
'ts-loader',
],
},
);
return config;
};
Environment (please complete the following information):
OS: MacOS
Browser Chrome
Bundler webpack5 (CRA)
[ ] I will try to send a pull request to fix this issue.
I have solved it. It seems not to be a problem of react-monaco-editor or monaco-editor.
The problem is between worker-loader and monaco-editor-webpack-plugin.
I temporarily update my worker-loader config to match workers in my src folder only and solve this problem.
It could be better to figure out how to configure it in monaco-editor-webpack-plugin because it build files contains worker from monaco-editor without hashcode.
This is my babel file
My code:
import React, { useRef, useState } from 'react'
import { View, useWindowDimensions, Button } from 'react-native'
import Animated, { runOnUI } from 'react-native-reanimated';
export default function Login() {
const { width, height } = useWindowDimensions();
// const value = useSharedValue(0);
function someWorklet(greeting: any) {
'worklet';
console.log("Hey I'm running on the UI thread");
}
return (
<View style={{ flex: 1, justifyContent: 'flex-end', alignItems: 'center' }}>
<Button title="click me" onPress={() => runOnUI(someWorklet)('Howdy')} />
</View>
);
}
The package I installed is "react-native-reanimated": "^2.1.0"
I followed their installation process: React Native Reanimated instalation guide.
The error is:
Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?
I have found this issue on this link.
These are the steps that I have followed for having my project up and running without any errors:
Run yarn add react-native-reanimated#next react-native-gesture-handler
I have added import 'react-native-gesture-handler' to App.tsx file at the top of the file before importing any packages
You should update the babel.config.js file and add react-native-reanimated/plugin to plugins
module.exports = {
presets: ["module:metro-react-native-babel-preset"],
plugins: [
"react-native-reanimated/plugin",
],
};
The last thing you should do is run your project by removing the cache yarn start --reset-cache
Here is what worked for me in an Expo project.
This is my babel.config.js.
Note that react-native-reanimated/plugin must be at the last plugin in the plugins array of the babel.config.js.
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: [
[
"module-resolver",
{
extensions: [".tsx", ".ts", ".js", ".json"],
},
],
"react-native-reanimated/plugin",
],
};
};
Make sure you add react-native-reanimated/plugin as the last element of the plugins
Then stop the expo-server and run the following command:
expo r -c
It's all done.
Clearing the cache worked for me, run:
npx react-native start --reset-cache
If you are using Expo try to start your app with expo r -c in order to clear caches associated with your project.
Just add the below code in babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
// add the below line
plugins: ['react-native-reanimated/plugin'],
// this should be always last line
};
then if you need to clear the package manager cache and start it clean if you are using
yarn
yarn start --reset-cache
npx
npx react-native start --reset-cache
and it worked for me
I faced the same issue. The following command solved the issue:
npm install react-native-reanimated#~2.2.0
I also came around this problem while implementing the reanimated 2 package. For me it seems a half configured installation issue. I am using React Native CLI and Windows Machine.
This is what worked for me :
Delete the node_modules folder and run this just to be sure.
npx react-native start --reset-cache
Run
npm install
In babel.cofig.js add these lines. the Reanimated plugin has to be the last item in the plugins array.
//babel.config.js
module.exports = {
...
plugins: [
...
'react-native-reanimated/plugin', // << add
],
};
Turn on Hermes engine by editing android/app/build.gradle
project.ext.react = [
enableHermes: true
]
5.Plug Reanimated in MainApplication.java. This file is present in android/app/src/main/java/com/appname folder.
import com.facebook.react.bridge.JSIModulePackage; // << add
import com.swmansion.reanimated.ReanimatedJSIModulePackage; // << add
...
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
...
#Override
protected String getJSMainModuleName() {
return "index";
}
**#Override //<<add this function
protected JSIModulePackage getJSIModulePackage() {
return new ReanimatedJSIModulePackage();
}**
};
This is actually availaible in there installation docs.
https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation
I just add react-native-reanimated/plugin to babel.config.json in plugins array
module.exports = {
presets: [some thing],
plugins: [
"react-native-reanimated/plugin",
],
};
and after that expo start -c
and error solved no need do extra steps
Just adding "plugins: ['react-native-reanimated/plugin']", in my babel.config did the trick for me.
My babel.config.js file look like this now.
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: ['react-native-reanimated/plugin'],
};
then I fully cleaned my RN project by running these:
watchman watch-del-all
rm -rf yarn.lock package-lock.json node_modules
rm -rf android/app/build
rm ios/Pods ios/Podfile.lock
rm -rf ~/Library/Developer/Xcode/DerivedData
npm install && cd ios && pod update && cd ..
npm start -- --reset-cache
You should run one by one or one line command.
watchman watch-del-all && rm -rf yarn.lock package-lock.json node_modules && rm -rf android/app/build && rm ios/Pods ios/Podfile.lock && rm -rf ~/Library/Developer/Xcode/DerivedData && npm install && cd ios && pod update && cd ..
Hope this help to someone.
Delete node_modules and reinstall, and make sure to delete all caches and all previous settings -- RN caches, packager caches, simulator caches and settings, etc. It might even help to go to a previous version of your app when you hadn't tried to install version 2 at all.
I am using expo and following all these steps was helpful :- https://forums.expo.io/t/how-to-clear-the-expo-and-react-native-packager-caches-metro-watchman-haste/1352
Add this code in babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
env: {
production: {
plugins: [
],
},
},
plugins: [
[
'module-resolver',
{
extensions: ['.tsx', '.ts', '.js', '.json'],
},
],
'react-native-reanimated/plugin'
]
};
and then rebuild your application or run yarn start --reset-cache
follow these steps
expo install react-native-reanimated
After the installation completed, add the Babel plugin to babel.config.js:
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ['react-native-reanimated/plugin'],
};
};
expo start --clear
In my condition i will change my babel.config.js to different this
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: [
[
"module-resolver",
{
extensions: [".tsx", ".ts", ".js", ".json"],
},
],
"react-native-reanimated/plugin",
],
};
};
Don't Forget to type this command on your project directory
expo r -c
After you add the Babel plugin, restart your development server and clear the bundler cache: expo start --clear.
Note: If you load other Babel plugins, the Reanimated plugin has to be the last item in the plugins array.
I tried this on a freshly created expo project (tabs template). It generated the following default babel.config.js:
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo']
};
};
I added just one line, like this:
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ['react-native-reanimated/plugin']
};
};
and cleared the rebuild cache (yarn start -c).
This worked for me.
Sometimes you have done all setups but you are getting errors then just type this cmd:
npx react-native start --reset-cache
It will be helpful.
I had the same issue yesterday and when I did a Google search I landed here. After some digging here is what I understood:
Reanimated v2's latest version does not run in Expo when in debug mode. So I tried to open the developer options to turn off debugging by shaking the device but I was not able to.
Then I found that you can toggle to production mode once the Metro Bundler server connection is established. Once you toggle to production mode in Expo, the app works.
Enabling Production mode in Expo
You can try
yarn add react-native-reanimated#next
npx react-native start --reset-cache
Add Reanimated's babel plugin to your babel.config.js.
module.exports = {
presets: [
'module:metro-react-native-babel-preset',
'#babel/preset-typescript'
],
plugins: ['react-native-reanimated/plugin'],
};
It's worked for me. My babel.config was:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
env: {
production: {
plugins: [
'react-native-paper/babel',
'react-native-reanimated/plugin',
],
},
},
};
I changed to this:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
'react-native-paper/babel',
'react-native-reanimated/plugin',
]
};
And did all the instructions at https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation
If you are using expo, what worked for me is
expo doctor --fix-dependencies
install expo
expo install react-native-reanimated
add babel.config.js
plugins: ['react-native-reanimated/plugin']
start server
expo start --clear
I had to upgrade from 2.8.0 to 2.9.1 (the latest stable version). Also 3.0.0-rc worked too.
You can see the latest versions on the Versions tab here.
Change it in your package.json file:
"react-native-reanimated": "2.9.1",
And run yarn again to download the package.
We had a .babelrc and babel.config.json and only the config had our reanimated plugin so I consolidated them but that didn't fix the issue.
For "react-native-reanimated": "~2.12.0"
Step 1:
Add import 'react-native-gesture-handler' to App.ts file at the top of the file before importing any packages
Step 2:
Go to the babel.config.js and add plugins array:-
module.exports = function (api) {
api.cache(true);
return { '
presets: ["babel-preset-expo"],
plugins: ["react-native-reanimated/plugin"//must be in the end of plugins array],
};
};
Step 3:
Run npx expo -c
Resources:
*1.*https://reactnavigation.org/docs/drawer-navigator
2-https://www.reanimated2.com/docs/fundamentals/installation
3-https://stackoverflow.com/questions/67130651/reanimated-2-failed-to-create-a-worklet-maybe-you-forgot-to-add-reanimateds-ba/68694681#68694681
I have an odd problem as of late. When I run rollup -cw, Rollup bundles my app with Rollup v2.2.0. Everything's fine.
rollup v2.2.0
bundles ./src/index.html → build...
[Browsersync] Access URLs:
----------------------------------
Local: http://localhost:8000
External: http://10.0.0.13:8000
----------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
----------------------------------
[Browsersync] Serving files from: build
[Browsersync] Watching files...
(!) Circular dependencies
src/apollo/client.js -> src/apollo/resolvers/index.js -> src/apollo/resolvers/Query.js -> src/router/router.js -> src/apollo/auth.js -> src/apollo/client.js
node_modules/d3-selection/src/selection/index.js -> node_modules/d3-selection/src/selection/select.js -> node_modules/d3-selection/src/selection/index.js
node_modules/d3-selection/src/selection/index.js -> node_modules/d3-selection/src/selection/selectAll.js -> node_modules/d3-selection/src/selection/index.js
...and 17 more
(!) Generated an empty chunk
index
created build in 30.8s
[2020-03-26 23:42:30] waiting for changes...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers... (buffered 302 events)
But if I subsequently save a file, rollup will bundle the app with rollup v1.31.1
rollup v1.31.1
bundles ./src/index.html → build, build/nomodule...
bundles ./src/index.html → build, build/nomodule...
bundles ./src/index.html → build, build/nomodule...
bundles ./src/index.html → build...
[!] (plugin copy) Error: EEXIST: file already exists, mkdir 'build/assets/systemjs/dist'
Error: EEXIST: file already exists, mkdir 'build/assets/systemjs/dist'
[!] (plugin copy) Error: EEXIST: file already exists, mkdir 'build/assets/systemjs/dist'
Error: EEXIST: file already exists, mkdir 'build/assets/systemjs/dist'
[!] (plugin copy) Error: EEXIST: file already exists, mkdir 'build/assets/systemjs/dist'
Error: EEXIST: file already exists, mkdir 'build/assets/systemjs/dist'
[!] (plugin Rollup Core) Error: Could not load /path/to/the-app/node_modules/#material/mwc-fab/node_modules/#material/mwc-ripple/ripple-directive.js (imported by /path/to/the-app/node_modules/#material/mwc-fab/mwc-fab-base.js): ENOENT: no such file or directory, open '/path/to/the-app/node_modules/#material/mwc-fab/node_modules/#material/mwc-ripple/ripple-directive.js'
Error: Could not load /path/to/the-app/node_modules/#material/mwc-fab/node_modules/#material/mwc-ripple/ripple-directive.js (imported by /path/to/the-app/node_modules/#material/mwc-fab/mwc-fab-base.js): ENOENT: no such file or directory, open '/path/to/the-app/node_modules/#material/mwc-fab/node_modules/#material/mwc-ripple/ripple-directive.js'
(!) Circular dependencies
src/apollo/client.js -> src/apollo/resolvers/index.js -> src/apollo/resolvers/Query.js -> src/router/router.js -> src/apollo/auth.js -> src/apollo/client.js
node_modules/d3-selection/src/selection/index.js -> node_modules/d3-selection/src/selection/select.js -> node_modules/d3-selection/src/selection/index.js
node_modules/d3-selection/src/selection/index.js -> node_modules/d3-selection/src/selection/selectAll.js -> node_modules/d3-selection/src/selection/index.js
...and 17 more
(!) Generated an empty chunk
index
created build in 31s
[2020-03-26 23:44:09] waiting for changes...
[Browsersync] Reloading Browsers...
Note that this second build also builds the production version (nomodule)
I don't have rollup v1.31.1 installed in this repo
AFAICT I have no packages that require rollup v1.31.1
> npm ls rollup
the-app#0.1.0 /path/to/the-app
├─┬ #open-wc/demoing-storybook#1.13.8
│ └── rollup#1.32.1
├── UNMET PEER DEPENDENCY rollup#2.2.0
└─┬ rollup-plugin-workbox#5.0.1
└─┬ workbox-build#5.0.0
└── rollup#1.32.1
npm ERR! peer dep missing: rollup#^1.20.0, required by #rollup/plugin-alias#3.0.1
npm ERR! peer dep missing: rollup#^1.20.0, required by #rollup/plugin-beep#0.1.2
npm ERR! peer dep missing: rollup#^1.20.0, required by #rollup/plugin-commonjs#11.0.2
npm ERR! peer dep missing: rollup#^1.20.0, required by #rollup/plugin-json#4.0.2
npm ERR! peer dep missing: rollup#^1.20.0, required by #rollup/plugin-node-resolve#7.1.1
npm ERR! peer dep missing: rollup#^1.20.0, required by #rollup/plugin-replace#2.3.1
npm ERR! peer dep missing: rollup#^0.65.2 || ^1.0.0, required by rollup-plugin-minify-html-literals#1.2.3
npm ERR! peer dep missing: rollup#^1.4.1, required by rollup-plugin-notify#1.1.0
I don't have rollup installed globally, having run yarn global remove rollup and npm r -g rollup
Here's my rollup.config.js
import dotenv from 'dotenv';
import path from 'path';
import alias from '#rollup/plugin-alias';
import beep from '#rollup/plugin-beep';
import commonjs from '#rollup/plugin-commonjs';
import json from '#rollup/plugin-json';
import replace from '#rollup/plugin-replace';
import resolve from '#rollup/plugin-node-resolve';
import { generateSW } from 'rollup-plugin-workbox';
import { terser } from 'rollup-plugin-terser';
import babel from 'rollup-plugin-babel';
import browsersync from 'rollup-plugin-browsersync';
import copy from 'rollup-plugin-copy';
import graphql from '#kocal/rollup-plugin-graphql';
import html from '#open-wc/rollup-plugin-html';
import litcss from 'rollup-plugin-lit-css';
import minifyLitHtml from 'rollup-plugin-minify-html-literals';
import notify from 'rollup-plugin-notify';
import watchAssets from 'rollup-plugin-watch-assets';
dotenv.config();
const PROCESS_WATCHING =
!!(process.argv.some(arg => !!arg.match(/-c?w/)) || process.argv.includes('--watch'));
const production = !PROCESS_WATCHING && process.env.NODE_ENV === 'production';
const replaceConfig = {
...redacted
};
const targets = [
{ src: 'node_modules/systemjs/dist', dest: 'build/assets/systemjs' },
{ src: 'node_modules/#webcomponents', dest: 'build/assets' },
{ src: 'src/favicon.ico', dest: 'build' },
{ src: 'src/favicon.ico', dest: 'build' },
{ src: 'src/manifest.webmanifest', dest: 'build' },
{ src: 'src/assets', dest: 'build' },
{ src: 'src/components/shared.css', dest: 'build' },
{ src: 'src/index.html', dest: 'build' },
{ src: 'src/*.css', dest: 'build' },
];
const customResolver = resolve({
extensions: ['.js', '.json', '.html', '.graphql', '.css'],
dedupe: id => id.includes('lit'),
});
const entries = [{
find: /#(.*)\/(.*)\b/,
replacement: path.resolve(__dirname, 'src/$1/$2'),
}, {
find: /#(.*)\b/,
replacement: path.resolve(__dirname, 'src/$1'),
}];
const esmOutput = {
format: 'esm',
dir: 'build',
sourcemap: true,
};
const nomoduleOutput = {
format: 'system',
dir: 'build/nomodule',
sourcemap: true,
};
const productionOutput = [esmOutput, nomoduleOutput].map(output => ({
...output,
plugins: [
terser(),
minifyLitHtml(),
generateSW(require('./workbox-config.js')),
],
}));
export default {
input: './src/index.html',
output: production ? productionOutput : esmOutput,
watch: {
include: 'src/**',
clearScreen: false,
},
plugins: [
html({ minify: production }),
babel(),
graphql(),
json(),
litcss({ uglify: production }),
customResolver,
alias({ entries, customResolver }),
replace(replaceConfig),
commonjs({ sourceMap: false }),
copy({ targets, copyOnce: PROCESS_WATCHING }),
...PROCESS_WATCHING ? [
watchAssets({ assets: ['src/**/*.html', 'src/**/*.css'] }),
browsersync({
port: 8000,
server: 'build',
single: true,
watch: true,
watchOptions: {
awaitWriteFinish: {
ignoreInitial: true,
stabilityThreshold: 2000,
pollInterval: 100,
ignore: '/assets/**/*',
},
},
}),
] : [],
beep(),
notify(),
],
// Don't warn about `this` - typescript produces these.
onwarn(warning, warn) {
if (warning.code === 'THIS_IS_UNDEFINED') return;
warn(warning);
},
};
What I've Tried
I've tried downgrading to rollup 1.32
I've tried npm dedupe rollup
I've tried yarn global remove rollup
I've tried rm -rf node_modules ; rm package-lock.json ; npm i
I've tried commenting out these plugins:
watchAssets
browsersync
copy
beep
notify
html
I've tried adding this plugin:
{
name: 'sanity-check',
buildStart() {
if (production) console.log('HEY!!!! IT\'S PRODUCTION');
},
},
No logs appeared
No dice.
What is causing this double-build behaviour, and where is rollup 1.31.1 coming from?
Update
Grepping node_modules for 1.31.1 produced this result
$ rg "1\.31\.1" node_modules/#surma
node_modules/#surma/rollup-plugin-off-main-thread/package.json
55: "rollup": "1.31.1"
$ npx npm-why #surma/rollup-plugin-off-main-thread
npx: installed 4 in 1.141s
Who required #surma/rollup-plugin-off-main-thread:
my-pwa > rollup-plugin-workbox > workbox-build > #surma/rollup-plugin-off-main-thread#1.2.0
So perhaps this error is caused by #surma/rollup-plugin-off-main-thread's pinning rollup to a specific version.
What I don't understand is how that makes it possible for npm to reference two rollup bins
I am trying to setup Realm DB locally with my react native application but there seems to be an error that I cannot figure out a reason for. I have followed the documentation and the guide here.
My Code.
import Realm from 'realm';
export const ConfigSchema = {
name: 'Config',
primaryKey: 'key',
properties: {
key: 'string',
value: 'string'
}
};
export const databaseOptions = {
path: 'myappreactnative.realm',
schema: [ConfigSchema],
schemaVersion: 0
};
export const insertNewConfig = (newConfig) => new Promise((resolve, reject) => {
Realm.open(databaseOptions).then(realm => {
// realm.create('Config', newConfig);
// resolve(newConfig);
console.log(realm);
}).catch((error) => reject(error))
});
I'm calling insertNewConfig from here,
let config = {
key: 'instanceUrl',
value: 'myurl.domain.value'
};
insertNewConfig(config).then((result) => {
console.log(result);
}).catch((error) => {
console.log(error);
});
this.props.navigation.navigate('Login', {});
The error is there at the Realm.open(databaseOptions) line. First I though the error was with realm.create but later realized the original line.
The error showing is like this.
Error: _constructor must be of type 'function', got (undefined)
at sendRequest (rpc.js:263)
at Object.createRealm (rpc.js:62)
at new Realm (index.js:102)
at Function.open (extensions.js:110)
at eval (eval at <anonymous> (MetroClient.js:63), <anonymous>:29:22)
at tryCallTwo (core.js:45)
at doResolve (core.js:200)
at new Promise (core.js:66)
at insertNewConfig (eval at <anonymous> (MetroClient.js:63), <anonymous>:28:12)
at Object.SelectInstanceScreen._this.continueLogin [as onPress] (eval at <anonymous> (MetroClient.js:63), <anonymous>:74:37)
Seems that the open() function must be called as a function (_constructor must be of type 'function') but it is obvious that open() is called as a function.
Thanks in advance.
I think maybe is a bug on last release (2.18.0), try to downgrade to 2.16.0 it will works.
It is related from last version of realm(v2.18.0). You should downgrade to 2.16.0.
After that, you can run this code for reset all packages;
watchman watch-del-all && rm -rf $TMPDIR/react-native-packager-cache-* && rm -rf $TMPDIR/metro-bundler-cache-* && rm -rf node_modules/ && yarn cache clean && yarn install && yarn start -- --reset-cache
I have changed package.json changed
from "realm": "ˆ2.16.0",
to "realm": "2.16.0",
And then execute npm install or yarn
Solved it for me.
There are a few issues related to Node update and realm. Realm doesn't work with Node 10 and for your issue downgrading to 2.16 will resolve the issue.
It is working as well without debugger mode. But on debugger mode, I am getting error when try to create Realm object with schema parameters.
import Realm from 'realm';
class Todo extends Realm.Object {}
Todo.schema = {
name: 'Todo',
properties: {
done: {type: 'bool', default: false},
text: 'string',
},
};
class TodoList extends Realm.Object {}
TodoList.schema = {
name: 'TodoList',
properties: {
name: 'string',
creationDate: 'date',
items: {type: 'list', objectType: 'Todo'},
},
};
export default new Realm({schema: [Todo, TodoList]});
Realm JS SDK Version: 2.17.0
React Native: 0.57.1
constructor must be of type 'function', got (undefined)
This error only appears in version 2.18.0(latest) try downgrading to the version before 2.16.0
To downgrade the realm package
npm uninstall realm
npm install --save realm#2.16.0
It is related from 2.18.0 version of realm. You should downgrade to 2.16.0 or upgrade.
And dont forgot to check version number on package.json. It should be "realm": "2.16.0" not "realm": "ˆ2.16.0". I lost 1 day for that 😤
After that, run this code for reset all packages;
watchman watch-del-all && rm -rf $TMPDIR/react-native-packager-cache-* && rm -rf $TMPDIR/metro-bundler-cache-* && rm -rf node_modules/ && yarn cache clean && yarn install && yarn start -- --reset-cache