Cannot use import statement outside a module

[idjuradj]

🐛 bug report

Preflight Checklist

• I have read the
  Contributing Guidelines
  for this project.
• I agree to follow the
  Code of Conduct
  that this project adheres to.
• I have searched the issue tracker for an issue that matches the one I want
  to file, without success.

Description of the problem

When trying to transpile to project, codesandbox throws an error Cannot use import statement outside a module, which points to the following import
import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";

How has this issue affected you? What are you trying to accomplish?

I am trying to run the project.

To Reproduce

Go to provided sandbox link.

Link to sandbox: link (optional)

https://codesandbox.io/s/magical-worker-r3ikv

Your Environment

Software	Name/Version
Сodesandbox	react 17.0.1, react-router-dom 5.2.0
Browser	Chrome Version 88.0.4324.146 (Official Build) (x86_64)
Operating System	MacOS Catalina

[CompuIves]

Hello! This definitely seems like a bug, react router is not transpiled, so the feature detection doesn't work here. I'm not sure why though. I'll be able to look at this on Friday!

[CompuIves]

Ah, interesting, it seems like our transpiler is tripping over import "./assets/scss/light-bootstrap-dashboard-react.scss?v=2.0.0";, it tries to use a Webpack loader there, and tries to run the files before they're transpiled... Very interesting, is this ?v=2.0.0 added for cache busting?

[github-actions]

This issue has automatically been marked stale because there has been no activity in a while. Please leave a comment if the issue has not been resolved, or if it is not stale for any other reason. After 2 weeks, this issue will automatically be closed, unless a comment is made or the stale label is removed.

[jsejcksn]

I started seeing this today, too (with Grommet: https://github.com/grommet/grommet). It wasn't happening yesterday.

Reproduction sandbox: https://codesandbox.io/s/import-bug-reproduction-v6rct?file=/src/App.tsx

[DeMoorJasper]

@jsejcksn thanks for reporting gonna look into this right away, we changed some logic yesterday that should eliminate some extra compilation but apparently we haven't handled all the edge cases yet

[DeMoorJasper]

@jsejcksn fixed it in a566285 grommet uses require statements in ESModules which is actually invalid but other bundlers support it so fixed it

[jsejcksn]

grommet uses require statements in ESModules

I saw where each of the components uses a conditional check for NODE_ENV to see if it's dev or production in order to load them in some kind of wrapped documentation function.

Is there a non-runtime way (e.g. some kind of package.json config or alt import map) to use different modules during bundling based on that env value?

[DeMoorJasper]

There's a couple ways, the runtime way would probably be using an import(...) instead of require, but top level await isn't really supported properly yet so can't really await that.

In pkg#json there is the exports field https://nodejs.org/api/packages.html#packages_conditional_exports where you can define various versions.

For now require or a regular import is probably the best as everything around ESModules is still very fresh and both tooling and specifications are slowly catching up. Just didn't really think about this edge case when I changed the logic

[jsejcksn]

There's a couple ways, the runtime way would probably be using an import(...) instead of require, but top level await isn't really supported properly yet so can't really await that.

Yeah, I encountered issues using top-level await: I suspected that it's an issue with React (since it's supported by Node >=14.8), but I couldn't find any documentation to support or contradict that idea.

• Google search
• GitHub issues search

In pkg#json there is the exports field https://nodejs.org/api/packages.html#packages_conditional_exports where you can define various versions.

Thanks for sharing this—it's exactly what I was looking for. I was aware of conditional exports, but custom conditions weren't implemented yet the last time I looked at the docs.

[DeMoorJasper]

Cannot reproduce the original issue anymore, does it still happen?

[karl-police]

why can't one use await

if I open Google Chrome and type something pointless like await console.log("HI") it does not throw me an error

[filipelima18]

why can't one use await

if I open Google Chrome and type something pointless like await console.log("HI") it does not throw me an error

It looks like a fix for this was merged a few hours ago as discussed in this issue. Please let us know if you're still experiencing any issues.

[karl-police]

why can't one use await
if I open Google Chrome and type something pointless like await console.log("HI") it does not throw me an error

It looks like a fix for this was merged a few hours ago as discussed in this issue. Please let us know if you're still experiencing any issues.

#8435 <-- this still doesn't work