onebay/vite-plugin-imp

Debug sourcemap line error with antd.

zzjin opened this issue · 3 comments

zzjin commented

Confirm sourcemap line error with antd.
使用antd按需加载样式的时候断点行错误.

Libarary Info:

  • vite: 2.6.13
  • vite-plugin-imp: 2.0.9
  • antd: 4.16.13

Minimal To Reproduce
package.json

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "vite",
  },
  "dependencies": {
    "antd": "^4.16.13",
    "prop-types": "15.7.2",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@vitejs/plugin-react-refresh": "^1.3.1",
    "less": "^4.1.2",
    "vite": "^2.6.13",
    "vite-plugin-imp": "^2.0.9"
  }
}

vite.config.js

import reactRefresh from "@vitejs/plugin-react-refresh";
import { defineConfig } from "vite";
import vitePluginImp from "vite-plugin-imp";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    reactRefresh(),
    vitePluginImp({
      libList: [
        {
          libName: "antd",
          style: (name) => `antd/es/${name}/style`,
        },
      ],
    }),
  ],
  css: {
    preprocessorOptions: {
      less: {
        // 支持内联 JavaScript
        javascriptEnabled: true,
      },
    },
  },
});

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Test</title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  <script type="module" src="/src/index.jsx"></script>
</body>

</html>

src/index.jsx

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(
  <App />, document.getElementById("root")
);

src/App.jsx

import { Row, Col, Button, Modal } from 'antd';
import React from 'react';

export default class App extends React.Component {
  state = {
    visible: false,
  }

  componentDidMount() {
    console.log(this)
  }

  show = () => {
    this.setState({ visible: true })
  }

  hide = () => {
    this.setState({ visible: false })
  }

  ok = () => {
    console.log(this.state) // set debug here.
  }

  render() {
    return (
      <>
        <Row gutter={8}>
          <Col span={6}>
            <Button className="mt_8" onClick={this.show}>as</Button>
          </Col>
        </Row>
        <Modal
          title="Modal"
          visible={this.state.visible}
          onCancel={this.hide}
          onOk={this.ok}
        ></Modal>
      </>
    )
  }
}

Expected behavior
debug break at given line src/App.jsx#24

Error message
debug report break at src/App.jsx#32

QQ20211028175847

I also found that whcih is Modal causes this bug but cannot step further due to prior js/ts knowledge.
Maybe there have more other antd compoments will cause this bug.

psaren commented

I can't reproduce from the infomation you provide above.
I try to set a break point on chrome

 console.log(this.state) // set debug here.

and the break point is work on this line.

I think this issue is not related with vite-plugin-imp.

zzjin commented

image
chrome will throw same line error too.

chrome version? package version?

psaren commented

I think this issue is cause by the line break.
I remove the line break (\n) in V2.0.10 and it works.