reactour: Can't Import Mask from ECMA

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;
    },
  },
};

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;
    }

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.

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

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.

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

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