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.

bug: v6, describe how to account for es modules in project

See original GitHub issue

Prerequisites

Ionic Framework Version

  • v4.x
  • v5.x
  • v6.x

Current Behavior

When using next-build with ionic/core

I get this error with beta 6 version 6 or greater

^^^^^^

SyntaxError: Unexpected token 'export'

Expected Behavior

Would build like it does with beta 6 version 5

Steps to Reproduce

run next build with ionic beta 6 version 6 or great with ionic/core

Code Reproduction URL

No response

Ionic Info

No response

Additional Information

No response

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:1
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
liamdebeasicommented, Oct 12, 2021

Actually there are 2 issues here, 1 Ionic and 1 non-Ionic. The Ionic issue is that the custom elements generated directly reference HTMLElement which is not defined in an SSR environment. The fix for this likely needs to be in the Stencil, so I will work with them to resolve that. Thanks again!

1reaction
liamdebeasicommented, Oct 12, 2021

Ionic 6 will be using ES Modules, and it looks like Next.js still has a few issues with supporting ES Modules: https://github.com/vercel/next.js/issues?q=is%3Aissue+is%3Aopen+Unexpected+token+'export'

As a temporary workaround, you can use https://www.npmjs.com/package/next-transpile-modules which is a Next.js plugin that will transpile ES Modules to Common JS (CJS).

While we do not consider this a bug in Ionic, we are still discussing the best path forward in terms of documentation and migration guides. I will update this thread when I have more to share. Thanks!

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to transpile ES modules with webpack and Node.js
Learn how webpack interacts with and supports ES modules in this deep dive tutorial on transpilation in Node.js.
Read more >
Module Methods - webpack
Dynamically load modules. Calls to import() are treated as split points, meaning the requested module and its children are split out into a...
Read more >
Node.js Bug Or Am I Doing it Wrong? ES Modules [closed]
This is not a bug in nodejs (running ESM modules works just fine). It's a configuration error on your part in some way...
Read more >
Upgrade to Babel 7
We've made some changes to account for this: Babel will stop lookup at the ... Babel 6's transformations for ES6 modules ran indiscriminately...
Read more >
rollup.js
To make sure your ES modules are immediately usable by tools that work with CommonJS such as Node.js and webpack, you can use...
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