Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Webpack fails for JS projects from trying to load index.tsx #493

Closed
yanickrochon opened this issue Aug 25, 2022 · 32 comments
Closed

Webpack fails for JS projects from trying to load index.tsx #493

yanickrochon opened this issue Aug 25, 2022 · 32 comments
Labels
bug help-welcome Help for this issue is super welcome in order to accellerate the solution

Comments

@yanickrochon
Copy link

Describe the bug
Not all projects use TypeScript, and not all projects have .ts/.tsx loaders. This error occurs when using Next.js without TypeScript.

Expected behavior
This package should not expect that TypeScript will be available out of the box.

error - ./node_modules/@reactour/tour/index.tsx
Module parse failed: Unexpected token (8:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| export default Tour
| export { Tour, TourContext, TourProvider, useTour }
> export type {
|   StepType,
|   Position,
@elrumordelaluz
Copy link
Owner

elrumordelaluz commented Aug 25, 2022

Hi @yanickrochon , thanks for open the Issue.

Just fiunding a fix for this one in the same moment you open this issue.

Let me investigate a little more and came back to you asap.

@semihraifgurel
Copy link

Is there even a way to fix this problem instantly? We can't work for hours because of this. Revert it back until the problem is fixed

@semihraifgurel
Copy link

Ekran Resmi 2022-08-25 21 07 36

Attached error appears with version 3.0.3

@elrumordelaluz
Copy link
Owner

elrumordelaluz commented Aug 25, 2022

Attached error appears with version 3.0.3

I saw, because of this reopened the issue, I'm on it.

The issue seems to be related on tsup --external react, try to find the right way to handle it. Help pretty welcome.

@semihraifgurel
Copy link

Can you revert to v3.0.1 until you find a solution?

@elrumordelaluz
Copy link
Owner

related egoist/tsup#579

@elrumordelaluz
Copy link
Owner

@semihraifgurel @yanickrochon Could you please try using @reactour/tour@3.0.5 with a cleaning before rm -rf node_modules yarn.lock? Thanks you in advance!

@gulam-quinn
Copy link

@elrumordelaluz version 3.0.5 worked for me. Thanks.

@semihraifgurel
Copy link

It worked, thanks a lot.
Ekran Resmi 2022-08-26 12 22 47

@elrumordelaluz
Copy link
Owner

Great! Thank you for following and helping to solve the issue!

@mwakazi-dev
Copy link

Hello I am getting this error
Can't import the named export 'FocusScope' from non EcmaScript module (only default export is available)

@elrumordelaluz
Copy link
Owner

Hello I am getting this error Can't import the named export 'FocusScope' from non EcmaScript module (only default export is available)

From which file? can you share some more info? context, if is ts project?

@elrumordelaluz elrumordelaluz added the help-welcome Help for this issue is super welcome in order to accellerate the solution label Aug 26, 2022
@elrumordelaluz elrumordelaluz pinned this issue Aug 26, 2022
@shubhrasachdev
Copy link

shubhrasachdev commented Aug 26, 2022

Hi, I am facing a similar issue:

./node_modules/@reactour/mask/dist/index.mjs
Can't import the named export 'getPadding' from non EcmaScript module (only default export is available)

This is causing my builds to fail. Is there a stable version I can use?

@elrumordelaluz
Copy link
Owner

This is causing my builds to fail. Is there a stable version I can use?

Should be 3.0.1

I am sorry for those errors.

@yanickrochon
Copy link
Author

@elrumordelaluz everything is fine with 3.0.5! Good job!

@shubhrasachdev
Copy link

This is causing my builds to fail. Is there a stable version I can use?

Should be 3.0.1

I am sorry for those errors.

Hey @elrumordelaluz , still seeing this same error in 3.0.1.

@elrumordelaluz
Copy link
Owner

Hey @elrumordelaluz , still seeing this same error in 3.0.1.

Take a look to the replies on #498, I think could be a fast and temporary workaround.
Meanwhile I am working to solve the packages resolutions issue.

@elrumordelaluz
Copy link
Owner

For those who were having issues with named export from non EcmaScript module, can you please upgrade version/s to check if the issue is solved on your end? Thanks!

@shubhrasachdev
Copy link

shubhrasachdev commented Aug 29, 2022

Hey @elrumordelaluz , upgraded to @reactour/tour version 3.1.0. I am seeing this issue again:

./node_modules/@reactour/tour/dist/index.mjs
Can't import the named export 'Mask' from non EcmaScript module (only default export is available)

@elrumordelaluz
Copy link
Owner

thank you @shubhrasachdev, mind making rm -rf node_modules yarn.lock (or npm lock file) and then install again?

@shubhrasachdev
Copy link

shubhrasachdev commented Aug 29, 2022

Hey @elrumordelaluz - Tried after cleaning, the issue is still occurring. Anything else I can try?

@elrumordelaluz
Copy link
Owner

elrumordelaluz commented Aug 29, 2022

can you share more info related on your environment and project?

I can't reproduce in Next and CRA new empty projects.

@shubhrasachdev
Copy link

shubhrasachdev commented Aug 29, 2022

This is the env and project config I am working with:
OS: Windows 10
OS build: 19044.1889
Node.js Version: 16.15.0
React Version: 18.1.0
@reactour/tour Version: 3.1.0

Let me know if any additional info is required.

@elrumordelaluz
Copy link
Owner

are you using CRA or in which way are you transpiling?

@shubhrasachdev
Copy link

From what I can tell, its CRA. I run the npm run start command, which as described in my package.json, runs react-scripts start

@elrumordelaluz
Copy link
Owner

elrumordelaluz commented Aug 29, 2022

What happens if you do npm why @reactour/mask?

@elrumordelaluz
Copy link
Owner

Also, can you search please for "@reactour" in your package-lock.json ?

@shubhrasachdev
Copy link

shubhrasachdev commented Aug 29, 2022

Hey @elrumordelaluz , I noticed I was using react-scripts 3.4.4. I just now upgraded to 5.0.1, and now it is running as expected.

As for the info you asked from my package-lock.json -

"node_modules/@reactour/tour": {
      "version": "3.1.0",
      "resolved": "...",
      "integrity": "...",
      "license": "MIT",
      "dependencies": {
        "@reactour/mask": "*",
        "@reactour/popover": "*",
        "@reactour/utils": "*"
      },
      "peerDependencies": {
        "react": "16.x || 17.x || 18.x"
      }
    }

@elrumordelaluz
Copy link
Owner

I just now upgraded to 5.0.1, and now it is running as expected.

great!

Curious about this command:

What happens if you do npm why @reactour/mask?

Thanks for all the information!

@shubhrasachdev
Copy link

Here's the response from npm why @reactour/mask:

@reactour/mask@1.0.4
node_modules/@reactour/mask
  @reactour/mask@"*" from @reactour/tour@3.1.0
  node_modules/@reactour/tour
    @reactour/tour@"^3.1.0" from the root project

@elrumordelaluz
Copy link
Owner

Seems to resolve well. Thanks again!

@elrumordelaluz
Copy link
Owner

Since the small issues described after the author closes the main one seems to be solve, I am closing this issue, but feel free create a new one with specific information. Thanks again to you all!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug help-welcome Help for this issue is super welcome in order to accellerate the solution
Projects
None yet
Development

No branches or pull requests

6 participants