EXPO Web Build source map Warnings

wderezin commented 1 year ago

🐛 Bug Report

When running UI-Kitten as an expo project, are getting 125 warning when doing web build. All are similar to the the following:

WARNING in ./node_modules/@eva-design/processor/js/src/service/style/index.js Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to parse source map from '/workspaces/expo-kitten-issue/BlankTS/node_modules/packages/processor/js/src/service/style/index.ts' file: Error: ENOENT: no such file or directory, open '/workspaces/expo-kitten-issue/BlankTS/node_modules/packages/processor/js/src/service/style/index.ts'

Note, these are warning and the application does build and run.

To Reproduce

Reproduce Steps

From referenced repo README.md

Setup Expo TS project

npx create-expo-app -t expo-template-blank-typescript BlankTS
cd BlankTS/
npx expo install react-native-web@~0.18.10 react-dom@18.2.0 @expo/webpack-config@^18.0.1

Verify working for web
```
npx expo start --web
```

Install UI-Kitten Manual Steps\

npm i @ui-kitten/components @eva-design/eva
expo install react-native-svg@9.13.6

Update app.json If you use Expo for Web, you need to add the following underneath the "web" key in app.json "build": { "babel": { "include": [ "@ui-kitten/components" ] } }
Start project and see error
```
npx expo start --web
```

Expected behavior

No warnings related to source map.

Link to runnable example or repository (highly encouraged)

https://github.com/wderezin/expo-kitten-issue.git

UI Kitten and Eva version

├── @babel/core@7.21.8 ├── @eva-design/eva@2.2.0 ├── @expo/webpack-config@18.0.4 ├── @types/react@18.0.38 ├── @ui-kitten/components@5.3.1 ├── expo-status-bar@1.4.4 ├── expo@48.0.17 ├── react-dom@18.2.0 ├── react-native-svg@13.4.0 ├── react-native-web@0.18.12 ├── react-native@0.71.8 ├── react@18.2.0 └── typescript@4.9.5

Environment information

siarheipashkevich commented 1 year ago

Maybe try to clear cache: npx expo start --web -c

wderezin commented 1 year ago

Maybe try to clear cache: npx expo start --web -c

Just tried that, but no luck.

wderezin commented 1 year ago

Did some more digging, and the root of the problem is the source files are not included in the @ui-kitten/components module.

Since they are warnings, I did find a way to suppress them. In webpack.config.js add the following: This is also in the demo repo https://github.com/wderezin/expo-kitten-issue/blob/main/BlankTS/webpack.config.js

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

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

    // Ignore source maps in node_modules
    // Idea from: https://stackoverflow.com/questions/63195843/webpack-module-warning-failed-to-parse-source-map-from-data-url
    // Issue: https://github.com/akveo/react-native-ui-kitten/issues/1745
    if (!config.ignoreWarnings) {
        config.ignoreWarnings = []
    }
    if (!config.module.rules) {
        config.module.rules = [];
    }

    config.ignoreWarnings.push(/Failed to parse source map/)
    config.module.rules.push(
        {
            test: /\.js$/,
            enforce: "pre",
            use: ["source-map-loader"],
        },
    );

    return config;
};

akveo / react-native-ui-kitten