title: How to fix no loaders are configured to process this file. See webpack.js web
body: <p>I currently facing a problem after i start npm run watch and use this path <code>src={require('../../../../storage/app/public/'+datas.file)}</code>, The error shows on my console are. the recommendation says that I need to go here in <a href="https://webpack.js.org/concepts#loaders" rel="nofollow noreferrer">https://webpack.js.org/concepts#loaders</a></p>
  
  <p><strong>Can i ask why this happen after i start the npm run watch?</strong></p>
  
  <pre><code>    WARNING in ./storage/app/public/oiM3JMg4xWttQ7oluBrGuUuenNWIIWNGCUacH509.docx 1:2
  Module parse failed: Unexpected character '╚' (1:2)
  You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
  (Source code omitted for this binary file)
   @ ./storage/app/public sync ^\.\/.*$ ./oiM3JMg4xWttQ7oluBrGuUuenNWIIWNGCUacH509.docx
   @ ./resources/js/components/UserSide/Home.js
   @ ./resources/js/components/App.js
   @ ./resources/js/app.js
   @ multi ./resources/js/app.js ./resources/sass/app.scss
  
  WARNING in ./storage/app/public/Deo-Joshua-Crystalynus-O.docx 1:2
  Module parse failed: Unexpected character '╚' (1:2)
  You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
  (Source code omitted for this binary file)
   @ ./storage/app/public sync ^\.\/.*$ ./Deo-Joshua-Crystalynus-O.docx
   @ ./resources/js/components/UserSide/Home.js
   @ ./resources/js/components/App.js
   @ ./resources/js/app.js
   @ multi ./resources/js/app.js ./resources/sass/app.scss
  
  WARNING in ./storage/app/public/5be3d06986720.docx 1:2
  Module parse failed: Unexpected character '╚' (1:2)
  You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
  (Source code omitted for this binary file)
   @ ./storage/app/public sync ^\.\/.*$ ./5be3d06986720.docx
   @ ./resources/js/components/UserSide/Home.js
   @ ./resources/js/components/App.js
   @ ./resources/js/app.js
   @ multi ./resources/js/app.js ./resources/sass/app.scss
  
  WARNING in ./storage/app/public/5be3d003d6ff6.docx 1:2
  Module parse failed: Unexpected character '╚' (1:2)
  You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
  (Source code omitted for this binary file)
   @ ./storage/app/public sync ^\.\/.*$ ./5be3d003d6ff6.docx
   @ ./resources/js/components/UserSide/Home.js
   @ ./resources/js/components/App.js
   @ ./resources/js/app.js
   @ multi ./resources/js/app.js ./resources/sass/app.scss
  
  WARNING in ./storage/app/public/5be288d563181.docx 1:2
  Module parse failed: Unexpected character '╚' (1:2)
  You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
  (Source code omitted for this binary file)
   @ ./storage/app/public sync ^\.\/.*$ ./5be288d563181.docx
   @ ./resources/js/components/UserSide/Home.js
   @ ./resources/js/components/App.js
   @ ./resources/js/app.js
   @ multi ./resources/js/app.js ./resources/sass/app.scss
  </code></pre>
  
  <p><strong>My Page that has a warning when I start running my run watch.</strong></p>
  
  <pre><code>import React, {Component} from 'react';
  import axios from 'axios';
  class Home extends Component {
  
      constructor(props) {
          super(props)
          this.state = {
              list_home_data:[],
              list_slider_data:[]
          }
      }
  
      componentDidMount() {
          axios.get('/api/get_index_content').then(response =&gt; {
              console.log(response);
              this.setState({
                  list_home_data:response.data[0].get_home_content,
                  list_slider_data:response.data[0].get_slider
              })
          }).catch(error =&gt; console.log(error));
  
  
      }
  
      renderStoreDirectory() {
          return this.state.list_home_data.map((datas) =&gt; {
             if(datas.content_section == 'Store') {
                 return (
                      &lt;div key={datas.content_id}&gt;
                          &lt;div className="row"&gt;
                              &lt;div className="col-md-6"&gt;
                                  &lt;img alt="example" src={require('./'+datas.file)}  style={{ width:'80%',height:'auto'}} /&gt;
                              &lt;/div&gt;
                              &lt;div className="col-md-2"&gt;&lt;/div&gt;
                              &lt;div className="col-md-4"&gt;
                                  &lt;h1&gt;{datas.content_title}&lt;/h1&gt;
                                  &lt;p dangerouslySetInnerHTML={{__html: datas.content}}&gt;&lt;/p&gt;
                                  &lt;a href={datas.link} className="btn btn-primary btn-lg"&gt;Visit Us&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt; 
                      &lt;/div&gt;
                 )
             }
         })
      }
  
      renderMission() {
          return this.state.list_home_data.map((datas) =&gt; {
              if(datas.content_section == 'Mission') {
                  return (
                      &lt;div key={datas.content_id}&gt;
                          &lt;h1&gt;{datas.content_title}&lt;/h1&gt;
                          &lt;p dangerouslySetInnerHTML={{__html: datas.content}}&gt;&lt;/p&gt;
                      &lt;/div&gt;
                  )
              }
          })
      }
  
      renderVision() {
          return this.state.list_home_data.map((datas) =&gt; {
              if(datas.content_section == 'Vision') {
                  return (
                      &lt;div key={datas.content_id}&gt;
                          &lt;h1&gt;{datas.content_title}&lt;/h1&gt;
                          &lt;p dangerouslySetInnerHTML={{__html: datas.content}}&gt;&lt;/p&gt;
                      &lt;/div&gt;
                  )
              }
          })
      }
  
      renderCareers() {
          return this.state.list_home_data.map((datas) =&gt; {
             if(datas.content_section == 'Career') {
                 return (
                      &lt;div key={datas.content_id}&gt;
                          &lt;div className="row"&gt;
                              &lt;div className="col-md-5"&gt;
                                  &lt;h1&gt;{datas.content_title}&lt;/h1&gt;
                                  &lt;p dangerouslySetInnerHTML={{__html: datas.content}}&gt;&lt;/p&gt;
                                  &lt;a href={datas.link} className="btn btn-primary btn-lg"&gt;See positions here&lt;/a&gt;
                              &lt;/div&gt;
                              &lt;div className="col-md-1"&gt;&lt;/div&gt;
                              &lt;div className="col-md-6"&gt;
                                  &lt;img alt="example" src={require(''+ datas.file)}  style={{ width:'80%',height:'auto'}} /&gt;
                              &lt;/div&gt;
                          &lt;/div&gt; 
                      &lt;/div&gt;
                 )
             }
         })
      }
  
      render() {
  
          return (
              &lt;div&gt; 
                  &lt;div className="carousel-wrapper"&gt;
                      &lt;div id="carouselExampleControls" className="carousel slide" data-ride="carousel"&gt;
                          &lt;div className="carousel-inner"&gt;
                              &lt;div className="carousel-item active"&gt;
                                  &lt;img alt="example" src={require('../../../../assets/1.jpg')} className="d-block w-100"/&gt;
                              &lt;/div&gt;
                              &lt;div className="carousel-item"&gt;
                                  &lt;img alt="example" src={require('../../../../assets/2.jpg')} className="d-block w-100"/&gt;
                              &lt;/div&gt;
                              &lt;div className="carousel-item"&gt;
                                  &lt;img alt="example" src={require('../../../../assets/3.jpg')} className="d-block w-100"/&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;a className="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"&gt;
                              &lt;span className="carousel-control-prev-icon" aria-hidden="true"&gt;&lt;/span&gt;
                              &lt;span className="sr-only"&gt;Previous&lt;/span&gt;
                          &lt;/a&gt;
                          &lt;a className="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"&gt;
                              &lt;span className="carousel-control-next-icon" aria-hidden="true"&gt;&lt;/span&gt;
                              &lt;span className="sr-only"&gt;Next&lt;/span&gt;
                          &lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
  
  
                  &lt;div className="store-directory-wrapper"&gt;
                      &lt;div className="container"&gt;
                          {this.renderStoreDirectory()}
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div className="mission-vision-wrapper"&gt;
                      &lt;div className="container"&gt;
                          &lt;div className="row"&gt;
                              &lt;div className="col-md-6"&gt;
                                  {this.renderMission()}
                              &lt;/div&gt;
                              &lt;div className="col-md-6"&gt;
                                  {this.renderVision()}
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;br/&gt;&lt;br/&gt;
                  &lt;div className="careers-wrapper"&gt;
                      &lt;div className="container"&gt;
                         &lt;div className="row"&gt;
                              {this.renderCareers()}
                         &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt; 
          );
      }
  }
  
  export default Home;
  </code></pre>
  
  <p>Thank you.</p>