jedireza / hapi-react-views

:package: A hapi view engine for React components
MIT License
231 stars 33 forks source link

Odd error after updating #31

Closed hydrotik closed 8 years ago

hydrotik commented 8 years ago
[1] ==> 🌎  Listening at http://localhost:8000
[1] Debug: internal, implementation, error 
[1]     SyntaxError: Unexpected token <: Unexpected token <
[1]     at exports.runInThisContext (vm.js:53:16)
[1]     at Module._compile (module.js:414:25)
[1]     at Object.Module._extensions..js (module.js:442:10)
[1]     at Module.load (module.js:356:32)
[1]     at Function.Module._load (module.js:311:12)
[1]     at Module.require (module.js:366:17)
[1]     at require (module.js:385:17)
[1]     at runtime (/Project/node_modules/hapi-react-views/index.js:22:25)
[1]     at Object.renderer (/Project/node_modules/vision/lib/manager.js:142:36)
[1]     at internals.Manager._render (/Project/node_modules/vision/lib/manager.js:477:14)
[1]     at Object.internals.marshal (/Project/node_modules/vision/lib/manager.js:571:13)
[1]     at internals.Response._prepare.internals.Response._processPrepare.internals.Response._marshal.next [as _marshal] (/Project/node_modules/hapi/lib/response.js:464:22)
[1]     at /Project/node_modules/hapi/lib/transmit.js:124:18
[1]     at /Project/node_modules/hapi/lib/transmit.js:499:20
[1]     at Object.exports.parallel (/Project/node_modules/hapi/node_modules/items/lib/index.js:47:9)
[1]     at Object.exports.send.internals.marshal.internals.fail.internals.transmit.internals.state.Items.parallel [as state] (/Project/node_modules/hapi/lib/transmit.js:492:11)
tkh44 commented 8 years ago

It looks like you are missing the babel require hook. If you are using babel 6, you must have at least the jsx plugin enabled.

hydrotik commented 8 years ago

Doesn't seem to be using 6 yet:

    "babel-core": "^5.8.25",
    "babel-eslint": "^4.1.3",
    "babel-loader": "^5.3.2",
    "babel-plugin-rewire": "^0.1.22",
    "babel-plugin-typecheck": "^1.3.0",
    "babel-runtime": "^5.8.25",
tkh44 commented 8 years ago

The views must be compiled before this plugin gets them. The error is due to the fact that node is seeing the jsx file before then (the invalid '<' gives it away). You must either precompile the templates as a build step or use https://babeljs.io/docs/usage/require in your code.

jedireza commented 8 years ago

Thanks for opening an issue. As stated in the usage section of the readme:

Note: As of hapi-react-views v4.x your project must register a transpiler such as babel or node-jsx. An alternative to this is to transpile ahead of time and save the result to file.

hydrotik commented 8 years ago

All set thanks!

hydrotik commented 8 years ago

After getting this working and then moving the setup to the manifest and using visionary, I am back to the unexpected token issue. I'm pretty sure I have everything included and moved over from what was working.

    plugins: {
        inert: {},
        vision: {},
        visionary: {
            engines: {
              jsx: "hapi-react-views"
            },
            compileOptions: {
                useNodeJsx: false
            },
            relativeTo: __dirname,
            path: "./src/global/server/views/"
        }
        , './global/server/views/home': {}
        , './global/server/api/index': {}
    }

I am also still including the babel hook:

require('babel-core/register')({});

and .babelrc is still the same:

{
    "presets": ["es2015", "react", "stage-0"],
    "plugins": [
        "transform-react-jsx",
        "syntax-jsx"
    ]
}

And getting:

[1] Debug: internal, implementation, error 
[1]     SyntaxError: /myproject/src/global/server/views/home/Index.jsx: Unexpected token (16:12)
[1]   14 | 
[1]   15 |         return(
[1] > 16 |             <html>
[1]      |             ^
[1]   17 |                 <head>
[1]   18 | 
[1]   19 |                     <meta charSet="utf-8"></meta>
hydrotik commented 8 years ago

Seems like it could be related to https://github.com/jedireza/hapi-react-views/pull/32

hydrotik commented 8 years ago

Changed to:

require('babel-core/register')({
    presets: ['react', 'es2015']
});

Thanks @tanepiper!

Should probably update the README as well.