Field 'browser' doesn't contain a valid alias configuration #2095
Comments
This tells you that you're trying to bundle Read this documentation with the example of how to compile https://necolas.github.io/react-native-web/docs/multi-platform/#compiling-and-bundling |
|
@necolas please reopen, can you please give a clear answer ? alias works fine for but not for as there is no "Network" in exports. |
|
@fansilva1991 Hi Filipe, did you solve this issue on your side for RCTNetworking ? |
|
Same issue here with RCTNetworking, did you manage to solve it? |
|
+1 |
|
This may sound silly, but when I was looking for a solution to a similar question, I came across a simple article that gave the key to solving my problem. A great example of finding answers in the base. |
|
This might be helpful: storybookjs/storybook#6255 (comment) |
remove `react-native/Libraries/NewAppScreen` in `App.js` to fix [Field 'browser' doesn't contain a valid alias configuration](necolas/react-native-web#2095); use cross-env to let most package.json scripts can run on Windows; since DISABLE_ESLINT_PLUGIN=true in `npm run web` , then we can use any version of eslint, so use eslint@7 even can be used in nodejs 10 upgrade eslint from 6.5.1 to 7.8.1 to fix ESLint `Error: Failed to load plugin 'flowtype' declared in '.eslintrc.js » @react-native-community/eslint-config#overrides[0]': Cannot find module 'eslint/use-at-your-own-risk'` not upgrade eslint to ^8.4.1 to fix ESLint `TypeError: Module.createRequire is not a function` when using nodejs v10.15.3
|
no solutions? |
|
any solutions to this yet? stuck on the same problem with the "Network" folder not being in exports. |
|
For people asking about issues with the missing I only use It looks like I'm not an expert on this stuff, so maybe there is a better way to handle this, but here is my working file for reference (adjust as needed for your specific dependencies). The key updates to this file are:
// .storybook/main.ts
import type { StorybookConfig } from '@storybook/react-webpack5'
import * as path from 'path'
const config: StorybookConfig = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
{
name: '@storybook/addon-react-native-web',
options: {
modulesToTranspile: [
'@dripsy',
'dripsy',
'strict-event-emitter',
'@testing-library/jest-native',
'@testing-library/react-native',
],
modulesToAlias: { //modules without equivalent in react-native-web are aliased to identity-obj-proxy
"../../Utilities/Platform": "react-native-web/dist/exports/Platform",
"../Utilities/Platform": "react-native-web/dist/exports/Platform",
"./Platform": "react-native-web/dist/exports/Platform",
"../Utilities/BackHandler": "react-native-web/dist/exports/BackHandler",
"../Components/AccessibilityInfo/legacySendAccessibilityEvent": "identity-obj-proxy",
"../../Image/Image": "react-native-web/dist/exports/Image",
"./RCTAlertManager": "react-native-web/dist/exports/Alert",
"./RCTNetworking": "identity-obj-proxy",
"./BaseViewConfig": "identity-obj-proxy",
'../../StyleSheet/PlatformColorValueTypes': 'identity-obj-proxy',
'./PlatformColorValueTypes': 'identity-obj-proxy',
}
},
}
],
framework: {
name: '@storybook/react-webpack5',
options: {
builder: {
lazyCompilation: true,
}
},
},
staticDirs: [{ from: '../assets/fonts', to: 'fonts' }],
docs: {
autodocs: 'tag',
},
webpackFinal: config => { // custom config for storybook to work with react-native-web
return {
...config,
resolve: {
...config.resolve,
modules: [
path.resolve("./src"), ...config.resolve?.modules ?? [],
"../__webpack__", // stub modules that shouldn't be bundled
],
fallback: { // polyfill node modules
timers: false,
tty: false,
os: false,
http: false,
https: false,
zlib: false,
util: false,
stream: require.resolve("stream-browserify"),
constants: require.resolve("constants-browserify"),
...config.resolve?.fallback,
}
}
};
}
}
export default config// __webpack__/react-native-safe-area-context.js
import React from 'react'
export const useSafeAreaInsets = () => {
return {
top: 0,
right: 0,
bottom: 0,
left: 0,
}
}
const SafeAreaContext = React.createContext({
useSafeAreaInsets,
})
export default {
SafeAreaProvider: SafeAreaContext.Provider,
useSafeAreaInsets,
} |
The problem
While running:
I'm getting the following errors:
Which don't happen if remove the imports for NetInfo and Reactotron , but it is not a valid solution for us because we need to use it in the web and mobile versions.
How to reproduce
Steps to reproduce:
webpack serve --mode development --config webpack.config.jsin your application, with Reactotron or NetInfo installed.Expected behavior
The application should run without errors while importing Reactotron and NetInfo.
Environment (include versions). Did this work in previous versions?
"react-native-web": "^0.15.6","react": "17.0.1","react-native": "0.64.2","reactotron-react-native": "^5.0.0","@react-native-community/netinfo": "^6.0.0",webpack.config.js
The text was updated successfully, but these errors were encountered: