Styles are imported as empty object with RN 73 #106
Comments
vivtung
changed the title
|
Thanks! Yeah newest Expo version (50) is not supported yet. I'll need to have a look at fixing that. |
|
Excuse me, have you solved it now? |
|
@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: |
|
I wanted to follow up on whether this has been fixed. |
|
I am experiencing the same issue - is there any fix yet? my metro.config.js might by off though (tried both |
|
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. |
|
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 |
|
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: |
|
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! |
|
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: I have not yet found a fix, but at least I now know why it's happening. |
|
@kristerkari still have |
|
I was able to come up with a tempoary solution for sdk 51 & 50 Creating a custom transformer workerI 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.mapUpdate metro configconst { 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: transform-worker.jsconst 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,
};metro.config.jsconst { 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
The text was updated successfully, but these errors were encountered: