SyntaxError: Cannot use import statement outside a module [Locomotive Scroll Vanilla JS]

For some reason i'm getting this error: SyntaxError: Cannot use import statement outside a module.

I've tried a few different things to make it work like using requiere() on the imports in js, etc. How can i fix this? I already also installed using npm install locomotive-scroll

The docs: https://github.com/locomotivemtl/locomotive-scroll

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.css">
</head>

<body>
    <div data-scroll-container>
        <div class="section" data-scroll-section>
            <div>
                <h1 data-scroll>Hey</h1>
                <p data-scroll data-scroll-direction="horizontal" data-scroll-speed="12" style="margin-left: 20vw;">👋
                </p>
            </div>
        </div>
        <div class="section" data-scroll-section>
            <div>
                <h2 data-scroll data-scroll-speed="1">Looks like rain</h2>
                <p data-scroll data-scroll-speed="4">🌧</p>
            </div>
        </div>
        <div class="section" data-scroll-section>
            <div>
                <h2 data-scroll data-scroll-speed="1">Have an apple</h2>
                <p data-scroll data-scroll-direction="horizontal" data-scroll-speed="-6">🍎</p>
            </div>
        </div>
    </div>

    <script src="./app.js" type="module"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.js"></script>

</body>

</html>

body {
  margin: 0;
  text-align: center;
  font: 900 120% system-ui, sans-serif;
}

.section {
  height: 100vh;
  display: grid;
  place-items: center;
}
p {
  font-size: 120px;
  margin: 0;
}
h1 {
  margin: 0;
}

import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll({
    el: document.querySelector('[data-scroll-container]'),
    smooth: true,
    multiplier: .2
});

Solution

This error message usually occurs in JavaScript when you try to use an import statement outside of a module. This normally means that you are using the import statement in a js file that is not a module.

To fix this error you can make sure that your server is configured to properly handle js modules.

If you are using a local development server, make sure that it supports serving js modules. For example, you can use a server like http-server or live-server, or you can configure your own server to support js modules.

If none of the above solutions work, you can try using a different approach to load Locomotive Scroll Vanilla JS, such as using a script tag with an src attribute. Then, you can use global LocomotiveScroll variable in your app.js file instead of importing it:

const scroll = new LocomotiveScroll({ el: document.querySelector('[data-scroll-container]'), smooth: true, multiplier: .2 });