In our react app we have shared code between web and mobile (React Native).
Before Typescript it was okay to import it like this:import {fetchNotificationsSettingsFromLocalStorage} from '../helpers/notificationsSettingsStorage';
Even though we have two files at that location with suffixes - notificationsSettingsStorage.native.js and notificationsSettingsStorage.web.js.
Now we added TS-loader and it seems to not being able to resolve those.How do I fix it?
webpack.config.js:
module.exports = { module: { rules: [ { test: /\.(js|jsx|web\.js)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { configFile: false, presets: process.env.WDYR === 'true' ? ['@babel/preset-env', ['@babel/preset-react', { runtime: 'automatic', development: true, importSource: '@welldone-software/why-did-you-render', }, ], ] : [ ['@babel/preset-env', { targets: '>0.5%', }, ],'@babel/preset-react', ], plugins: ['@babel/plugin-transform-runtime', ['@babel/plugin-proposal-decorators', {legacy: true}],'@babel/plugin-proposal-class-properties', ], }, }, }, { test: /\.(ts|tsx)$/, exclude: /node_modules/, use: { loader: 'ts-loader', }, }, { test: /\.html$/, use: [ { loader: 'html-loader', }, ], }, { test: /\.css$/i, use: [ { loader: 'style-loader', }, { loader: 'css-loader', }, ], }, { test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/, exclude: /node_modules/, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: 'fonts/', }, }, ], }, { test: /\.(png|jpg)(\?v=\d+\.\d+\.\d+)?$/, exclude: /node_modules/, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: 'images/', }, }, ], }, { test: /\.(wav|ogg)$/, exclude: /node_modules/, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: 'sounds/', }, }, ], }, ], }, resolve: { extensions: ['.js', '.ts', '.tsx', '.web.js', '.json', 'css', 'woff', 'ttf', 'eot', 'svg'], alias: {'react-redux': process.env.WDYR === 'true' ? 'react-redux/lib' : 'react-redux', }, },};