我有一个使用react-app-rewired的react应用程序,它将Axios视为.cjs格式的字符串。
这是我的base-override.js
const fs = require('fs')
const path = require('path')
const webpack = require('webpack')
const appDirectory = fs.realpathSync(process.cwd())
const resolveApp = relativePath => path.resolve(appDirectory, relativePath)
const appIncludes = [
resolveApp('src'),
resolveApp('../components/src'),
]
module.exports = function override(config, env) {
config.resolve.plugins = config.resolve.plugins.filter(
plugin => plugin.constructor.name !== 'ModuleScopePlugin'
)
config.module.rules[0].include = appIncludes
config.module.rules[1].oneOf[1].include = appIncludes
config.module.rules[1].oneOf[3].options.plugins = [
require.resolve('babel-plugin-react-native-web'),
].concat(config.module.rules[1].oneOf[3].options.plugins)
config.module.rules.push({
test: /\.(js|mjs|cjs)$/,
exclude: /(@babel(?:\/|\\{1,2})runtime|node_modules[/\\](?!react-native.))/,
use: {
loader: "babel-loader",
options: {
babelrc: false,
configFile: false,
presets: [
"@babel/preset-react",
"@babel/preset-flow",
"@babel/preset-typescript",
"module:metro-react-native-babel-preset"
],
plugins: [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-object-rest-spread"
]
}
}
})
config.module.rules = config.module.rules.filter(Boolean)
config.plugins.push(
new webpack.DefinePlugin({ __DEV__: env !== 'production' })
)
return config
}
我已经试过https://github.com/facebook/create-react-app/issues/11889#issuecomment-1114928008和https://github.com/facebook/create-react-app/issues/12700#issuecomment-1293290243
我应该如何解决这个问题?
2条答案
按热度按时间roejwanj1#
首先,请确保您的软件包中安装了Axios:
那么你的webpack配置应该看起来像这样的override:
然后重新启动服务器并再次测试!
xfyts7mz2#
我将导入从
import axios from 'axios'
更改为import axios from '../node_modules/axios'