unable to run expo web app because of ESlint

Question

I'm developing an app for web and mobile so I'm using expo where if I run the app for android it works fine but when I want to run for web using yarn run web it showing an error.

Failed to compile.
/usr/local/lib/node_modules/expo-cli/node_modules/react-error-overlay/lib/index.js
Line 1: 'define' is not defined no-undef
Line 1: 'define' is not defined no-undef
Line 1: 'regeneratorRuntime' is not defined no-undef

I already installed and configured eslint-config-universe.and also tried with below config

"env": {
    "amd": true
},

.eslintrc.js

module.exports = {
extends: ["universe","universe/node", "universe/web","universe/native"],
};

package.json

"eslintConfig": {
    "extends": ["universe","universe/node", "universe/web","universe/native"]
}

so what is the actual config for eslint for expo web so I can run expo start --web without any eslint config error

score 0 · Answer 1 · answered Jul 22 '19 at 13:27

babel.config.js

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
  };
};

.eslintrc.json

{
  "env": {
    "node": true,
    "es6": true
  },
  "parser": "babel-eslint",
  "extends": "airbnb",
  "plugins": ["react", "jsx-a11y", "import"],
  "rules": {
    "react/jsx-filename-extension": ["off"],
    "linebreak-style": ["off"],
    "no-undef": ["error"],
    "react/sort-comp": ["off"],
    "react/prefer-stateless-function": ["off"],
    "import/named": 2,
    "import/namespace": 2,
    "import/default": 2,
    "import/export": 2,
    "import/no-extraneous-dependencies": [
      "error",
      { "devDependencies": ["**/*.test.js"] }
    ],
    "import/no-absolute-path": [2, { "esmodule": false, "commonjs": false, "amd": false }]
  },
  "settings" : {
    "import/resolver": {
      "node": {
        "paths": ["./src"]
      }
    }
  },
  "globals": {
    "it": 0,
    "expect": 0,
    "describe": 0,
    "navigator": 0
  }
}

score 0 · Answer 2 · answered Jul 23 '19 at 07:25

actually, it is Webpack issue as @FLGMwt describes.

You can work around this issue by running expo customize:web , selecting webpack, then overriding the webpack-config version to one before the eslit config was added:

yarn add -D @expo/webpack-config@0.5.19

Alternatively, run the yarn / npm command above and create a webpack.config.js file in the root of your project with the following content:

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

module.exports = async function(env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  // Customize the config before returning it.
  return config;
};

Which does the same as customize:web.

unable to run expo web app because of ESlint

2 Answers2