Can't Import Mask from ECMA

[barjabeen12]

import steps from "./steps";
import { TourProvider } from "@reactour/tour";

i haven't done any code yet, i am just importing the package and on that i am facing the error below. i have tried upgrading the react-scripts didn't worked though.

Can't import the named export 'Mask' from non EcmaScript module (only default export is available)

[barjabeen12]

getting this error while setting up the library, any idea how can i solve this?

[elrumordelaluz]

Hi @barjabeen12, thanks for open the Issue.

Can you share a peace of code and the literal errors you are getting. Ideally, mind creating a minimal reproduction in a sandbox in order to allow others to debug your use-case and try to find a solution? Thanks!

[barjabeen12]

@elrumordelaluz Thanks for the quick response, i just updated my comment above.

[elrumordelaluz]

what version of react-scripts are you using?

did you tried also making a rm -rf node_modules yarn.lock package-lock.json before a new install?

[barjabeen12]

yes i did removed the node-modules and lock files before. i am using currently react-scripts 4.0.1 ah, can't upgrade react-scripts due to other dependencies, any other work around?

[elrumordelaluz]

I am sorry, but as all the SO posts and related point is needed to upgrade into ˆ5. Any input super welcome however.

[barjabeen12]

update: This issue was coming specifically while import tourProvider from @reactour/tour. i just imported import Tour from 'reactour' working fine now.

[elrumordelaluz]

What version of reactour are you using?

[barjabeen12]

i am using 1.18.7 rn.

[elrumordelaluz]

did you switched version?

I don't understand this in case you were using v1 before:

import { TourProvider } from "@reactour/tour"

Just in case, v1 docs

[michelonsouza]

I'm having the same problem, I just import the TourProvider and this error happens... react-scripts: 4.0.1

[elrumordelaluz]

I'm having the same problem, I just import the TourProvider and this error happens... react-scripts: 4.0.1

Which version of reactour?

[michelonsouza]

I'm using latest version

[elrumordelaluz]

Can't you upgrade react-scripts into ^5?

[michelonsouza]

Unfortunately not... same problem with dependencies... 😭

[michelonsouza]

In this case, what do you advise me to do?

[elrumordelaluz]

I created this sandbox which is using @reactour/tour@3.1.6 and react-scripts@4.0.1 to investigate, but everything seems to work as expected.

Can you fork and modify this sandbox in order to mirror what you are doing? Thanks!

[hglowiak2022]

I'm having the same issue, react-scripts at 4.0.3, "@reactour/tour" at ^3.1.6 - I did it using simple implementation as you did.

[barjabeen12]

Hey everyone! So basically what i did was avoided using provider from reactour/tour and imported the Tour directly from reactour. its working for me.

[hglowiak2022]

Hey everyone! So basically what i did was avoided using provider from reactour/tour and imported the Tour directly from reactour. Idk how it worked but yeah its working for me.

are you able to use the hook to control it?

[barjabeen12]

Yes, i can. Further i will share a sandbox link in a while with implementation.

[elrumordelaluz]

I'm having the same issue, react-scripts at 4.0.3, "@reactour/tour" at ^3.1.6 - I did it using simple implementation as you did.

mind sharing a codesandbox? thanks

[barjabeen12]

Hey, here is the simple implementation how i did it. codesandbox

[elrumordelaluz]

Thank you @barjabeen12, however seems that you are using the v1 or reactour, while @hglowiak2022 seems to have this issue using the lasts versions of @reactour/tour.

Keep in mind that v1 doesn't make use of the Provider, and the docs are in a different location.

[barjabeen12]

yes that's what i was saying actually, i avoided using the latest because of this same issue.

[fauzanrh]

for someone using react-scripts 4.

using webpack configuratior like Craco:

webpack: {
    configure: (webpackConfig) => {
      webpackConfig.module.rules.push({
        test: /\.mjs$/,
        include: /node_modules/,
        type: "javascript/auto"
      });
      return webpackConfig;
    }

[Joel-Aundu]

hi @elrumordelaluz @fauzanrh @barjabeen12 @michelonsouza @hglowiak2022

It's my first time using react tour, and I am getting the following error node_modules/@reactour/tour/dist/index.mjs Can't import the named export 'Mask' from non EcmaScript module (only default export is available)

I am using, "react-scripts": "4.0.3", "react-router": "^5.2.0", "react-router-dom": "^5.2.0", "react": "^17.0.2" and TailwindCSS to style my application, after changing my postcss file as was advised in some links I was looking for help. my application lost all the styles.

Can you please assist me

[fauzanrh]

hi @elrumordelaluz @fauzanrh @barjabeen12 @michelonsouza @hglowiak2022

It's my first time using react tour, and I am getting the following error node_modules/@reactour/tour/dist/index.mjs Can't import the named export 'Mask' from non EcmaScript module (only default export is available)

I am using, "react-scripts": "4.0.3", "react-router": "^5.2.0", "react-router-dom": "^5.2.0", "react": "^17.0.2" and TailwindCSS to style my application, after changing my postcss file as was advised in some links I was looking for help. my application lost all the styles.

Can you please assist me

"Hello Joel, for react-scripts version 4.0.3, which is the same version I am currently using, you will need to make some adjustments to the Webpack configuration within Create React App (CRA). You can find more information on this in the following link: https://github.com/elrumordelaluz/reactour/issues/512#issuecomment-1314836667. Keep in mind that while CRA utilizes Webpack, configuring it without ejecting react-scripts can be difficult. You may want to consider using a tool like CRACO or react-app-rewired to help with this process."

if you decide to use CRACO, you will have a craco.config.js file like this:

// craco.config.js
module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      webpackConfig.module.rules.push({
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
      });
      return webpackConfig;
    },
  },
};

[Joel-Aundu]

hi @elrumordelaluz @fauzanrh @barjabeen12 @michelonsouza @hglowiak2022 It's my first time using react tour, and I am getting the following error node_modules/@reactour/tour/dist/index.mjs Can't import the named export 'Mask' from non EcmaScript module (only default export is available) I am using, "react-scripts": "4.0.3", "react-router": "^5.2.0", "react-router-dom": "^5.2.0", "react": "^17.0.2" and TailwindCSS to style my application, after changing my postcss file as was advised in some links I was looking for help. my application lost all the styles. Can you please assist me

"Hello Joel, for react-scripts version 4.0.3, which is the same version I am currently using, you will need to make some adjustments to the Webpack configuration within Create React App (CRA). You can find more information on this in the following link: #512 (comment). Keep in mind that while CRA utilizes Webpack, configuring it without ejecting react-scripts can be difficult. You may want to consider using a tool like CRACO or react-app-rewired to help with this process."

if you decide to use CRACO, you will have a craco.config.js file like this:

// craco.config.js
module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      webpackConfig.module.rules.push({
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
      });
      return webpackConfig;
    },
  },
};

@fauzanrh, Thank you so much for the response, I am using CRACO and here is how my craco.config.js:module.exports = { style: { postcss: { plugins: [ require('tailwindcss'), require('autoprefixer'), ], }, }, }

I am styling my application using tailwindCSS

[fauzanrh]

sure @Joel-Aundu , in that case, your config would be:

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      webpackConfig.module.rules.push({
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
      });
      return webpackConfig;
    },
  },
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
};

[Joel-Aundu]

sure @Joel-Aundu , in that case, your config would be:

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      webpackConfig.module.rules.push({
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
      });
      return webpackConfig;
    },
  },
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
};

Thank you @fauzanrh , I am giving it a try now.

Would you advise me to upgrade my React-script and other react dependencies or is it fine to maintain the version I am using?