Uncaught SyntaxError: Cannot use import statement outside a module in node js

Question

while using the ES6 module language in nodejs it gives me an error of " IMPORTS CANNOT BE USED OUTSIDE THE MODULE" ERROR IN CHROME BROWSER.

I am trying to build my project using Node js express mongoose morgan express-handlebars and ES6

but while I run the project it gives me an error for the same

I tried using .babelrc and webpack.config.js but not able to resolve it. can anyone help me to achieve it?

I am putting images of my project for your reference.

Thank You

enter image description here

enter image description here

Babelrc:

"presets": [ ["@babel/env", { "useBuiltIns": "usage", "corejs": "3", "targets": { "browsers": [ "last 5 versions", "ie >= 8" ] } }] ] }

webpack.config.js:

const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

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: "babel-loader"
            }
        }
    ],
    loaders: [
        { test: /\.hbs$/, loader: "handlebars-loader" }
      ]
}

};

main.js:

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 () => {
    // 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 => {
    e.preventDefault();
    controlSearch();
});

main.hbs

 <html>
    <head>

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Movie Recherer</title>
        <link rel="stylesheet" href="/css/bootstrap.min.css"/>
        <link rel="stylesheet" href="/css/all.min.css"/>
        <link rel="stylesheet" href="/css/main.css" />
        <link rel="stylesheet" href="/css/home.css" />
        
    </head>
    <body>
        <div class="container">
            <div class="row">
                {{{body}}}
            </div>
        </div>

        

        <script src="/jquery.min.js"></script>
        <script src="/js/bootstrap.min.js"></script>
        <script language="javascript" src="/js/main.js"></script>
        <script language="javascript" src="/js/models/Movie.js"></script>
        <script language="javascript" src="/js/models/search.js"></script>
        <script language="javascript" src="/js/views/base.js"></script>
        <script language="javascript" src="/js/views/movieView.js"></script>
        <script language="javascript" src="/js/views/searchView.js"></script>
    </body>
</html>

Uh, that you are using ES6 modules in node.js on the server has nothing to do with being able to use ES6 modules in the browser. Your html as currently written definitely does not use modules, so that's why you are getting an error. Your webpack config looks like its the one responsible for transpiling your serverside code only. — Bergi

Rahul Gurujala Rahul Gurujala · Accepted Answer · 2020-08-30T19:52:16

You need to include you import inside a module: Try this:

<script type="module"> import btn from './helper' </script>

Add type="module" in every script tag of your main.hbs file

Uncaught SyntaxError: Cannot use import statement outside a module in node js

1 Answers