Cannot require 'reactpub/entry' as it has JSX code

poltak commented 8 years ago

Hi there. First off, I'm fairly new to webpack, so not sure if this is something I am doing wrong (probably), however I can't seem to find why.

I am requiring reactpub/entry in my entry.js, using the following line:

const reactpubEntry = require('reactpub/entry');

However, I am getting this err output from webpack:

ERROR in ./~/reactpub/entry.js
Module parse failed: /Users/poltak/Documents/github/poltak.github.io/node_modules/reactpub/entry.js Line 71: Unexpected token <
You may need an appropriate loader to handle this file type.
|     var outlet = document.getElementById('outlet');
|     ReactDom.render(
|       <Router
|         history={history}
|         routes={routes}
 @ ./app/entry.js 3:20-45

ERROR in Error: Cannot find module "reactpub/entry"
    at webpackMissingModule (bundle.js:59:86)
    at Object.<anonymous> (bundle.js:59:177)
    at __webpack_require__ (bundle.js:30:30)
    at bundle.js:50:18
    at bundle.js:53:10
    at webpackUniversalModuleDefinition (bundle.js:3:20)
    at bundle.js:10:3
    at ContextifyScript.Script.runInNewContext (vm.js:18:15)
    at module.exports (/Users/poltak/Documents/github/poltak.github.io/node_modules/eval/eval.js:62:12)
    at Compiler.<anonymous> (/Users/poltak/Documents/github/poltak.github.io/node_modules/static-site-generator-webpack-plugin/index.js:30:20)

I think this is as reactpub's entry.js file contains JSX code (as shown in the error message), which cannot be used without being compiled down first by either the JSX or Babel loader. Is that correct? I am extending the webpack config returned by reactpubWebpack() adding in Babel loader configured with es2015 and react presets, however I am excluding the node_modules dir, so I don't have to compile all my deps.

So yes, I am wondering what I'm doing wrong here and how I should go about requiring this file so I can use reactpub?

bguiz commented 8 years ago

First off, I'm fairly new to webpack, so not sure if this is something I am doing wrong (probably), however I can't seem to find why.

No you are doing things OK - in fact I ran into this same problem myself while developing reactpub

I think this is as reactpub's entry.js file contains JSX code (as shown in the error message), which cannot be used without being compiled down first by either the JSX or Babel loader. Is that correct?

Yes, that is precisely the reason for this error

I am wondering what I'm doing wrong here and how I should go about requiring this file so I can use reactpub?

Take a look at the webpack config of the following projects:

blog.bguiz.com is my website that I'm building using reactpub. But it is mostly comprised of the markdown files. The ReactJs code all is contained in reactpub-blog-basic-theme. It is up to you whether you wish to separate your theme from your content of course.

You cannot avoid using babel on reactpub or the theme should you choose to create one - as I have not designed for that use case. That does not mean that you need to use babel to transpile all your node_modules though, in the webpack config, you can configure babel-loader such that it excludes all of node_modules except for certain ones - exclude can be a regular expression.

HTH, Brendan

bguiz commented 8 years ago

@poltak Also, realised that my previous explanation of exclude for babel-loader may have been a little vague... and I realised that in my theme, I was actually babel-ing my entire node_modules...

So I fixed that, and the diff is answers your question much more better than my first comment: see exclude.

HTH (better this time), Brendan

--> Here's the relevant section of webpack documentation for loader exclude

bguiz / reactpub

Cannot require 'reactpub/entry' as it has JSX code #2