React native flow error with typescript loader #1812
Description
The problem
Loading react-native with webpack result in an error (apparently with flow) :
ERROR in ../node_modules/react-native/Libraries/Image/resolveAssetSource.js 18:12
Module parse failed: Unexpected token (18:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const AssetSourceResolver = require('./AssetSourceResolver');
|
> import type {ResolvedAssetSource} from './AssetSourceResolver';
|
| let _customSourceTransformer, _serverURL, _scriptURL;
@ ../node_modules/react-native-track-player/lib/index.js 2:0-81 9:11-29 14:11-29
@ ../node_modules/react-native-track-player/index.js 4:0-42
@ ../index.js 1:0-54 4:4-34 5:4-34 6:4-34 7:4-34 8:4-34 9:4-34 10:4-34 15:16-35 16:16-34 16:79-97 20:4-34 22:12-34 24:20-38 24:63-81
How to reproduce
Simplified test case: impossible because it's configuration only
Steps to reproduce:
- create a react native app
- add typescript
- add react-native-web
Expected behavior
The server starts
Environment (include versions). Did this work in previous versions?
- React Native for Web (version): 0.14.8
- React (version): 16.13.1
- Browser: none
- webpack: 5.5.0
- typescript: 4.0.3
- ts-loader: 8.0.11
Webpack config :
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const rootDir = path.join(__dirname, '..');
const webpackEnv = process.env.NODE_ENV || 'development';
module.exports = {
mode: webpackEnv,
entry: {
app: path.join(rootDir, './index.js'),
},
output: {
path: path.resolve(rootDir, 'dist'),
filename: 'app-[hash].bundle.js',
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.(tsx|ts|jsx|js|mjs)$/,
exclude: /node_modules/,
loader: 'ts-loader',
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, './index.html'),
}),
new webpack.HotModuleReplacementPlugin(),
],
resolve: {
extensions: [
'.web.tsx',
'.web.ts',
'.tsx',
'.ts',
'.web.jsx',
'.web.js',
'.jsx',
'.js',
], // read files in fillowing order
alias: {
'react-native$': 'react-native-web',
},
},
};Babel config :
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
['@babel/plugin-proposal-decorators', {"legacy": true}],
["module-resolver", {
"alias": {
"^react-native$": "react-native-web"
}
}]
],
};tsconfig.json :
{
"compilerOptions": {
"allowJs": false,
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"jsx": "react",
"module": "es2015",
"moduleResolution": "node",
"noImplicitAny": false,
"noImplicitReturns": true,
"noImplicitThis": true,
"noUnusedLocals": true,
"sourceMap": true,
"target": "esnext",
"lib": ["esnext"],
"skipLibCheck": true,
"strict": true,
"typeRoots": [
"src/customTypings",
"node_modules/@types"
],
"resolveJsonModule": true
},
"exclude": ["node_modules"],
"include": ["index.js", "src/**/*", ".eslintrc.js"]
}