Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

在create-react-app的webpack项目中使用@unocss/webpack会导致sourceMap源代码定位不到,打完debugger定位到的代码是编译后的代码 #3517

Closed
4 tasks done
badlym opened this issue Jan 19, 2024 · 7 comments · Fixed by #3732
Labels

Comments

@badlym
Copy link

badlym commented Jan 19, 2024

UnoCSS version

^0.58.3

Describe the bug

image
如图所示,我使用create-react-app创建的项目我就在代码出打了一个debugger,但是浏览器调试的时候无法调试源代码
image

Reproduction

我的存储库地址是https://github.com/badlym/cra-test

System Info

No response

Validations

@badlym
Copy link
Author

badlym commented Jan 19, 2024

github 我推送不上去,这是我的gitee的存储库地址
https://gitee.com/liucj2/cra-test

@badlym
Copy link
Author

badlym commented Jan 19, 2024

@badlym
Copy link
Author

badlym commented Mar 27, 2024

当我去掉引入 import uno.css 之后就可以正常定位到源码了,请问是什么原因呢?

@antfu antfu added the webpack label Apr 5, 2024
@Simon-He95
Copy link
Contributor

I tested the latest unocss version and it seems to have been fixed.

@badlym
Copy link
Author

badlym commented Apr 14, 2024

这个问题并没有解决

@badlym badlym changed the title 在react的webpack项目中使用@unocss/webpack会导致sourceMap源代码定位不到,打完debugger定位到的代码是编译后的代码 在create-react-app的webpack项目中使用@unocss/webpack会导致sourceMap源代码定位不到,打完debugger定位到的代码是编译后的代码 Apr 14, 2024
@Simon-He95 Simon-He95 reopened this Apr 14, 2024
@badlym
Copy link
Author

badlym commented Apr 15, 2024

我用的是create-react-app eject之后配置项,这是我的配置表
{
"name": "cra-test",
"version": "0.1.0",
"private": true,
"dependencies": {
"@unocss/webpack": "^0.59.2",
"unocss": "^0.59.2",
"@babel/core": "^7.16.0",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
"@svgr/webpack": "^5.5.0",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^13.0.0",
"@testing-library/user-event": "^13.2.1",
"@types/jest": "^27.0.1",
"@types/node": "^16.7.13",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"babel-jest": "^27.4.2",
"babel-loader": "^8.2.3",
"babel-plugin-named-asset-import": "^0.3.8",
"babel-preset-react-app": "^10.0.1",
"bfj": "^7.0.2",
"browserslist": "^4.18.1",
"camelcase": "^6.2.1",
"case-sensitive-paths-webpack-plugin": "^2.4.0",
"css-loader": "^6.5.1",
"css-minimizer-webpack-plugin": "^3.2.0",
"dotenv": "^10.0.0",
"dotenv-expand": "^5.1.0",
"eslint": "^8.3.0",
"eslint-config-react-app": "^7.0.1",
"eslint-webpack-plugin": "^3.1.1",
"file-loader": "^6.2.0",
"fs-extra": "^10.0.0",
"html-webpack-plugin": "^5.5.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^27.4.3",
"jest-resolve": "^27.4.2",
"jest-watch-typeahead": "^1.0.0",
"mini-css-extract-plugin": "^2.4.5",
"postcss": "^8.4.4",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-loader": "^6.2.1",
"postcss-normalize": "^10.0.1",
"postcss-preset-env": "^7.0.1",
"prompts": "^2.4.2",
"react": "^18.2.0",
"react-app-polyfill": "^3.0.0",
"react-dev-utils": "^12.0.1",
"react-dom": "^18.2.0",
"react-refresh": "^0.11.0",
"resolve": "^1.20.0",
"resolve-url-loader": "^4.0.0",
"sass-loader": "^12.3.0",
"semver": "^7.3.5",
"source-map-loader": "^3.0.0",
"style-loader": "^3.3.1",
"tailwindcss": "^3.0.2",
"terser-webpack-plugin": "^5.2.5",
"typescript": "^4.4.2",
"web-vitals": "^2.1.0",
"webpack": "^5.64.4",
"webpack-dev-server": "^4.6.0",
"webpack-manifest-plugin": "^4.0.2",
"workbox-webpack-plugin": "^6.4.1"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js"
},
"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"
]
},
"jest": {
"roots": [
"/src"
],
"collectCoverageFrom": [
"src//*.{js,jsx,ts,tsx}",
"!src/
/.d.ts"
],
"setupFiles": [
"react-app-polyfill/jsdom"
],
"setupFilesAfterEnv": [
"/src/setupTests.ts"
],
"testMatch": [
"/src//tests//
.{js,jsx,ts,tsx}",
"/src/**/.{spec,test}.{js,jsx,ts,tsx}"
],
"testEnvironment": "jsdom",
"transform": {
"^.+\.(js|jsx|mjs|cjs|ts|tsx)$": "/config/jest/babelTransform.js",
"^.+\.css$": "/config/jest/cssTransform.js",
"^(?!.
\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\]node_modules[/\\].+\.(js|jsx|mjs|cjs|ts|tsx)$",
"^.+\.module\.(css|sass|scss)$"
],
"modulePaths": [],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\.module\.(css|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
"node"
],
"watchPlugins": [
"jest-watch-typeahead/filename",
"jest-watch-typeahead/testname"
],
"resetMocks": true
},
"babel": {
"presets": [
"react-app"
]
}
}
unocss 我已经更新到了最新的版本,请把我github存储库的代码拉下来跑一下就知道了,这个问题困扰了我很久。因为我的老项目用的cra,现在导致我的老项目无法debugg,严重影响了开发效率。请帮帮忙,特别感谢!

@Simon-He95
Copy link
Contributor

@badlym Excuse me, please help me test whether my pr version can solve your problem. You can try to enter my pr version and build, replace the content of @unocss/webpack/dist with your local file and then start your local project to see if it can meet your needs
#3732
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants