custom-resolver.js doesn't work - Unexpected end of JSON input

Using atom 1.35.1, hyperclick 0.1.5 and js-hyperclick 1.17.0, macOS High Sierra 10.13.6

I have custom paths set up in webpack so that in import statements, modules refer to app/modules and root refers to app. When I press command and hover over the path and click, it gives me an error: unexpected end of JSON input as below.

webpack.common.js file:

  resolve: {
    alias: {
      root: path.resolve(__dirname, '../app'),
      modules: path.resolve(__dirname, '../app/modules')
    },
    modules: [path.resolve(__dirname, '../app'), path.resolve(__dirname, '../node_modules')]
  },

Import syntax example:

import Progress from 'modules/common/components/Progress';
import forms from 'root/constants/formConstants';

My setup in package.json:

  "hyperclick": {
    "versions": {
      "0.1.0": "getProvider"
    }
  },
  "moduleRoots": [ "", "custom-resolver.js" ],

custom-resolver.js file:

"use babel"
/* eslint-disable no-unused-vars */

// If you want to use ES6 module syntax, you will need "use babel" at the top of
// your resolver. Atom will transpile it automatically.
import path from "path"

// spec/fixtures/all-imports.js has some imports that run through this custom
// resolver. I don't know what you might use basedir for, but you have it if you
// need it. In the case of `all-imports.js` basedir would be the absolute path
// to `js-hyperclick/spec/fixtures` without the trailing slash.
export default function customResolver({ basedir, moduleName }) {
  // You can use whatever strategy you want to convert your modules
  const [prefix, ...rest] = moduleName.split("/")

  // Whatever you return will be resolved realative to the file that imported
  // it.
  // if (prefix === "this-directory") {
  //   return "./" + rest.join("/")
  // }

  if (prefix === "root") {
    // I think it's probably best to return an absolute path like this most of
    // the time.
    return path.join(__dirname, "app", rest.join("/"))
  }

  if (prefix === "modules") {
    // I think it's probably best to return an absolute path like this most of
    // the time.
    return path.join(__dirname, "app/modules", rest.join("/"))
  }

  // Meteor style imports. These are NOT node compatible because `/` is the root
  // of your filesystem.
  if (moduleName[0] === "/") {
    return path.join(__dirname, moduleName)
  }

  // The module `atom` and node built in modules have custom handling that open
  // a URL. If for some reason you have a module that can't be resolved by
  // normal means, you can also link out to documentation somewhere.
  if (moduleName === "url-example") {
    return "https://atom.io/packages/js-hyperclick"
  }
}

Error message

Uncaught SyntaxError: Unexpected end of JSON input
file:///Users/hedgeable/Downloads/Atom.app/Contents/Resources/app.asar/static/index.html:93
Hide Stack Trace
SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at loadModuleRoots (/Users/hedgeable/.atom/packages/js-hyperclick/lib/core/resolve-module.js:36:23)
    at resolveWithCustomRoots (/Users/hedgeable/.atom/packages/js-hyperclick/lib/core/resolve-module.js:53:17)
    at resolveModule (/Users/hedgeable/.atom/packages/js-hyperclick/lib/core/resolve-module.js:150:30)
    at followSuggestionPath (/Users/hedgeable/.atom/packages/js-hyperclick/lib/js-hyperclick.js:109:22)
    at Object.callback (/Users/hedgeable/.atom/packages/js-hyperclick/lib/js-hyperclick.js:169:11)
    at t.default._confirmSuggestion (/Users/hedgeable/.atom/packages/hyperclick/index.js:1:158042)
    at t.default._onMouseDown (/Users/hedgeable/.atom/packages/hyperclick/index.js:1:159072)

Directory structure:

[AsaAyers]

Do you have a Babel configuration file that js-hyperclick can automatically detect? .babelrc, .babelrc.js, babel.config.js, etc. That error looks like JSX isn’t enabled, but the default config enables it.

https://github.com/AsaAyers/js-hyperclick/blob/f21d5d28a80560ca9646d63113b839cdbdacbb73/lib/core/parse-code.js#L76

[rachydro]

It all works now! You were right, I installed the @babel/plugin-syntax-jsx module and included it in the .babelrc. Thanks so much for your help! Excited to get this working. 😄