1

I would like to know how to solve the following error:

Uncaught SyntaxError: Unexpected token '!'

The corresponding line is:

return new !(function webpackMissingModule() { var e = new Error("Cannot find module 'leaflet'"); e.code = 'MODULE_NOT_FOUND'; throw e; }()).Attribution(props);

And this is my react component code: app/javascripts/components/squad_map.jsx

import React from "react";
import { Map, Marker, Popup, TileLayer } from "react-leaflet";
import PropTypes from "prop-types";

class SquadMap extends React.Component {
    constructor() {
        super();
        this.state = {};
    }

    render() {
        return (
            <React.Fragment>
                <p>SquadMap</p>
            </React.Fragment>
        );
    }
}

export default SquadMap;

app/javascripts/packs/application.js

import "core-js/stable";
import "regenerator-runtime/runtime";
require("@rails/ujs").start();
require("turbolinks").start();
require("@rails/activestorage").start();
require("channels");

var componentRequireContext = require.context("components", true);
var ReactRailsUJS = require("react_ujs");
ReactRailsUJS.useContext(componentRequireContext);
require("trix");
require("@rails/actiontext");

Thanks in advance

ipegasus
  • 14,796
  • 9
  • 52
  • 76
  • 1
    Check out https://github.com/webpack/webpack/issues/6191. It appears to be a problem in ``WebpackMissingModule``. One commenter mentioned that it happened to them when the required file didn't exist. Maybe check that ``react-leaflet`` is in ``package.json`` and installed? – rmlockerd Jul 29 '20 at 06:20

1 Answers1

0

This was solved by upgrading to latest versions via: $ npm outdated -> $ npm update [PACKAGE_NAME] And also configuring babel code transpiling.

ipegasus
  • 14,796
  • 9
  • 52
  • 76