CODEWITHSUNDEEP
javascripthtmlnode.jsreactjs
Nadim
Nadim

Reputation: 404

"Uncaught Error: Cannot find module 'react'" keeps showing

I really wonder why it keeps showing me this error message

Uncaught Error: Cannot find module 'react'

although I have tried every single solution that I have found on the posts below:

Uncaught Error: Cannot find module "react"

"[ts] Cannot find module 'react'" in spite of "npm install"

Uncaught Error: Cannot find module 'react'

Cannot find module 'react'

These are the scripts I have put in my relevant files:

welcome.blade.php:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Laravel</title>
   </head>
   <body>
      <div id="example"></div>
      <script src="js/app.js"></script>
   </body>
</html>

app.js:

require('./bootstrap');
require('./components/Example');

Example.js:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch, NavLink } from 'react-router-dom';
import Home from './Home';
import { Link } from 'react-router/lib/Link';

class Example extends Component{
    render(){
        return(
            <BrowserRouter>
              <div>
                <NavLink to="/home">Home</NavLink>
                <Switch>
                  <Route path="/home" component={Home}/>
                </Switch>
              </div>
            </BrowserRouter>
            
        )
    }
}

export default Example;

if(document.getElementById('example')){
    ReactDOM.render(<Example />, document.getElementById('example'));
}

Home.js:

import React, { Component } from 'react';

class Home extends Component{
    render(){
        return(
            <div>

            </div>
        )
    }
}

export default Home;

package.json:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@babel/preset-react": "^7.12.13",
        "axios": "^0.21.1",
        "laravel-mix": "^6.0.11",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.6",
        "sass-loader": "^8.0.2"
    },
    "dependencies": {
        "@types/react": "^17.0.1",
        "@types/react-dom": "^17.0.0",
        "react": "^17.0.1",
        "react-dom": "^17.0.1",
        "react-router": "^5.2.0",
        "react-router-dom": "^5.2.0"
    }
}

webpack.mix.js:

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

/* mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]); */
mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .react();

So, what is wrong in my code? Any idea?

P.S:

Upvotes: 2

Views: 1409

Answers (1)

joekevinrayan96
joekevinrayan96

Reputation: 634

This solved the issue for me.

Open up the terminal and type in

yarn add typescript --dev

if using npm type in

npm install typescript

Upvotes: 1

Related Questions