我添加react-app-rewired和customize-cra到我的项目。当我使用“npm start”运行我的项目时,我得到一个错误,如内容不是来自webpack是从enter image description here提供的
这是我的package.json文件
{
"name": "geek-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"antd-mobile": "^2.3.4",
"axios": "^0.21.1",
"classnames": "^2.3.1",
"dayjs": "^1.10.6",
"dompurify": "^2.3.0",
"formik": "^2.2.9",
"highlight.js": "^11.1.0",
"history": "4.10.1",
"lodash": "^4.17.21",
"postcss": "^7.0.39",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-content-loader": "^6.0.3",
"react-dom": "^17.0.2",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-window": "^1.8.6",
"react-window-infinite-loader": "^1.0.7",
"redux": "^4.1.0",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.3.0",
"sass": "^1.35.2",
"socket.io-client": "^4.1.3",
"web-vitals": "^1.0.1",
"yup": "^0.32.9"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"babel-plugin-import": "^1.13.3",
"customize-cra": "^1.0.0",
"postcss-px-to-viewport": "^1.1.1",
"react-app-rewired": "^2.1.8"
}
}
这是我的配置覆盖. js文件
const {
override,
addPostcssPlugins,
addWebpackAlias,
addBabelPlugins
} = require('customize-cra')
const pxToViewport = require('postcss-px-to-viewport')
const path = require('path')
const alias = addWebpackAlias({
'@': path.resolve(__dirname, 'src'),
'@scss': path.resolve(__dirname, 'src', 'assets', 'styles')
})
const viewport = pxToViewport({
viewportWidth: 375
})
module.exports = override(
addPostcssPlugins([viewport]),
alias,
...addBabelPlugins(['import', { libraryName: 'antd-mobile', style: 'css' }])
)
我尝试在我的项目中添加webpack.confing.js文件,但似乎没有效果。
const path = require('path')
module.exports = {
//...
devServer: {
static: {
directory: path.join(__dirname, '/')
},
compress: true,
port: 9000
}
}
1条答案
按热度按时间2admgd591#
问题已经解决了,我把我的node.js版本切换到了一个较低的级别。