Styjun

I am also using babel 7 and webpack 4 in my project. (I am using react-native-web and native-base-web; to run my react code on the web)

I am facing an issue where the aliases in module resolver are not applied to inside the node_modules directory. (same is true with other plugins, they are not applied in node_modules directory)

In webpack, I have explicitly specified these modules to be included with the babel-loader. (see code below)

I am currently using a workaround - where I have installed these modules outside of node_modules directory. (when they are installed outside of the root node_modules folder, my babel config works on them.)

It would be good to know what could be wrong. Below are more details (snippets of babel.config.js and webpack.config.js).

Code Snippets

Below is the list and versions of babel and webpack plugins I am using.

 "@babel/core": "^7.4.0",
 "@babel/plugin-proposal-class-properties": "^7.4.0",
 "@babel/plugin-proposal-decorators": "^7.4.0",
 "@babel/polyfill": "^7.4.0",
 "@babel/preset-flow": "^7.0.0",
 "@babel/runtime": "^7.4.2",
 "babel-core": "^7.0.0-bridge.0",
 "babel-jest": "^24.5.0",
 "babel-loader": "^8.0.5",
 "babel-plugin-module-resolver": "^3.2.0",
 "babel-plugin-react-native-web": "^0.11.2",
 "babel-plugin-transform-inline-environment-variables": "^0.4.3",
 "metro-react-native-babel-preset": "^0.53.1",
...
 "webpack": "^4.29.6",
 "webpack-cli": "^3.3.0",
 "webpack-dev-server": "^3.2.1",

My babel config is placed in babel.config.js in the root folder. It is picked up when I run webpack.

module.exports = function(api) 
 api.cache(true);

 const presets = [
 "module:metro-react-native-babel-preset"
 ];

 const plugins = [
 "transform-inline-environment-variables",
 [
 "module-resolver", 
 "root": ["."],
 "extensions": [".web.js", ".js", ".json"],
 "alias": 
 "src": "./src",
 "platform": "./src/platforms/messenger",
 "react-navigation$": "@react-navigation/web",
 "native-base-shoutem-theme": "./src/platforms/messenger/theme/native-base-shoutem-theme",
 "@storybook/react-native": "@storybook/react",
 "react-native": "react-native-web",
 "native-base": "native-base-web",
 "react/lib/ReactNativePropRegistry": "react-native-web/dist/modules/ReactNativePropRegistry",
 
 
 ],
 ["react-native-web", "commonjs": true ],
 ["@babel/plugin-proposal-decorators", "legacy": true ],
 ["@babel/plugin-proposal-class-properties", "loose": true ],
 ];

 return 
 presets,
 plugins,
 

And my webpack config is as below. (file: web/.storybook/webpack.config.js)

'use strict';

Object.defineProperty(exports, '__esModule', 
 value: true
);

var _path = require('path');

var _path2 = _interopRequireDefault(_path);

var _webpack = require('webpack');

var _webpack2 = _interopRequireDefault(_webpack);

function _interopRequireDefault(obj) return obj && obj.__esModule ? obj : default: obj ; 

var managerEntry = process.env.DEV_BUILD ? _path2.default.resolve(__dirname, '../../src/client/manager') : _path2.default.resolve(__dirname, '../manager');

var config = 
 devtool: '#cheap-module-eval-source-map',
 entry: 
 manager: [managerEntry],
 preview: [_path2.default.resolve(__dirname, './error_enhancements'), 'webpack-hot-middleware/client']
 ,
 output: 
 path: _path2.default.join(__dirname, 'dist'),
 filename: '[name].bundle.js',
 publicPath: '/static/'
 ,
 plugins: [
 new _webpack2.default.HotModuleReplacementPlugin(),
 ],
 module: 
 rules: [
 jsx,
 png,
 
 test: /.scss$/,
 use: [
 "style-loader", // creates style nodes from JS strings
 "css-loader", // translates CSS into CommonJS
 "sass-loader" // compiles Sass to CSS, using Node Sass by default
 ]
 
 ]
 ,
 resolve: 
 extensions: ['.web.js', '.web.jsx', '.js', '.jsx', '.json'],
 "alias": 
 "react-native": "react-native-web",
 "native-base": "native-base-web",
 "react-native/Libraries/Renderer/ReactNativePropRegistry": "react-native-web/dist/modules/ReactNativePropRegistry",
 "react/lib/ReactNativePropRegistry": "react-native-web/dist/modules/ReactNativePropRegistry",
 
 
;

module.exports = config;