question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Syntactically incorrect JS output with `declare const` globals -- due to Rollup treeshaking / side-effects

See original GitHub issue

What happens and why it is wrong

image

I ran into a werid result, as you can see the

const T = COMMENT_OPTIONS,
  V = PAGE_INFO_I18N;
VALINE_I18N;

is absolutly wrong, and will return an error Uncaught SyntaxError: Unexpected token ':' after VALINE_I18N replace by an object.

The project is working good for the past week, when it suddenly ran into this issue.

At a glance, I regard this as a temp error, but this issue still happens after I:

  • delete node_modules/.temp

  • delete the whole node_modules/

I am not sure if it is a bug (it probably not), but is there other temp or cache I missed?


Sorry for not providing the config, but I think for this question it’s not needed. And won’t help.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
Mister-Hopecommented, Jun 10, 2022

Edited, I looked into my repo commit, I did not import a.

// define.ts
declare const CONST_A: xxx;
declare const CONST_B: xxx;
declare const CONST_C: xxx;

export const a = CONST_A;
export const b = CONST_B;
export const c = CONST_C;
// module.ts
import { b, c } from './define';

// real reference with b and c
// ...

It seems that rollup mark CONST_A with side effect because it does not know what’s it’s value and preserve it, but the declared a is removed because it’s unused, so that rollup proudly gives:

CONST_A;
const b = CONST_B,
  c = CONST_C;

Any way, it should not be a problem with this repo. I was new with rollup at that time.

1reaction
Mister-Hopecommented, Jun 9, 2022

It’s been a long time. I can tell that the original one is that:

// define.ts
declare const CONST_A: xxx;
declare const CONST_B: xxx;
declare const CONST_C: xxx;

export const a = CONST_A;
export const b = CONST_B;
export const c = CONST_C;
// module.ts
import { a, b, c } from './define';

// a treeshakable thing. e.g: function
const func = ()=> a;

// real reference with b and c
// ...

I am not sure about the real content in module.ts, but at that time it’s not a cache error, intead, it produce the weird result with:

CONST_A;
const b = CONST_B,
  c = CONST_C;

After investigating for sometime, I realize that rollup seems doing the correct thing, but it actually can produce an error if the content is replaced by an object, so rollup should better produce:

(CONST_A);
const b = CONST_B,
  c = CONST_C;

So I decide to close this in this repo. Also I mananged to find a workaround (instead of fixing it at that time).

I am not sure if the issue is still reproductable now, and I think that I was too lazy to raise another issue to rollup at that time, because it’s hard to say rollup was wrong.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Tree shaking too aggressive? · Issue #786 · rollup ... - GitHub
Rollup should recognize that document is not a global variable, and accessing any variables not controlled by Rollup can have a side effect....
Read more >
Tree Shaking - webpack
A "side effect" is defined as code that performs a special behavior when imported, other than exposing one or more exports. An example...
Read more >
How to deal with side effects in tree shaking code?
In one of my modules, I access the global Audio constructor and use it to determine which audio files the browser can play...
Read more >
Reduce JavaScript payloads with tree shaking - web.dev
Tree shaking is a form of dead code elimination. The term was popularized by Rollup, but the concept of dead code elimination has...
Read more >
Tree-Shaking in JavaScript with Rollup - CodinGame
This results in the elimination of code in our files and dependencies that is effectively unreachable. In a metaphorical sense, it's like shaking...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found