wix-incubator / react-templates

Light weight templates for react
https://wix.github.io/react-templates
MIT License
2.82k stars 207 forks source link

Unexpected token { using webpack #218

Closed epihel closed 7 years ago

epihel commented 7 years ago

Using webpack, react-templates 0.6.1, react-templates-loader 0.6.1, and react 15.4.2, I get an error as soon as react-template-loader tries to load any rt file.

ERROR in ./src/template.rt Module build failed: SyntaxError: Unexpected token { at exports.runInThisContext (vm.js:53:16) at Module._compile (module.js:414:25) at Object.Module._extensions..js (module.js:442:10) at Module.load (module.js:356:32) at Function.Module._load (module.js:311:12) at Module.require (module.js:366:17) at require (module.js:385:17) at Object. (/node_modules/react-templates-loader/index.js:1:84) at Module._compile (module.js:435:26) at Object.Module._extensions..js (module.js:442:10)

webpack.config.js { test: /.rt$/, loader: 'react-templates-loader' } Also tried: 'react-templates-loader?module=es6&target-version=15.4.2'

Error line in app.js import template from '../template.rt';

nippur72 commented 7 years ago

Just to exclude syntax errors, are you able to compile the .rt files from the command line?

Check also the way you are importing/exporting according to your module system (CommonJs?), consider that templates are not exported as default, e.g.:

import template from '../template.rt'; // formally wrong

var template = require('../template.rt'); // correct

That said, the Unexpected token { makes me think you are forcing ES6 syntax on ES5 somewhere... but it's just a guess, I have no other clues.

epihel commented 7 years ago

The template has only <div></div> inside as a test. I'm using ES6 modules. I've tried require as you suggest, but get the same error. I've attached a simple demo. Running "npm install" and "npm start" from the command line will display the error. Please let me know if you need any more info about the problem. unexpected-token.zip

nippur72 commented 7 years ago

Just add the commonjs module system which otherwise would be none by default:

file: webpack.config.js:

 { test: /\.rt$/, loader: 'react-templates-loader?modules=commonjs' }
epihel commented 7 years ago

I added "?modules=commonjs," but still get the error "SyntaxError: Unexpected token {"

nippur72 commented 7 years ago

it works with the .zip file you uploaded:

webpack: Compiled successfully.

the template is also ok:

var template = require('./template.rt');
console.log(template.toString());

console:

function () {
    return React.createElement('div', {});
}
epihel commented 7 years ago

I'm able to compile from the command line with rt template.rt, but it still gives me the error with webpack. Something must be different in my environment. I tried react-templates-loader?modules=commonjs&target-version=15.4.2 and react-templates-loader?modules=commonjs&target-version=0.14.0, but get the same error. Here's the entire stacktrace:

`$ npm start

@ start /unexpected-token node server.js

Listening at http://localhost:3000/ webpack built f5d07716a5ec7c3b985d in 283ms Hash: f5d07716a5ec7c3b985d Version: webpack 2.2.1 Time: 283ms Asset Size Chunks Chunk Names unexpected-token.js 105 kB 0 [emitted] main chunk {0} unexpected-token.js (main) 76.9 kB [entry] [rendered] [0] ../~/html-entities/lib/html5-entities.js 49 kB {0} [built] [1] ../~/webpack-hot-middleware/client.js 6.68 kB {0} [built] [2] ./index.js 40 bytes {0} [built] [3] ../~/ansi-html/index.js 4.26 kB {0} [built] [4] ../~/ansi-regex/index.js 135 bytes {0} [built] [5] ../~/html-entities/index.js 231 bytes {0} [built] [6] ../~/html-entities/lib/html4-entities.js 6.57 kB {0} [built] [7] ../~/html-entities/lib/xml-entities.js 2.98 kB {0} [built] [8] ./template.rt 621 bytes {0} [built] [failed] [1 error] [9] ../~/strip-ansi/index.js 161 bytes {0} [built] [10] ../~/webpack-hot-middleware/client-overlay.js 1.82 kB {0} [built] [11] ../~/webpack-hot-middleware/process-update.js 3.88 kB {0} [built] [12] ../~/webpack/buildin/module.js 517 bytes {0} [built] [13] multi webpack-hot-middleware/client ./index 40 bytes {0} [built]

ERROR in ./template.rt Module build failed: SyntaxError: Unexpected token { at exports.runInThisContext (vm.js:53:16) at Module._compile (module.js:414:25) at Object.Module._extensions..js (module.js:442:10) at Module.load (module.js:356:32) at Function.Module._load (module.js:311:12) at Module.require (module.js:366:17) at require (module.js:385:17) at Object. (/node_modules/react-templates-loader/index.js:1:84) at Module._compile (module.js:435:26) at Object.Module._extensions..js (module.js:442:10) @ ./index.js 1:15-39 @ multi webpack-hot-middleware/client ./index webpack: Failed to compile.`

nippur72 commented 7 years ago

Try checking your versions:

$ node -v && npm -v && webpack -v
v7.7.1
3.9.6
2.2.1

Also, try building on a different machine, just to see if something changes...

epihel commented 7 years ago

I hadn't updated node in a while. When I upgraded node, everything started working. Thanks for your help.

$ node -v && npm -v && webpack -v v7.7.1 4.1.2 2.2.1