Module parse fail when importing react-photoswipe
minheq opened this issue · 4 comments
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
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 :)
@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
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.