I18n-module: Acorn raising syntax errors

Created on 1 May 2018 · 20Comments · Source: nuxt-community/i18n-module

Version

v3.1.0

Reproduction link

Steps to reproduce

In src/helpers/components.js acorn raises syntax errors while parsing some of my modules. I use recent ecmascript syntax, but nothing crazy. It seems that the failure is related to this computed block.

computed: {
...mapState(['user', 'env']),
redirectUrl() {
return this.$route.query && this.$route.query.redirect
}
}

What is expected ?

Not breaking on recent ecmascript syntax in unrelated component.

What is actually happening?

Getting cryptic acorn errors.

Additional comments?

If I modify manually components.js with this line "ecmaVersion: 9", it works.

So maybe as a quick fix you could use this version ?

Also the error message by acorn was not very helpful. Some context would be nice, at least the parsed file.

Lastly I was surprised to find something as meta as a JS parser in this project, it seems like a weak spot. Maybe find another solution, or make parsing the components optional ?

_{This bug report is available on Nuxt.js community (#c73)}

Source

albanm

👍7

Most helpful comment

@dschreij I've got the same error. setting parsePages option to false fixed this problem.

dotneet on 21 Jun 2018

👍5

All 20 comments

Hi @albanm
I'd love to implement a better solution that would not rely on acorn but I need a way of getting components options at compile-time and I didn't know how else to do.
It was suggested by @david50407 (https://nuxtjs.cmty.io/nuxt-community/nuxt-i18n/issues/c71) that the components could be loaded via Webpack to get the options and that sound like a nice way to go but I'd need some help to achieve this, I really don't know where to start :/
In the meantime I'll have a look at the hotfix you suggested and I'll consider making parsing optional too.

Thanks!

paulgv on 1 May 2018

Got same kind of error... (And the error message is really not helpful at all...)

yarn run v1.6.0
$ NODE_ENV=development nuxt
… debug nuxt › axios › baseURL: localhost:3000
… debug nuxt › axios › browserBaseURL: localhost:3000
  nuxt:build App root: /Users/matthieudou/code/blabla/landing_page +0ms
  nuxt:build Generating /Users/matthieudou/code/blabla/landing_page/.nuxt files... +0ms
  nuxt:build Generating files... +46ms
  nuxt:build Generating routes... +7ms

 ERROR

  SyntaxError: Unexpected token (7:4)

  - acorn.js:2748 Parser.pp$4.raise
    [landing_page]/[acorn]/dist/acorn.js:2748:13

  - acorn.js:644 Parser.pp.unexpected
    [landing_page]/[acorn]/dist/acorn.js:644:8

  - acorn.js:2703 Parser.pp$3.parseIdent
    [landing_page]/[acorn]/dist/acorn.js:2703:10

  - acorn.js:2487 Parser.pp$3.parsePropertyName
    [landing_page]/[acorn]/dist/acorn.js:2487:105

  - acorn.js:2417 Parser.pp$3.parseProperty
    [landing_page]/[acorn]/dist/acorn.js:2417:8

  - acorn.js:2371 Parser.pp$3.parseObj
    [landing_page]/[acorn]/dist/acorn.js:2371:23

  - acorn.js:2171 Parser.pp$3.parseExprAtom
    [landing_page]/[acorn]/dist/acorn.js:2171:17

  - acorn.js:2039 Parser.pp$3.parseExprSubscripts
    [landing_page]/[acorn]/dist/acorn.js:2039:19

  - acorn.js:2016 Parser.pp$3.parseMaybeUnary
    [landing_page]/[acorn]/dist/acorn.js:2016:17

  - acorn.js:1958 Parser.pp$3.parseExprOps
    [landing_page]/[acorn]/dist/acorn.js:1958:19

  - acorn.js:1941 Parser.pp$3.parseMaybeConditional
    [landing_page]/[acorn]/dist/acorn.js:1941:19

  - acorn.js:1917 Parser.pp$3.parseMaybeAssign
    [landing_page]/[acorn]/dist/acorn.js:1917:19

  - acorn.js:2434 Parser.pp$3.parsePropertyValue
    [landing_page]/[acorn]/dist/acorn.js:2434:87

  - acorn.js:2425 Parser.pp$3.parseProperty
    [landing_page]/[acorn]/dist/acorn.js:2425:8

  - acorn.js:2371 Parser.pp$3.parseObj
    [landing_page]/[acorn]/dist/acorn.js:2371:23

  - acorn.js:2171 Parser.pp$3.parseExprAtom
    [landing_page]/[acorn]/dist/acorn.js:2171:17


^C

matthieudou on 2 May 2018

👍3

Same error, I'll post stuff in case you need it
Config:

[
            'nuxt-i18n',
            {
                strategy: 'prefix',
                defaultLocale: 'en',
                lazy: true,
                langDir: 'locales/',
                redirectRootToLocale: 'en',

                detectBrowserLanguage: {
                    cookieKey: 'redirected',
                    useCookie: true
                },

                locales: [
                    {
                        code: 'en',
                        iso: 'en-US',
                        name: 'English',
                        file: 'en.json',
                    },
                    {
                        code: 'fr',
                        iso: 'fr-FR',
                        name: 'Français',
                        file: 'fr.json',
                    },
                    {
                        code: 'es',
                        iso: 'es-ES',
                        name: 'Español',
                        file: 'es.js',
                    },
                ],

                vueI18n: {
                    fallbackLocale: 'en',
                },
            },
        ],

I have two files that have the i18n object:

<script>
export default {
    i18n: {
        paths: {
            fr: '/centre-de-securite',
            en: '/security-center'
        }
    },
[...]

Output:

  SyntaxError: Unexpected token (75:28)

  - acorn.js:2748 Parser.pp$4.raise
    [Website]/[acorn]/dist/acorn.js:2748:13

  - acorn.js:644 Parser.pp.unexpected
    [Website]/[acorn]/dist/acorn.js:644:8

  - acorn.js:638 Parser.pp.expect
    [Website]/[acorn]/dist/acorn.js:638:26

  - acorn.js:2220 Parser.pp$3.parseParenAndDistinguishExpression
    [Website]/[acorn]/dist/acorn.js:2220:38

  - acorn.js:2155 Parser.pp$3.parseExprAtom
    [Website]/[acorn]/dist/acorn.js:2155:41

  - acorn.js:2039 Parser.pp$3.parseExprSubscripts
    [Website]/[acorn]/dist/acorn.js:2039:19

  - acorn.js:2016 Parser.pp$3.parseMaybeUnary
    [Website]/[acorn]/dist/acorn.js:2016:17

  - acorn.js:1958 Parser.pp$3.parseExprOps
    [Website]/[acorn]/dist/acorn.js:1958:19

  - acorn.js:1941 Parser.pp$3.parseMaybeConditional
    [Website]/[acorn]/dist/acorn.js:1941:19

  - acorn.js:1917 Parser.pp$3.parseMaybeAssign
    [Website]/[acorn]/dist/acorn.js:1917:19

  - acorn.js:2654 Parser.pp$3.parseExprList
    [Website]/[acorn]/dist/acorn.js:2654:20

  - acorn.js:2067 Parser.pp$3.parseSubscripts
    [Website]/[acorn]/dist/acorn.js:2067:29

  - acorn.js:2042 Parser.pp$3.parseExprSubscripts
    [Website]/[acorn]/dist/acorn.js:2042:21

  - acorn.js:2016 Parser.pp$3.parseMaybeUnary
    [Website]/[acorn]/dist/acorn.js:2016:17

  - acorn.js:1958 Parser.pp$3.parseExprOps
    [Website]/[acorn]/dist/acorn.js:1958:19

  - acorn.js:1941 Parser.pp$3.parseMaybeConditional

I tried switching ecma to 9 like @albanm but it didn't work.

Extarys on 6 May 2018

I've got the same issue, it seems to come from the object spread operator.

klessou on 6 May 2018

👍1

I rolled back to 2.9.5 in the mean time.

Extarys on 7 May 2018

Hi all!
Sorry for the late answers.
I'm working on bringing back the routes configuration method that was in v2 so you can choose between setting custom routes in the pages or in the module's options.
Should be done soon. In the meantime, I'd suggest you stick with v2.
Hopefully, I'll be able to improve the parsing method in the future, still don't know how exactly.

paulgv on 8 May 2018

🎉2

I can't complain, I think your doing a really good job - I love this plugin.

Extarys on 8 May 2018

👍2 ❤1

Thanks @Extarys <3
I just released v3.2.0 in which you'll be able to switch back to configuring custom routes in the module's configuration. It's all documented here: https://nuxt-community.github.io/nuxt-i18n/routing.html#custom-paths
I hope it completely solves these issues you've been having!

paulgv on 9 May 2018

🎉3

I'll try tomorrow - May I ask why we saw those errors? Personally I love having every routes at the same place. Makes it easier to manage - I'm already confused with all the layouts and pages calling each other.

Extarys on 9 May 2018

@Extarys I had the feeling it would be more intuitive to configure routes in page files rather than in the configuration, looks like it's not necessarily ideal after all. Personally, I think I'll use one way or the other depending on the project.

paulgv on 10 May 2018

👍1

@klessou confirmed. removingn ES object spread in page solved it for me.

janpauldahlke on 15 May 2018

I would suggest adding in https://github.com/acornjs/acorn-object-spread ... which adds support for object spread operator. Or yes bumping ecmaVersion to 9 instead of 8 in components.js solved it as well.

AnthonyConklin on 27 May 2018

Hey, just released v3.2.4 which has ecmaVersion set to 9
It kinda feels like a temporary fix but it's something!
@Atinux gave me some nice tips to improve the way this works but I'm still lacking time to implement it :/

paulgv on 27 May 2018

I get the same error with nuxt-i18n 4.0.0, although with a slightly different stacktrace:

~~~
ERROR

SyntaxError: Unexpected token (6:23)

acorn.js:2756 Parser.pp$4.raise
[src]/[acorn]/dist/acorn.js:2756:13
acorn.js:647 Parser.pp.unexpected
[src]/[acorn]/dist/acorn.js:647:8
acorn.js:2196 Parser.pp$3.parseExprAtom
[src]/[acorn]/dist/acorn.js:2196:10
acorn.js:2047 Parser.pp$3.parseExprSubscripts
[src]/[acorn]/dist/acorn.js:2047:19
acorn.js:2024 Parser.pp$3.parseMaybeUnary
[src]/[acorn]/dist/acorn.js:2024:17
acorn.js:2741 Parser.pp$3.parseAwait
[src]/[acorn]/dist/acorn.js:2741:24
acorn.js:2008 Parser.pp$3.parseMaybeUnary
[src]/[acorn]/dist/acorn.js:2008:17
acorn.js:1966 Parser.pp$3.parseExprOps
[src]/[acorn]/dist/acorn.js:1966:19
acorn.js:1949 Parser.pp$3.parseMaybeConditional
[src]/[acorn]/dist/acorn.js:1949:19
acorn.js:1925 Parser.pp$3.parseMaybeAssign
[src]/[acorn]/dist/acorn.js:1925:19
acorn.js:1170 Parser.pp$1.parseVar
[src]/[acorn]/dist/acorn.js:1170:26
acorn.js:1034 Parser.pp$1.parseVarStatement
[src]/[acorn]/dist/acorn.js:1034:8
acorn.js:788 Parser.pp$1.parseStatement
[src]/[acorn]/dist/acorn.js:788:17
acorn.js:1112 Parser.pp$1.parseBlock
[src]/[acorn]/dist/acorn.js:1112:23
acorn.js:791 Parser.pp$1.parseStatement
[src]/[acorn]/dist/acorn.js:791:34
acorn.js:1154 Parser.pp$1.parseForIn
[src]/[acorn]/dist/acorn.js:1154:20
~~~

I don't know where to set ecmaVersion to 9 or 10 in this context. I do not have a components.js file (it is not officially part of nuxt.js, is it?). Can i configure this settings somewhere in nuxt.config.js too?

EDIT: Alright my bad, I see that this file is located in the nuxt-i18n source.. In 4.0.0 ecmaVersion is already set to 10, but the above error still occurs...

dschreij on 15 Jun 2018

@dschreij I've got the same error. setting parsePages option to false fixed this problem.

dotneet on 21 Jun 2018

👍5

Right, done that and it worked, but forgot to report that back here. Thanks for the tip anyway!

dschreij on 21 Jun 2018

This bug-report has been fixed by @paulgv in release v3.2.0.

I'll consider this fixed as parsePages option allows you to disable acorn parsing.

cmty[bot] on 8 Aug 2018

Hello, I've been getting this error with no luck in finding the cause.

First time it appeared after template changes (HTML only) which triggered hot reload. I've managed to get it working by going back with few of my changes thus not really understanding what caused the error.

The second time I am stuck on right now. I can't link the error to any of my changes and I am wondering if you have found any other possible triggers other than spread operator.

 ERROR  Unexpected token (23:17)                                                                                                                                                                                                                                                                                                                                07:47:18

  at _class.pp$4.raise (node_modules/nuxt-i18n/node_modules/acorn/dist/acorn.js:2836:15)
  at _class.pp.unexpected (node_modules/nuxt-i18n/node_modules/acorn/dist/acorn.js:689:10)
  at _class.pp.expect (node_modules/nuxt-i18n/node_modules/acorn/dist/acorn.js:683:28)
  at _class.pp$2.parseBindingList (node_modules/nuxt-i18n/node_modules/acorn/dist/acorn.js:1759:19)
  at _class.pp$3.parseMethod (node_modules/nuxt-i18n/node_modules/acorn/dist/acorn.js:2621:24)
  at _class.pp$3.parsePropertyValue (node_modules/nuxt-i18n/node_modules/acorn/dist/acorn.js:2543:25)
  at _class.pp$3.parseProperty (node_modules/nuxt-i18n/node_modules/acorn/dist/acorn.js:2528:10)
  at _class.pp$3.parseObj (node_modules/nuxt-i18n/node_modules/acorn/dist/acorn.js:2474:23)
  at _class.pp$3.parseExprAtom (node_modules/nuxt-i18n/node_modules/acorn/dist/acorn.js:2236:19)
  at _class.parseExprAtom (node_modules/acorn-dynamic-import/lib/index.js:75:117)
  at _class.pp$3.parseExprSubscripts (node_modules/nuxt-i18n/node_modules/acorn/dist/acorn.js:2089:21)
  at _class.pp$3.parseMaybeUnary (node_modules/nuxt-i18n/node_modules/acorn/dist/acorn.js:2066:19)
  at _class.pp$3.parseExprOps (node_modules/nuxt-i18n/node_modules/acorn/dist/acorn.js:2010:21)
  at _class.pp$3.parseMaybeConditional (node_modules/nuxt-i18n/node_modules/acorn/dist/acorn.js:1993:21)
  at _class.pp$3.parseMaybeAssign (node_modules/nuxt-i18n/node_modules/acorn/dist/acorn.js:1968:21)
  at _class.pp$3.parsePropertyValue (node_modules/nuxt-i18n/node_modules/acorn/dist/acorn.js:2537:89)