Comments (5)
Ok this is something we have to address in Re.Pack. The AssetPlugin
is capturing and coverting .svg
to JavaScript and this JavaScript is now passed to @svgr/webpack
, so I need to add configuration options to AssetPlugin
to prevent AssetPlugin
from processing SVGs.
from repack.
Hey @ngnm1009 Zamotany is no longer maintaining this repo. To avoid confusion for future readers of the issues please create a new issue and attach a minimal reproduction repository in which the problem can be reliably reproduced.
Thank you :)
from repack.
I've had good success with @svgr/webpack without any issues specified above.
from repack.
I also remember @svgr/webpack
was working fine for me, maybe it's a configuration issue - that's why I want to create a guide how to add SVG support with @svgr/webpack
to the documentation.
from repack.
Hi @zamotany . I tried using react-native-svg but I facing issue : " View config getter callback for component RNSVGRect
must be a function (received undefined
)"
my Svg file :
import {widthLize} from 'pmn-rn-component';
import React from 'react';
import Svg, {Path, Rect} from 'react-native-svg';
type Props = {
width?: number;
height?: number;
color?: string;
};
const IconFB = ({width = 41, height = 40, color = '#3B5998'}: Props) => {
return (
<Svg
width={widthLize(width)}
height={widthLize(height)}
viewBox="0 0 41 40"
fill="none">
<Path
d="M0.5 20C0.5 8.9543 9.4543 0 20.5 0C31.5457 0 40.5 8.9543 40.5 20C40.5 31.0457 31.5457 40 20.5 40C9.4543 40 0.5 31.0457 0.5 20Z"
fill={color}
/>
<Rect x="0.5" width="40" height="40" rx="20" fill={color} />
<Path
d="M22.8145 31V19.9987H26.0687L26.5 16.2076H22.8145L22.82 14.3101C22.82 13.3213 22.9207 12.7915 24.4426 12.7915H26.477V9H23.2223C19.3129 9 17.9369 10.8391 17.9369 13.9319V16.208H15.5V19.9991H17.9369V31H22.8145Z"
fill="white"
/>
</Svg>
);
};
export default IconFB;
webpack.config mini app:
import path from 'path';
import TerserPlugin from 'terser-webpack-plugin';
import * as Repack from '@callstack/repack';
import {deps} from '../../shared/dependencies.mjs';
/**
* More documentation, installation, usage, motivation and differences with Metro is available at:
* https://github.com/callstack/repack/blob/main/README.md
*
* The API documentation for the functions and plugins used in this file is available at:
* https://re-pack.netlify.app/
*/
/**
* Webpack configuration.
* You can also export a static object or a function returning a Promise.
*
* @param env Environment options passed from either Webpack CLI or React Native CLI
* when running with `react-native start/bundle`.
*/
export default env => {
const {
mode = 'development',
context = Repack.getDirname(import.meta.url),
entry = './index.js',
platform = process.env.PLATFORM,
minimize = mode === 'production',
devServer = undefined,
bundleFilename = undefined,
sourceMapFilename = undefined,
assetsPath = undefined,
reactNativePath = new URL('./node_modules/react-native', import.meta.url)
.pathname,
} = env;
const dirname = Repack.getDirname(import.meta.url);
if (!platform) {
throw new Error('Missing platform');
}
/**
* Using Module Federation might require disabling hmr.
* Uncomment below to set `devServer.hmr` to `false`.
*
* Keep in mind that `devServer` object is not available
* when running `webpack-bundle` command. Be sure
* to check its value to avoid accessing undefined value,
* otherwise an error might occur.
*/
// if (devServer) {
// devServer.hmr = false;
// }
/**
* Depending on your Babel configuration you might want to keep it.
* If you don't use `env` in your Babel config, you can remove it.
*
* Keep in mind that if you remove it you should set `BABEL_ENV` or `NODE_ENV`
* to `development` or `production`. Otherwise your production code might be compiled with
* in development mode by Babel.
*/
process.env.BABEL_ENV = mode;
return {
mode,
/**
* This should be always `false`, since the Source Map configuration is done
* by `SourceMapDevToolPlugin`.
*/
devtool: false,
context,
/**
* `getInitializationEntries` will return necessary entries with setup and initialization code.
* If you don't want to use Hot Module Replacement, set `hmr` option to `false`. By default,
* HMR will be enabled in development mode.
*/
entry: [
...Repack.getInitializationEntries(reactNativePath, {
hmr: devServer && devServer.hmr,
}),
entry,
],
resolve: {
/**
* `getResolveOptions` returns additional resolution configuration for React Native.
* If it's removed, you won't be able to use `<file>.<platform>.<ext>` (eg: `file.ios.js`)
* convention and some 3rd-party libraries that specify `react-native` field
* in their `package.json` might not work correctly.
*/
...Repack.getResolveOptions(platform),
/**
* Uncomment this to ensure all `react-native*` imports will resolve to the same React Native
* dependency. You might need it when using workspaces/monorepos or unconventional project
* structure. For simple/typical project you won't need it.
*/
// alias: {
// 'react-native': reactNativePath,
// },
},
/**
* Configures output.
* It's recommended to leave it as it is unless you know what you're doing.
* By default Webpack will emit files into the directory specified under `path`. In order for the
* React Native app use them when bundling the `.ipa`/`.apk`, they need to be copied over with
* `Repack.OutputPlugin`, which is configured by default inside `Repack.RepackPlugin`.
*/
output: {
clean: true,
hashFunction: 'xxhash64',
path: path.join(dirname, 'build/generated', platform),
filename: 'index.bundle',
chunkFilename: '[name].chunk.bundle',
publicPath: Repack.getPublicPath({platform, devServer}),
},
/**
* Configures optimization of the built bundle.
*/
optimization: {
/** Enables minification based on values passed from React Native CLI or from fallback. */
minimize,
/** Configure minimizer to process the bundle. */
minimizer: [
new TerserPlugin({
test: /\.(js)?bundle(\?.*)?$/i,
/**
* Prevents emitting text file with comments, licenses etc.
* If you want to gather in-file licenses, feel free to remove this line or configure it
* differently.
*/
extractComments: false,
terserOptions: {
format: {
comments: false,
},
},
}),
],
chunkIds: 'named',
},
module: {
/**
* This rule will process all React Native related dependencies with Babel.
* If you have a 3rd-party dependency that you need to transpile, you can add it to the
* `include` list.
*
* You can also enable persistent caching with `cacheDirectory` - please refer to:
* https://github.com/babel/babel-loader#options
*/
rules: [
{
test: /\.[jt]sx?$/,
include: [
/node_modules(.*[/\\])+react\//,
/node_modules(.*[/\\])+react-native/,
/node_modules(.*[/\\])+@react-native/,
/node_modules(.*[/\\])+react-freeze/,
/node_modules(.*[/\\])+@react-navigation/,
/node_modules(.*[/\\])+@react-native-community/,
/node_modules(.*[/\\])+@expo/,
/node_modules(.*[/\\])+pretty-format/,
/node_modules(.*[/\\])+metro/,
/node_modules(.*[/\\])+abort-controller/,
/node_modules(.*[/\\])+@callstack\/repack/,
/node_modules(.*[/\\])+pmn-rn-component/,
/node_modules(.*[/\\])+react-native-fast-image/,
/node_modules(.*[/\\])+react-native-gesture-handler/,
/node_modules(.*[/\\])+react-native-reanimated/,
/node_modules(.*[/\\])+react-native-paper/,
/node_modules(.*[/\\])+react-native-safe-area-context/,
/node_modules(.*[/\\])+react-native-screens/,
/node_modules(.*[/\\])+react-native-tab-view/,
/node_modules(.*[/\\])+react-native-vector-icons/,
/node_modules(.*[/\\])+react-native-keyboard-aware-scroll-view/,
/node_modules(.*[/\\])+react-native-reanimated-carousel/,
/node_modules(.*[/\\])+react-native-svg/,
],
use: 'babel-loader',
},
/**
* Here you can adjust loader that will process your files.
*
* You can also enable persistent caching with `cacheDirectory` - please refer to:
* https://github.com/babel/babel-loader#options
*/
{
test: /\.[jt]sx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
/** Add React Refresh transform only when HMR is enabled. */
plugins:
devServer && devServer.hmr
? ['module:react-refresh/babel']
: undefined,
},
},
},
/**
* This loader handles all static assets (images, video, audio and others), so that you can
* use (reference) them inside your application.
*
* If you wan to handle specific asset type manually, filter out the extension
* from `ASSET_EXTENSIONS`, for example:
* ```
* Repack.ASSET_EXTENSIONS.filter((ext) => ext !== 'svg')
* ```
*/
{
test: Repack.getAssetExtensionsRegExp(
Repack.ASSET_EXTENSIONS.filter(ext => ext !== 'svg'),
),
// exclude: [
// path.join(dirname, 'src/assets/images'),
// path.join(dirname, 'src/assets/icons'),
// ],
use: {
loader: '@callstack/repack/assets-loader',
options: {
platform,
devServerEnabled: Boolean(devServer),
/**
* Defines which assets are scalable - which assets can have
* scale suffixes: `@1x`, `@2x` and so on.
* By default all images are scalable.
*/
scalableAssetExtensions: Repack.SCALABLE_ASSETS,
// remote: {
// enabled: true,
// publicPath: 'http://localhost:9999',
// },
},
},
},
// {
// test: /\.[jt]sx?$/,
// include: [/src\/assets\/icons\/IconFB/],
// use: {
// loader: '@svgr/webpack',
// options: {
// native: true,
// dimensions: false,
// },
// },
// },
{
test: /\.svg$/,
use: [
{
loader: '@svgr/webpack',
options: {
native: true,
dimensions: false,
},
},
],
},
],
},
plugins: [
/**
* Configure other required and additional plugins to make the bundle
* work in React Native and provide good development experience with
* sensible defaults.
*
* `Repack.RepackPlugin` provides some degree of customization, but if you
* need more control, you can replace `Repack.RepackPlugin` with plugins
* from `Repack.plugins`.
*/
new Repack.RepackPlugin({
context,
mode,
platform,
devServer,
output: {
bundleFilename,
sourceMapFilename,
assetsPath,
},
}),
new Repack.plugins.ModuleFederationPlugin({
name: 'myVideo',
exposes: {
'./App': './App.tsx',
},
shared: deps,
}),
],
};
};
from repack.
Related Issues (20)
- Do containers that are not deployed independently need to set eager to true for react and react-native dependencies? HOT 4
- Happy for help: Getting the error "File artifacts/index.bundle for ios not found in compilation assets" HOT 11
- Question: do I need to add "ChunksToHermesBytecodePlugin" plugin? HOT 7
- Getting error "ReferenceError: Property 'CssSyntaxError' doesn't exist" while using styled-component. HOT 3
- [email protected] @callstack/repack/commands error HOT 3
- Can someone give me idea or tutorial how can i deploy my webpack bundle to local servers HOT 1
- Android Error when navigate Between MFEs HOT 9
- cannot load mini app(Module Federation) when verifyScriptSignature = 'strict' HOT 8
- Can't find variable: __wepack_require__ in ScriptManager.js HOT 10
- Unable to load script. Make sure you're either running Metro HOT 3
- Facing issue while implementing Offline Bundling. HOT 5
- Error in bundling micro apps with react-native-svg packages HOT 3
- [RFC] Override `start` command in `react-native.config.js` HOT 8
- Unhandled error in Webpack Compiler when doing `rpm run ios` HOT 2
- Cannot Resole React Hook Form correctly HOT 7
- repack monorepo deployment help
- Android is crashing when "onMessage" props is accessed in "react-native-webview" library HOT 1
- [RFC] sync API HOT 10
- Improve types for `prefetchScript` and `loadScript` HOT 3
- Is it possible to load a remote module before it is requested by the user?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from repack.