New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

au generate component <name> returns SyntaxError #954

Closed
jvik opened this Issue Oct 22, 2018 · 11 comments

Comments

Projects
None yet
5 participants
@jvik

jvik commented Oct 22, 2018

I'm submitting a bug report

  • Library Version:
    1.0.0-beta.3

Please tell us about your environment:

  • Operating System:
    OSX 10.14

  • Node Version:
    v10.12.0

  • NPM Version:
    6.4.1
  • Browser:
    all

  • Language:
    all

  • Loader/bundler:
    Webpack

Current behavior:
When I run au generate component info-box this error is returned

 SyntaxError: /Users/jvik/Documents/github-repos/privat/practice-aurelia-karma/aurelia_project/generators/component.js: Support for the experimental syntax 'decorators-legacy' isn't currently enabled (6:1):

  4 | var path = require('path');
  5 |
> 6 | @inject(Project, CLIOptions, UI)
    | ^
  7 | export default class ElementGenerator {
  8 |   constructor(project, options, ui) {
  9 |     this.project = project;

    at Parser.raise (/Users/jvik/Documents/github-repos/privat/practice-aurelia-karma/node_modules/@babel/parser/lib/index.js:3939:15)
    at Parser.expectOnePlugin (/Users/jvik/Documents/github-repos/privat/practice-aurelia-karma/node_modules/@babel/parser/lib/index.js:5267:18)
    at Parser.parseDecorator (/Users/jvik/Documents/github-repos/privat/practice-aurelia-karma/node_modules/@babel/parser/lib/index.js:7320:10)
    at Parser.parseDecorators (/Users/jvik/Documents/github-repos/privat/practice-aurelia-karma/node_modules/@babel/parser/lib/index.js:7302:28)
    at Parser.parseStatement (/Users/jvik/Documents/github-repos/privat/practice-aurelia-karma/node_modules/@babel/parser/lib/index.js:7150:12)
    at Parser.parseBlockOrModuleBlockBody (/Users/jvik/Documents/github-repos/privat/practice-aurelia-karma/node_modules/@babel/parser/lib/index.js:7707:23)
    at Parser.parseBlockBody (/Users/jvik/Documents/github-repos/privat/practice-aurelia-karma/node_modules/@babel/parser/lib/index.js:7694:10)
    at Parser.parseTopLevel (/Users/jvik/Documents/github-repos/privat/practice-aurelia-karma/node_modules/@babel/parser/lib/index.js:7118:10)
    at Parser.parse (/Users/jvik/Documents/github-repos/privat/practice-aurelia-karma/node_modules/@babel/parser/lib/index.js:8521:17)
    at parse (/Users/jvik/Documents/github-repos/privat/practice-aurelia-karma/node_modules/@babel/parser/lib/index.js:10513:38)
  pos: 153,
  loc: Position { line: 6, column: 0 },
  missingPlugin: [ 'decorators-legacy', 'decorators' ],
  code: 'BABEL_PARSE_ERROR' 
  • What is the expected behavior?
mkdir practice-aurelia-karma
au new aurelia-testapp --here
au run --watch ( to check that it works properly )
close app
au generate component info-box

App now breaks as in error shown above

@zewa666

This comment has been minimized.

Member

zewa666 commented Oct 22, 2018

can you create a file named .babelrc inside your root project folder with the content:

{
  "plugins": [
    "transform-decorators-legacy"
  ]
}

and make sure that your package.json contains babel-plugin-transform-decorators-legacy. Likely the version will be ^1.3.4. Try the generate command afterwards again

@jvik

This comment has been minimized.

jvik commented Oct 23, 2018

can you create a file named .babelrc inside your root project folder with the content:

{
  "plugins": [
    "transform-decorators-legacy"
  ]
}

and make sure that your package.json contains babel-plugin-transform-decorators-legacy. Likely the version will be ^1.3.4. Try the generate command afterwards again

Thanks for responding @zewa666 .

There already is a .babelrc. It looks like this

module.exports = api => {
  api.cache.using(() => {
    // cache based on the two env vars
    return 'babel:' + process.env.BABEL_TARGET +
      ' protractor:' + process.env.IN_PROTRACTOR;
  });

  return {
    "plugins": [
      ['@babel/plugin-proposal-decorators', { legacy: true }],
      ['@babel/plugin-proposal-class-properties', { loose: true }]
    ],
    "presets": [
      [
        "@babel/preset-env", {
          "targets": process.env.BABEL_TARGET === 'node' ? {
            "node": process.env.IN_PROTRACTOR ? '6' : 'current'
          } : {
            "browsers": [ "last 2 versions" ]
          },
          "loose": true,
          "modules": process.env.BABEL_TARGET === 'node' ? 'commonjs' : false
        }
      ]
    ]
  }
}

This is the one I found in package.json.
"babel-plugin-transform-decorators-legacy": "^1.3.5",

@zewa666

This comment has been minimized.

Member

zewa666 commented Oct 23, 2018

so adding "transform-decorators-legacy" into plugins, just as a string entry after the two others, didn't help?

@huochunpeng

This comment has been minimized.

Member

huochunpeng commented Oct 23, 2018

All au commands do not use local babelrc file, it uses internal babel config to just run task files. This has to be fixed in cli code.

I am not sure why the au generate command needs to validate the generated template files (which use decorator), maybe we should skip that check.

If we need that check, and don’t want to change babelrc:false, then need to add ['@babel/plugin-proposal-decorators', { legacy: true }] to following method, also package.json deps.

function installBabel() {

@jvik

This comment has been minimized.

jvik commented Oct 29, 2018

so adding "transform-decorators-legacy" into plugins, just as a string entry after the two others, didn't help?

No, unfortunately this did not help.

All au commands do not use local babelrc file, it uses internal babel config to just run task files. This has to be fixed in cli code.

I am not sure why the au generate command needs to validate the generated template files (which use decorator), maybe we should skip that check.

If we need that check, and don’t want to change babelrc:false, then need to add ['@babel/plugin-proposal-decorators', { legacy: true }] to following method, also package.json deps.

cli/lib/project.js

Line 207 in ac889c0

function installBabel() {

I tried to add ['@babel/plugin-proposal-decorators', { legacy: true }] to .babelrc and run npm install @babel/plugin-proposal-decorators. I stilll get the same error.

@huochunpeng

This comment has been minimized.

Member

huochunpeng commented Oct 29, 2018

As I said, it does NOT use local babelrc. Changing your local babelrc would not help. This has to be fixed in cli code base, not your app code.

@jvik

This comment has been minimized.

jvik commented Oct 29, 2018

As I said, it does NOT use local babelrc. Changing your local babelrc would not help. This has to be fixed in cli code base.

Ah! Sorry. My bad. Thanks anyways. 👍

@huochunpeng

This comment has been minimized.

Member

huochunpeng commented Oct 29, 2018

If nobody picked this up, I will fix it after my vacation (about 2 more weeks). Sorry for the inconvenience.

@ramya494

This comment has been minimized.

ramya494 commented Oct 31, 2018

I am experiencing the same issue.

@dagtveit

This comment has been minimized.

dagtveit commented Nov 5, 2018

yea same here. what parts do we need to update when its fixed

@huochunpeng

This comment has been minimized.

Member

huochunpeng commented Nov 5, 2018

It will be fixed in a new version of cli. All you need will be update package.json and reinstall packages.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment