Было много ответов на этот вопрос, которые устарели, я думаю, потому что ни одно из решений не помогло мне.
Сценарий:
Я использую react-native-web
и react-native
для веб-приложений и мобильных приложений. Для react-native-web
мне нужно связать js
, чтобы заставить react-native-web
работать, так как я начал использовать react-router-native
.
Без react-router-native
веб-пакет идеально связал js
, но при добавлении выдает ошибку.
ERROR in ../index.js
Module build failed (from ../node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/name/Documents/rn/node_modules/babel-preset-es2016/lib/index.js
at createDescriptor (/Users/name/Documents/rn/node_modules/@babel/core/lib/config/config-descriptors.js:178:11)
at items.map (/Users/name/Documents/rn/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
at Array.map (<anonymous>)
at createDescriptors (/Users/name/Documents/rn/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
at createPresetDescriptors (/Users/name/Documents/rn/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
at passPerPreset (/Users/name/Documents/rn/node_modules/@babel/core/lib/config/config-descriptors.js:58:104)
at cachedFunction (/Users/name/Documents/rn/node_modules/@babel/core/lib/config/caching.js:62:27)
at cachedFunction.next (<anonymous>)
at evaluateSync (/Users/name/Documents/rn/node_modules/gensync/index.js:244:28)
at sync (/Users/name/Documents/rn/node_modules/gensync/index.js:84:14)
babel.config. js:
module.exports = {
presets: [
'@babel/preset-env',
'@babel/preset-react',
'module:metro-react-native-babel-preset'
],
plugins: [
'@babel/plugin-proposal-class-properties'
]
};
webpack.config. js:
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: 'babel-loader',
"query": {
"presets": ["@babel/preset-env", "@babel/preset-react", "es2016"],
}
},
],
},
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',
],
alias: Object.assign({
'react-native$': 'react-native-web',
}),
},
};
Пакет. json:
"dependencies": {
"babel-preset-es2015": "^6.24.1",
"react": "16.9.0",
"react-circular-progressbar": "^2.0.3",
"react-dom": "^16.12.0",
"react-native": "0.61.5",
"react-native-progress-circle": "^2.1.0",
"react-native-web": "^0.12.0-rc.1",
"react-redux": "^7.1.3",
"react-router-native": "^5.1.2",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"@babel/core": "^7.8.3",
"@babel/preset-env": "^7.8.3",
"@babel/preset-react": "^7.8.3",
"@babel/runtime": "^7.8.3",
"@react-native-community/eslint-config": "^0.0.6",
"@types/react": "^16.9.17",
"@types/react-native": "^0.60.31",
"babel-jest": "^24.9.0",
"babel-loader": "^8.0.6",
"babel-preset-es2016": "^6.24.1",
"eslint": "^6.8.0",
"html-webpack-plugin": "^3.2.0",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.56.4",
"react-native-typescript-transformer": "^1.2.13",
"react-test-renderer": "16.9.0",
"ts-loader": "^6.2.1",
"typescript": "^3.7.5",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1"
},
Спасибо за помощь.