kristerkari
commented
6 months ago Thanks! Yeah newest Expo version (50) is not supported yet. I'll need to have a look at fixing that.
Open vivtung opened 6 months ago
kristerkari
commented
6 months ago Thanks! Yeah newest Expo version (50) is not supported yet. I'll need to have a look at fixing that.
25juan
commented
6 months ago Excuse me, have you solved it now?
kristerkari
commented
5 months ago @25juan sorry, not yet. I'll try to remember to have a look at it this weekend.
The fix itself is not that complicated, it's just that the transformer path that Expo uses is a custom one: https://github.com/kristerkari/react-native-svg-transformer/blob/master/index.js#L14
carlos-lao
commented
5 months ago I wanted to follow up on whether this has been fixed.
chRohowski
commented
4 months ago I am experiencing the same issue - is there any fix yet?
my metro.config.js might by off though (tried both sassTransformerPath and sassTransformer):
const { getDefaultConfig } = require('expo/metro-config');
const config = getDefaultConfig(__dirname);
config.transformer = {
...config.transformer,
babelTransformerPath: require.resolve('react-native-svg-transformer'),
sassTransformerPath: require.resolve('react-native-sass-transformer'),
};
config.resolver = {
...config.resolver,
assetExts: config.resolver.assetExts.filter((ext) => ext !== 'svg'),
sourceExts: [...config.resolver.sourceExts, 'scss', 'sass'],
};
module.exports = config;
Sorry, I know that there are many that have been waiting for the update, but I haven't had time to look at it yet.
I want to cleanup the code for the transformer at the same time when adding the Expo support, which needs me to do a bit of testing using a React Native app together with the transformer. I'll try to find some time soon to fixing this.
kristerkari
commented
4 months ago This should be fixed in the newest 3.0.0 version. Please let me know if you are still facing any problems after updating.
https://github.com/kristerkari/react-native-sass-transformer/releases/tag/v3.0.0
Jankku
commented
4 months ago Hello, I haven't managed to get the latest 3.0.0 version working with Expo v50. No errors, scss styles are still an empty object.
I made a minimal demo and tested it on Android emulator: https://github.com/Jankku/expo-rnst
kristerkari
commented
4 months ago I also quickly tried the new version with Expo 50, and it just threw some weird internal error.
I have to try to figure out why it's failing. Thanks for the repro, I'll have a look at it too!
kristerkari
commented
3 months ago I had a bit deeper look into this problem, and the reason that Expo 50/51 is not working seems to be because they are doing some custom handling for CSS and Sass files for Web in their custom transformer: https://github.com/expo/expo/blob/main/packages/%40expo/metro-config/build/transform-worker/transform-worker.js#L173-L178
I have not yet found a fix, but at least I now know why it's happening.
ryskin
commented
3 months ago @kristerkari still have
iyosayi0x
commented
2 months ago @kristerkari
I was able to come up with a tempoary solution for sdk 51 & 50
I removed all the css processing that was done and ended up with this
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.transform = void 0;
/**
* Copyright 2023-present 650 Industries (Expo). All rights reserved.
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
const worker = __importStar(require("@expo/metro-config/build/transform-worker/metro-transform-worker"));
async function transform(config, projectRoot, filename, data, options) {
const environment = options.customTransformOptions?.environment;
const isClientEnvironment = environment !== 'node' && environment !== 'react-server';
if (isClientEnvironment &&
(filename.match(new RegExp(`^app/\\+html(\\.${options.platform})?\\.([tj]sx?|[cm]js)?$`)) ||
filename.match(/\+api(\.(native|ios|android|web))?\.[tj]sx?$/))) {
return worker.transform(config, projectRoot, filename, !options.minify
? Buffer.from('"> The server-only file was removed from the client JS bundle by Expo CLI."')
: Buffer.from(''), options);
}
if (isClientEnvironment &&
!filename.match(/\/node_modules\//) &&
filename.match(/\+api(\.(native|ios|android|web))?\.[tj]sx?$/)) {
return worker.transform(config, projectRoot, filename, Buffer.from(''), options);
}
return worker.transform(config, projectRoot, filename, data, options);
}
exports.transform = transform;
/**
* A custom Metro transformer that adds support for processing Expo-specific bundler features.
*/
module.exports = {
...worker,
transform,
};
//# sourceMappingURL=transform-worker.js.mapconst { getDefaultConfig } = require('expo/metro-config');
const config = getDefaultConfig(__dirname, {
isCSSEnabled: true,
});
config.transformerPath = require.resolve('./custom-transformer')
config.transformer.babelTransformerPath = require.resolve("react-native-sass-transformer")
config.transformer.assetPlugins = ['expo-asset/tools/hashAssetFiles'];
config.resolver.assetExts = [...config.resolver.assetExts, 'ttf'];
config.resolver.sourceExts = [...config.resolver.sourceExts, 'scss', 'sass'];
module.exports = config;
Thanks @iyosayi0x !
Here's a slightly cleaned up version of your workaround:
const worker = require("@expo/metro-config/build/transform-worker/metro-transform-worker.js");
async function transform(config, projectRoot, filename, data, options) {
const environment = options.customTransformOptions?.environment;
const isClientEnvironment =
environment !== "node" && environment !== "react-server";
if (
isClientEnvironment &&
(filename.match(
new RegExp(`^app/\\+html(\\.${options.platform})?\\.([tj]sx?|[cm]js)?$`)
) ||
filename.match(/\+api(\.(native|ios|android|web))?\.[tj]sx?$/))
) {
return worker.transform(
config,
projectRoot,
filename,
!options.minify
? Buffer.from(
'"> The server-only file was removed from the client JS bundle by Expo CLI."'
)
: Buffer.from(""),
options
);
}
if (
isClientEnvironment &&
!filename.match(/\/node_modules\//) &&
filename.match(/\+api(\.(native|ios|android|web))?\.[tj]sx?$/)
) {
return worker.transform(
config,
projectRoot,
filename,
Buffer.from(""),
options
);
}
return worker.transform(config, projectRoot, filename, data, options);
}
module.exports = transform;
module.exports = {
...worker,
transform,
};
const { getDefaultConfig } = require("expo/metro-config");
module.exports = (() => {
const config = getDefaultConfig(__dirname);
const { transformer } = config;
return {
...config,
transformerPath: require.resolve("./transform-worker.js"),
transformer: {
...transformer,
babelTransformerPath: require.resolve("react-native-sass-transformer"),
},
};
})();
I am importing the styles in the following way but when I
console.log(styles), it is returning{}import styles from '#/screens/auth/SignIn.scss';I have attached my files.
metro.config.js
babel.config.js
app.json
package.json