Module parse fail when importing react-photoswipe

[Minh]

This error is what I encountered trying to import react-photoswipe module to one of popular boilerplates https://github.com/erikras/react-redux-universal-hot-example

Reproducing the problem in this branch
https://github.com/minheq/react-redux-universal-hot-example/tree/issue-9

Changes are inside this commit, click here

[Pete Cook]

For what it's worth, your fork gives me a different error inside PhotoSwipe.js

So something weird is going on. Possibly with the boilerplate webpack setup?

[Minh]

Your are probably right that it has to do with the webpack setup :) But importing other modules don't seem to cause any errors, so I thought it also might have to do something with react-photoswipe.

But since it is more likely to be the boilerplate than the repository, I'm closing this issue. Sorry for the mistake :)

[WM]

@minheq Did you ever find a fix for this? Just came into the same issue, can't figure out what is wrong in my configs! I've also came across a few other people who had this problem

[Bobby]

I just encountered this today, and I think I've found the root cause.

There's a line in erikras' boilerplate's webpack config that says

...
  resolve: {
    modulesDirectories: [
      'src',
      'node_modules'
    ],
    extensions: ['', '.json', '.js', '.jsx']
  },
...

When we require('photoswipe') as there is in react-photoswipe/lib/PhotoSwipe.js (29), webpack will also use the same resolve rules, and as per the docs it will search for photoswipe.js in directories react-photoswipe/lib/src, react-photoswipe/src, and then photoswipe (from node_modules).

The issue here is we have a file react-photoswipe/src/PhotoSwipe.js, which I suppose matches the require (I'm using OSX, where the filesystem is not case sensitive). Hence it will load the es6 source and somehow failed to parse.

I fixed the error by changing my resolve rule to use resolve.root as follows:

...
  resolve: {
    root: [
      path.resolve('./src'),
    ],
    extensions: ['', '.js', '.jsx'],
  },
...

And my app then compiles correctly. I think (and hope) it shouldn't have any noticable effect unless you depend on the hierarchical behavior of resolve.moduleDirectories.

Pinging @minheq and @wmarsey in case you're still looking for a fix.