Transpiled code not converting all instances of const for Vue

[rojakcoder]

I've gone through issue #260 - I also have a similar problem but the suggested solution does not work for me.

Similar but different problem. Not all const keywords are replaced with var - seemingly those at the top-level are converted whereas those inside functions are not.

Be happy to hear if this is turns out to be my configuration problem rather than an issue with the plugin.

My Rollup configuration:

var plugins = [
  vue({
    css: false
  }),
  babel({
    runtimeHelpers: true,
    sourceMap: true,
    extensions: ['.js', '.vue']
  }),
  css(),
  replace({
    'process.env.NODE_ENV': JSON.stringify('development')
  }),
  resolve(),
];

export default [
  {
    input: 'src/main.js',
    output: {
      file: 'dist/build.min.js',
      format: 'iife'
    },
    plugins
  },
  {
    input: 'sass/main.js',
    output: {
      file: 'dist/main.js',
      format: 'iife'
    },
    plugins: [
      scss({
        output: 'dist/main.css'
      })
    ]
  }
];

My .babelrc file:

{
  "presets": [
    "@babel/env"
  ],
  "plugins": [
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread",
    [ 
      "@babel/plugin-transform-runtime",
      { 
        corejs: 2,
        helpers: true,
        regenerator: false
      }
    ]
  ]
}

[Andarist]

The configuration seems OK. I can't help you further though, unless you provide a repository at which I could take a look.

[rojakcoder]

Thanks @Andarist for the help.

The repo is at https://github.com/rojakcoder/randomizer.

I've got some additional findings.

On my laptop, the transpilation works fine. Laptop is using node 8.9.4, npm 6.5.0.

On my desktop, the same problem occurs which is at the outer most scope, the const keywords are replaced but the const keywords inside functions are not. Desktop is using node 10.15.0, npm 6.7.0

This feels like an environment issue but I have no clue what that might be.

[elie-g]

I have the exact same issue.

I'm using node v11.7.0 with npm 6.5.0 and I'm on a linux laptop.

[Andarist]

Can't reproduce it on node@10 and node@11 :/

Are those leftover consts coming from .js or .vue files? Are they from your files or from node_modules files?

[renatodeleao]

I'm facing the same issue but all const code is left by what i suspect being "style injectors" from vue-template-compiler. Anyone has a workaround for this?

Demo repo.

tests

Already tested several variations of babel configs, similars to the ones provided above, tested node@10 and @11 (latests) and also this advice from #260 (comment) without any luck.

[Andarist]

@renatodeleao in your case everything works as expected, those const come from node_modules and you have explicitly configured rollup-plugin-babel to ignore node_modules - https://github.com/renatodeleao/rollup-starter-vue-lib/blob/5ab5a71ec0a5a13e6f1048af26be624a4091a10b/rollup.config.js#L11

[renatodeleao]

Oo

🤦‍♂️

I don't know what to say besides.. i'm sorry for wasting your time @Andarist 😞

[rojakcoder]

Can't reproduce it on node@10 and node@11 :/

Are those leftover consts coming from .js or .vue files? Are they from your files or from node_modules files?

From my limited knowledge of Vue, it seems to be coming from the Vue library. Specifically, it occurs in the function normalizeComponent. In fact all three occurrences happen within this function.

[Andarist]

This might be a problem then, most likely node_modules are just ignored. Could you do this:

babel({
  ...JSON.parse(require('fs').readFileSync('./.babelrc', 'utf8')),
  runtimeHelpers: true,
  sourceMap: true,
  extensions: ['.js', '.vue']
})

and check if that fixes you issue?

[rojakcoder]

I can't replicate the issue even on the desktop now. I have no idea what is happening...