react-native-skia
react-native-skia copied to clipboard
Shopify
Stuck/froze on "Starting the development server..."
Description
I want to run skia on react native web. I use config-overrides.js to configure skia with webpack. When I run react native web it freezes with the console output: "Starting the development server..."
Version
0.1.197 and 0.1.202
Steps to reproduce
- config-overrides.js:
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
module.exports = function override(config, env) {
console.log('override webpack with config-overrides.js');
const path = require('path');
const appDirectory = path.resolve(__dirname);
console.log('appDirectory:' + appDirectory);
config.module.rules.push({
test: /\.js$/,
include: [
path.resolve(appDirectory, 'index.js'),
path.resolve(appDirectory, 'src'),
path.resolve(appDirectory, 'node_modules'),
],
exclude:
/node_modules[/\\](?!((react-native-vector-icons)|react-native-keyboard-aware-scroll-view)([/\\]|$))/,
//exclude: /node_modules[/\\](?!react-native-vector-icons)/,
use: {
loader: 'babel-loader',
options: {
// Disable reading babel configuration
babelrc: false,
configFile: false,
// The configuration for compilation
presets: [
['@babel/preset-env', {corejs: '3.21.1', useBuiltIns: 'usage'}],
'@babel/preset-react',
'@babel/preset-flow',
'@babel/preset-typescript',
],
plugins: [
'@babel/plugin-proposal-class-properties',
'@babel/plugin-proposal-object-rest-spread',
],
},
},
});
var WebpackObfuscator = require('webpack-obfuscator');
config.module.rules.push({
test: /\.js$/,
exclude: /node_modules/,
//exclude: [path.resolve(__dirname, 'excluded_file_name.js')],
enforce: 'post',
use: {
loader: WebpackObfuscator.loader,
options: {
rotateStringArray: true,
},
},
});
//SKIA
// 1. Make the wasm file available to the build system
config.plugins.push(
new (class CopySkiaPlugin {
apply(compiler) {
compiler.hooks.thisCompilation.tap('AddSkiaPlugin', compilation => {
compilation.hooks.processAssets.tapPromise(
{
name: 'copy-skia',
stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
},
async () => {
const src = require.resolve('canvaskit-wasm/bin/full/canvaskit.wasm');
if (compilation.getAsset(src)) {
// Skip emitting the asset again because it's immutable
return;
}
compilation.emitAsset(
'/canvaskit.wasm',
new sources.RawSource(await fs.promises.readFile(src)),
);
},
);
});
}
})(),
);
// 2. Polyfill fs and path module from node
config.plugins.push(new NodePolyfillPlugin());
// 3. Avoid warning if reanimated is not present
config.externals = {
...config.externals,
'react-native-reanimated': "require('react-native-reanimated')",
'react-native-reanimated/package.json': "require('react-native-reanimated/package.json')",
};
config.module.rules.push({
test: /node_modules\/react-native-image-picker\/.*\.ts$/,
use: 'ts-loader',
});
config.module.rules.push({
test: /node_modules\/react-native-image-picker\/.*\.js$/,
use: 'babel-loader',
});
return config;
};
- package.json:
{
"name": "appname",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios --simulator 'iPhone X' ",
"start": "react-native start",
"web": "react-app-rewired start",react-app-rewired build",
"test": "jest",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx",
},
"dependencies": {
"@babel/plugin-proposal-export-namespace-from": "^7.18.9",
"@material-ui/core": "^4.12.4",
"@material-ui/icons": "^4.11.3",
"@mdi/js": "^7.0.96",
"@shopify/react-native-skia": "^0.1.202",
"expo": "^48.0.6",
"obfuscator-io-metro-plugin": "^2.1.1",
"react": "18.1.0",
"react-art": "^17.0.2",
"react-dom": "^17.0.2",
"react-i18next": "^11.18.3",
"react-native": "0.70.6",
"react-native-asset": "^2.0.1",
"react-native-cn-quill": "^0.7.17",
"react-native-eject": "^0.2.0",
"react-native-expandable-fab": "^1.1.2",
"react-native-fast-image": "^8.6.3",
"react-native-htmlview": "^0.16.0",
"react-native-localize": "^2.2.2",
"react-native-paper": "^5.10.1",
"react-native-paper-dates": "^0.15.1",
"react-native-pell-rich-editor": "^1.8.8",
"react-native-reanimated": "^3.4.2",
"react-native-rsa": "^0.0.3",
"react-native-safe-area-context": "^4.5.0",
"react-native-screens": "^3.13.1",
"react-native-splash-screen": "^3.3.0",
"react-native-svg": "^13.10.0",
"react-native-tab-view": "^3.1.1",
"react-native-uuid": "^2.0.1",
"react-native-web": "^0.18.12",
"react-native-web-linear-gradient": "^1.1.2",
"react-native-webview": "^12.0.2",
"react-quill": "^2.0.0",
"react-redux": "^7.2.8",
"rn-fetch-blob": "^0.12.0",
"ts-debounce": "^4.0.0",
},
"devDependencies": {
"@babel/core": "^7.17.5",
"@babel/plugin-proposal-class-properties": "^7.16.7",
"@babel/plugin-proposal-object-rest-spread": "^7.17.3",
"@babel/preset-env": "^7.20.2",
"@babel/preset-flow": "^7.16.7",
"@babel/preset-react": "^7.16.7",
"@babel/preset-typescript": "^7.16.7",
"@babel/runtime": "^7.17.2",
"@react-native-community/eslint-config": "^3.0.1",
"@types/d3": "^7.4.0",
"@types/jest": "^27.4.1",
"@types/react-native": "^0.67.2",
"@types/react-native-vector-icons": "^6.4.10",
"@types/react-test-renderer": "^17.0.1",
"babel-jest": "^27.5.1",
"babel-loader": "^9.1.2",
"babel-plugin-module-resolver": "^5.0.0",
"cross-env": "^7.0.3",
"dotenv": "^16.0.3",
"eslint": "^7.32.0",
"graphql": "^16.6.0",
"gts": "^3.1.0",
"javascript-obfuscator": "^4.0.1",
"jest": "^27.5.1",
"metro-react-native-babel-preset": "^0.69.0",
"node-polyfill-webpack-plugin": "^2.0.1",
"react-app-rewired": "^2.2.1",
"react-native-pager-view": "^5.4.25",
"react-scripts": "^5.0.1",
"react-test-renderer": "17.0.2",
"serve": "^14.1.1",
"ts-loader": "^9.4.2",
"typescript": "^4.6.2",
"webpack-obfuscator": "^3.5.1"
},
"resolutions": {
"@types/react": "^17"
},
"jest": {
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
npx react-app-rewired start
Snack, code example, screenshot, or link to a repository
gets stuck on config-overrides.js before it can run any code op the project
