CODEWITHSUNDEEP
javascriptreactjs
myTest532 myTest532
myTest532 myTest532

Reputation: 2381

React import external javascript returning error

I'm new to React and I'm trying to include a library javascript file to my project. I add the script in the index.html.

...
<body>
...
...
<script src="../src/assets/js/scripts-init/demo.js"></script>
</body>
</html>

When I open it in Firefox, I can see the warning and error in the console log. Warning:

The script from “http://localhost:3000/src/assets/js/scripts-init/demo.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.

Error:

Uncaught SyntaxError: expected expression, got '<'  demo.js

What's the correct way to add .js script in React project?

Thanks.

Including the demo.js

// Demo Theme Options

$(function () {

    $('.btn-open-options').click(function () {
        $('.ui-theme-settings').toggleClass('settings-open');
    });

    $('.close-sidebar-btn').click(function () {

        var classToSwitch = $(this).attr('data-class');
        var containerElement = '.app-container';
        $(containerElement).toggleClass(classToSwitch);

        var closeBtn = $(this);

        if (closeBtn.hasClass('is-active')) {
            closeBtn.removeClass('is-active');
        } else {
            closeBtn.addClass('is-active');
        }
    });

    $('.switch-container-class').on('click', function () {

        var classToSwitch = $(this).attr('data-class');
        var containerElement = '.app-container';
        $(containerElement).toggleClass(classToSwitch);

        $(this).parent().find('.switch-container-class').removeClass('active');
        $(this).addClass('active');

    });

    $('.switch-theme-class').on('click', function () {

        var classToSwitch = $(this).attr('data-class');
        var containerElement = '.app-container';

        if (classToSwitch == 'app-theme-white') {
            $(containerElement).removeClass('app-theme-gray');
            $(containerElement).addClass(classToSwitch);
        }

        if (classToSwitch == 'app-theme-gray') {
            $(containerElement).removeClass('app-theme-white');
            $(containerElement).addClass(classToSwitch);
        }

        if (classToSwitch == 'body-tabs-line') {
            $(containerElement).removeClass('body-tabs-shadow');
            $(containerElement).addClass(classToSwitch);
        }

        if (classToSwitch == 'body-tabs-shadow') {
            $(containerElement).removeClass('body-tabs-line');
            $(containerElement).addClass(classToSwitch);
        }

        $(this).parent().find('.switch-theme-class').removeClass('active');
        $(this).addClass('active');

    });

    $('.switch-header-cs-class').on('click', function () {
        var classToSwitch = $(this).attr('data-class');
        var containerElement = '.app-header';

        $('.switch-header-cs-class').removeClass('active');
        $(this).addClass('active');

        $(containerElement).attr('class', 'app-header');
        $(containerElement).addClass('header-shadow ' + classToSwitch);

    });

    $('.switch-sidebar-cs-class').on('click', function () {
        var classToSwitch = $(this).attr('data-class');
        var containerElement = '.app-sidebar';

        $('.switch-sidebar-cs-class').removeClass('active');
        $(this).addClass('active');

        $(containerElement).attr('class', 'app-sidebar');
        $(containerElement).addClass('sidebar-shadow ' + classToSwitch);

    });
});

Upvotes: 0

Views: 228

Answers (1)

MaCadiz
MaCadiz

Reputation: 1817

If you are using static files, you should add them into the public folder in your react project, for example:

YOUR_PROJECT_FOLDER
|_public
  |_index.html
  |_static
    |_scripts-init
      |_demo.js

And then just refer to it with relative path, like:

<script src="/static/scripts-init/demo.js"></script>

This is because the code gets transpiled by webpack (or the default transpiler) and generates a dev build where the 'src' folder does not exist.

Upvotes: 2

Related Questions