title: Uncaught SyntaxError: Cannot use import statement outside a module in node js
body: <p>while using the ES6 module language in nodejs it gives me an error of
  &quot; IMPORTS CANNOT BE USED OUTSIDE THE MODULE&quot; ERROR IN CHROME BROWSER.</p>
  <p>I am trying to build my project using Node js express mongoose morgan express-handlebars and ES6</p>
  <p>but while I run the project it gives me an error for the same</p>
  <p>I tried using .babelrc and webpack.config.js but not able to resolve it.
  can anyone help me to achieve it?</p>
  <p>I am putting images of my project for your reference.</p>
  <p>Thank You</p>
  <p>enter image description here</p>
  <p><a href="https://i.stack.imgur.com/tu5UL.jpg" rel="nofollow noreferrer"><code>enter image description here</code></a></p>
  <p><strong>Babelrc:</strong></p>
  <pre><code>{
  </code></pre>
  <p>&quot;presets&quot;: [
  [&quot;@babel/env&quot;, {
  &quot;useBuiltIns&quot;: &quot;usage&quot;,
  &quot;corejs&quot;: &quot;3&quot;,
  &quot;targets&quot;: {
  &quot;browsers&quot;: [
  &quot;last 5 versions&quot;,
  &quot;ie &gt;= 8&quot;
  ]
  }
  }]
  ]
  }</p>
  <p><strong>webpack.config.js:</strong></p>
  <p>const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');</p>
  <p>module.exports = {</p>
  <pre><code>entry: ['./index.js'],
  output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'js/bundle.js'
  },
  devServer: {
      contentBase: './dist'
  },
  plugins: [
      new HtmlWebpackPlugin({
          title: 'Custom template using Handlebars',
          filename: 'index.html',
          template: 'main.hbs'
      })
  ],
  module: {
      rules: [
          {
              test: /\.js$/,
              exclude: /node_modules/,
              use: {
                  loader: &quot;babel-loader&quot;
              }
          }
      ],
      loaders: [
          { test: /\.hbs$/, loader: &quot;handlebars-loader&quot; }
        ]
  }
  </code></pre>
  <p>};</p>
  <p><strong>main.js:</strong></p>
  <pre><code>enter code here
  
  import Search from './models/search';
  import Movie from './models/Movie'
  import User from './models/user'
  import * as searchView from './views/searchView'
  import * as movieView from './views/movieView'
  
  import { elements , renderLoader, clearLoader } from './views/base'
  const state = {};
  
   const controlSearch = async () =&gt; {
      // const query = searchView.getInput();
      const query = 'avengers';
  
      if (query) {
  
        searchView.clearInput();
        searchView.clearResult();
        state.search = new Search(query);
        state.user =  new User();
        searchView.clearInput();
        searchView.clearResult();
        renderLoader(elements.searchRes);
        
        await state.search.getResult();
        await state.user.userSignUp();
        clearLoader();
        console.log(state.search.result);
  
        searchView.renderResults(state.search.result);
  
      }
  
   };
  
   elements.searchForm.addEventListener('submit', e =&gt; {
      e.preventDefault();
      controlSearch();
  });
  </code></pre>
  <p><strong>main.hbs</strong></p>
  <pre><code> &lt;html&gt;
      &lt;head&gt;
  
          &lt;meta charset=&quot;UTF-8&quot;&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
          &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;
          &lt;title&gt;Movie Recherer&lt;/title&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;/css/bootstrap.min.css&quot;/&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;/css/all.min.css&quot;/&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;/css/main.css&quot; /&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;/css/home.css&quot; /&gt;
          
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class=&quot;container&quot;&gt;
              &lt;div class=&quot;row&quot;&gt;
                  {{{body}}}
              &lt;/div&gt;
          &lt;/div&gt;
  
          
  
          &lt;script src=&quot;/jquery.min.js&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
          &lt;script language=&quot;javascript&quot; src=&quot;/js/main.js&quot;&gt;&lt;/script&gt;
          &lt;script language=&quot;javascript&quot; src=&quot;/js/models/Movie.js&quot;&gt;&lt;/script&gt;
          &lt;script language=&quot;javascript&quot; src=&quot;/js/models/search.js&quot;&gt;&lt;/script&gt;
          &lt;script language=&quot;javascript&quot; src=&quot;/js/views/base.js&quot;&gt;&lt;/script&gt;
          &lt;script language=&quot;javascript&quot; src=&quot;/js/views/movieView.js&quot;&gt;&lt;/script&gt;
          &lt;script language=&quot;javascript&quot; src=&quot;/js/views/searchView.js&quot;&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>