Failed to compile module not found after attempting to import AppRegistry from "react-native"

Viewed 125
C:/Users/admin/node_modules/react-native-web/dist/exports/createElement/index.js
Module not found: Can't resolve 'react-dom/unstable-native-dependencies' in 'C:\Users\admin\node_modules\react-native-web\dist\exports\createElement

Error on yarn start

code block that works

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

code block that breaks

import App from './App';
import reportWebVitals from './reportWebVitals';
import { AppRegistry } from 'react-native'
AppRegistry.registerComponent("App",()=> App);
AppRegistry.runApplication("App", {
  initialProps: {},
  rootTag: document.getElementById("root")
})
reportWebVitals();

I'm trying to follow this tutorial from freecodecamp https://youtu.be/_CBYbEGvxYY?t=293 and I'm unsure where I went wrong

1 Answers

if you using typescript on react-native

please add tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react-native",
    "experimentalDecorators": true,
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true
  },
  "include": [
    "src/**/*.tsx",
    "src/typings/*.ts"
  ],
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}

following step

yarn add --dev typescript react-native-typescript-transformer @types/react @types/react-native
yarn tsc --init --pretty --jsx react-native
touch rn-cli.config.js

The rn-cli.config.js contains the settings for the React Native TypeScript Transformer. Open it and add the following:

module.exports = {
  getTransformModulePath() {
    return require.resolve("react-native-typescript-transformer");
  },
  getSourceExts() {
    return ["ts", "tsx"];
  }
};
Related