Crashes web build for expo

[bjornarhagen]

Expo cannot build web version when using this module. This is the error I get:

.../node_modules/@ptomasroos/react-native-multi-slider/MultiSlider.js 18:22
Module parse failed: Unexpected token (18:22)
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 class MultiSlider extends React.Component {
>   static defaultProps = {
|     values: [0],
|     onValuesChangeStart: () => {},

[bjornarhagen]

For some weird reason, if I download the ZIP of the same release version and put it in my project folder it works. But when I use the node_modules version, it doesn't work. So this works great as a temporary workaround, but should probably still be fixed.

[ptomasroos]

Ah thanks!

I will make sure to do a release then if its sorted out in the latest version of the code base?

[ptomasroos]

This seems to be similar, are you sure you're not missing on a babel plugin? https://github.com/styleguidist/react-styleguidist/issues/1513

[bjornarhagen]

That does indeed seem like the same issue. I installed metro-react-native-babel-preset and replaced babel-preset-expo with it in babel.config.js, but the error prevails. I also tried to add @babel/plugin-proposal-class-properties, but it still fails.

[nsbingham]

I'm running into the same issue. I'm using expo 39.0.2. Using the downloaded ZIP works in the expo web build, but throws the error below when trying to load on an Android emulator.

Unable to resolve "../../components/react-native-multi-slider/MultiSlider" from "src\screens\find-wizard-screens\find-wizard-prices.js"

[nsbingham]

@bjornarhagen I was able to get the NPM package running the expo web build by following the steps in this similar issue - https://github.com/akveo/react-native-ui-kitten/issues/996#issuecomment-645448007.

My webpack.config.js ended up looking like this:

const createExpoWebpackConfigAsync = require("@expo/webpack-config");

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(
    {
      ...env,
      babel: {
        dangerouslyAddModulePathsToTranspile: [
          "@ptomasroos/react-native-multi-slider",
        ],
      },
    },
    argv
  );
  return config;
};

[brunokiafuka]

@bjornarhagen I was able to get the NPM package running the expo web build by following the steps in this similar issue - akveo/react-native-ui-kitten#996 (comment).

My webpack.config.js ended up looking like this:

const createExpoWebpackConfigAsync = require("@expo/webpack-config");

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(
    {
      ...env,
      babel: {
        dangerouslyAddModulePathsToTranspile: [
          "@ptomasroos/react-native-multi-slider",
        ],
      },
    },
    argv
  );
  return config;
};

This worked for me 😅

[fabianschwarzfritz]

I do have the exact same issue but the webpack.config changes did not work for me.

Is there a workaround for this issue?

[bananemo]

@bjornarhagen I was able to get the NPM package running the expo web build by following the steps in this similar issue - akveo/react-native-ui-kitten#996 (comment).

My webpack.config.js ended up looking like this:

const createExpoWebpackConfigAsync = require("@expo/webpack-config");

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(
    {
      ...env,
      babel: {
        dangerouslyAddModulePathsToTranspile: [
          "@ptomasroos/react-native-multi-slider",
        ],
      },
    },
    argv
  );
  return config;
};

This works for me too! Thanks!