🐛[BUG] - Githubissues

CarolineBoyer commented 4 years ago

(English hope I am putting the right info at the right place)

🐛 bug 描述 [详细地描述 bug，让大家都能理解]

After installing npm i @ant-design/charts, and creating a Line Chart like this :

import React, {useState, useEffect} from 'react';
import moment from 'moment';

import {Line} from '@ant-design/charts';
import Stat from "../../../utils/models/Stat";
import {StateFromAllReducers} from "../../../redux/store";
import {useSelector} from "react-redux";
import {IntlMessage} from "../../Utils/IntlMessage";

export const NbOfMessages = () => {
    const dataStats: Stat[] = useSelector( (state:StateFromAllReducers) => state.statsManagement.data);
    const [data, setData] = useState<{time: number|string, value:number}[]>([{time: 0, value:0}]);

    const config = {
        data,
        point: {
            visible: true,
        },
        label: {
            visible: true,
            type:'point'
        },
        forceFit: true,
        padding: 'auto',
        xField: 'time',
        xAxis: {
            visible: true,
            line: {
                visible:true
            },

            label: {
                autoHide: true,
                formatter: (v:number) => moment.unix(parseInt(v)).format(format)
            },
        },
        yField: 'value',
        yAxis: {
            visible: true,
            min: 0
        },
        tooltip: {
            domStyles: {'g2-tooltip-title':{display:'none'}},
            formatter: (x:number,y:anumber) => {return {name: moment.unix(parseInt(x)).format(format), value: y } }
        }};

    useEffect( ()=> {
        let tmpData: {time:string|number, value:number}[] =[]; //TODO: check if right initialization
        if (dataStats.length === 0) {
            tmpData = [{time: 0, value:0}]
        }
        dataStats.length > 0 && dataStats.map( (oneStat: Stat) => {
            tmpData= [...tmpData, {time: oneStat.date, value: oneStat.total.messages }]
        });
        setData(tmpData);
    }, [dataStats]);

    return (
        <div>
            <Line {...config} />
        </div>
    )
};

When running code, al lot of those kind of errors appears.

./node_modules/@antv/component/esm/axis/overlap/auto-ellipsis.js
Module Warning (from ./node_modules/source-map-loader/index.js):(Emitted value instead of an instance of Error) 
Cannot find source file '../../../src/axis/overlap/auto-ellipsis.ts': 
Error: Can't resolve '../../../src/axis/overlap/auto-ellipsis.ts' in '<...>\@antv\component\esm\axis\overlap'

./node_modules/@antv/component/esm/axis/overlap/auto-hide.js
Module Warning (from ./node_modules/source-map-loader/index.js):(Emitted value instead of an instance of Error) 
Cannot find source file '../../../src/axis/overlap/auto-hide.ts': 
Error: Can't resolve '../../../src/axis/overlap/auto-hide.ts' in '<...>\@antv\component\esm\axis\overlap'

./node_modules/@antv/component/esm/axis/overlap/auto-rotate.js
Module Warning (from ./node_modules/source-map-loader/index.js):(Emitted value instead of an instance of Error) 
Cannot find source file '../../../src/axis/overlap/auto-rotate.ts': 
Error: Can't resolve '../../../src/axis/overlap/auto-rotate.ts' in '<...>\@antv\component\esm\axis\overlap'

./node_modules/@antv/component/esm/axis/overlap/index.js
Module Warning (from ./node_modules/source-map-loader/index.js):(Emitted value instead of an instance of Error) 
Cannot find source file '../../../src/axis/overlap/index.ts': 
Error: Can't resolve '../../../src/axis/overlap/index.ts' in '<...>\@antv\component\esm\axis\overlap'

./node_modules/@antv/g-svg/esm/shape/marker/index.js
Module Warning (from ./node_modules/source-map-loader/index.js):(Emitted value instead of an instance of Error)
Cannot find source file '../../../src/shape/marker/index.ts':
Error: Can't resolve '../../../src/shape/marker/index.ts' in '<...>\@antv\g-svg\esm\shape\marker'

./node_modules/@antv/g-svg/esm/shape/marker/symbols.js
Module Warning (from ./node_modules/source-map-loader/index.js):(Emitted value instead of an instance of Error)
Cannot find source file '../../../src/shape/marker/symbols.ts':
Error: Can't resolve '../../../src/shape/marker/symbols.ts' in '<...>\@antv\g-svg\esm\shape\marker'

./node_modules/@antv/g-canvas/esm/util/in-path/point-in-path.js
Module Warning (from ./node_modules/source-map-loader/index.js):(Emitted value instead of an instance of Error)
Cannot find source file '../../../src/util/in-path/point-in-path.ts':
Error: Can't resolve '../../../src/util/in-path/point-in-path.ts' in '<...>\@antv\g-canvas\esm\util\in-path'

and many more appears in console. Webpack has noted more than 399 warnings.

📷 复现步骤 [清晰描述复现步骤，让别人也能看到问题]

Have installed the ant-design/charts
Create a Chart (here Line)
launch program

🏞 期望结果 [描述你原本期望看到的结果]

No warnings

💻 复现代码 [提供可复现的代码，仓库，或线上示例]

Hard to give as I just created a simple file using a freshly installed lib

© 版本信息

ant-design-charts 版本: [e.g. 0.9.0] 0.9.4
浏览器环境 Chrome
开发环境 [e.g. mac OS] Window

🚑 其他信息 [如截图等其他信息可以贴在这里]

I have posted this error on G2Plot https://github.com/antvis/G2Plot/issues/1129 It might help you with this, though I didn't understand their answer !

lxfu1 commented 4 years ago

run npm update

CarolineBoyer commented 4 years ago

That's what I did, but didn't change a thing... =/ Still have the warning (plus my package ant-design/charts was already at last version (according to package.json : "version": "0.9.4", )

> npm view @ant-design/charts version
0.9.4

So I feel update isn't the right choice here =(

lxfu1 commented 4 years ago

Warning or error ? I tried it with you configuration and didn't report any error.

CarolineBoyer commented 4 years ago

Warnings in both console (cmd and chrome one) I even tried

rm -rf node_modules
rm package-lock.json
npm install
npm update

Nothing was listed in

npm outdated

Re-running the component, triggers all warning on cmd console (extract)

and chrome console (extract as well)

CarolineBoyer commented 4 years ago

Any change to know why this is happening or clues I could give you to help ? =(

lxfu1 commented 4 years ago

I can't trigger this warning on Mac OS, maybe Windows wents to. do you have any other charts dependencies？

didiself commented 4 years ago

same

CarolineBoyer commented 4 years ago

@lxfu1 This also happens when creating a Column chart using antv/g2plot. (or if I transform it to an antd/charts) which is why I thought this was a dependency issue ?

import React from 'react';

import {Column} from '@antv/g2plot';
import {useSelector} from "react-redux";
import {StateFromAllReducers} from "../../../redux/store";
import Stat from "../../../utils/models/Stat";
import {IntlMessage} from "../../Utils/IntlMessage";

export const NbOfMessagesPerService = () => {
    let $refdom: HTMLElement | null;

    const dataStats: Stat[] = useSelector((state: StateFromAllReducers) => state.statsManagement.data);

    let data: { service: string, value: number }[] = [];
    if (dataStats.length === 0) {
        data = [{service: '', value: 0}] //handling show when empty
    } else {
        dataStats.map((oneStatData: Stat) => {
            const oneStat = new Stat(oneStatData);
            let services = oneStat.getAllCalledServices();
            if (services.length === 0) {
                data = [{service: '', value: 0}]
            } //handling show when empty
            services.map((oneServiceName: string) => {
                const index: number = data.findIndex((oneStatInData) => oneStatInData.service === oneServiceName);
                if (index !== -1 && oneStat.total) {
                    data[index].value = data[index].value + oneStat.total.message_per_called_services[oneServiceName];
                } else {
                    data = [...data, {
                        service: oneServiceName,
                        value: oneStat.total.message_per_called_services[oneServiceName]
                    }]
                }
            });

        });
    }

    React.useEffect(() => {
        const chart = new Column($refdom!, {
            data,
            xField: 'service',
            xAxis: {
                visible: true,
                line: {
                    visible: true
                },
                title: {
                    visible: false
                }
            },
            yField: 'value',
            yAxis: {
                visible: true,
                line: {
                    visible: true
                },
                title: {
                    visible: false
                }
            },
        });

        chart.render();
        return function cleanup() {
            $refdom = null;
        }
    }, []);

    return (
        <div>
            <div className="ant-statistic-title">
                <IntlMessage id={"MONITORING_STATISTICS_MESSAGES_PER_SERVICE_TITLE"}/>
            </div>
            <div
                ref={(e) => ($refdom = e)}
            />
        </div>
    )
};

If I comment the two charts, those warnings disappear.

jorgesierra commented 4 years ago

I faced the same issue. I made the warnings go away by excluding /node_modules/@antv/ from the source-map-loader rule in my webpack config. Hope it helps.

{
        enforce: 'pre',
        test: /\.jsx?$/,
        loader: 'source-map-loader',
        exclude: [
          /node_modules\/@antv/
        ]
}

appdevcanada commented 4 years ago

Hi guys,

what I could detect is: at isSupported (node_modules/@antv/g2plot/src/plots/word-cloud/wordcloud2.ts:119:12) at Object. (node_modules/@antv/g2plot/src/plots/word-cloud/wordcloud2.ts:134:3) at Object. (node_modules/@antv/g2plot/src/plots/word-cloud/layer.ts:10:1) at Object. (node_modules/@antv/g2plot/src/plots/word-cloud/index.ts:7:1) at Object. (node_modules/@antv/g2plot/src/plots/index.ts:22:1) at Object. (node_modules/@antv/g2plot/src/index.ts:8:1) at Object. (node_modules/@ant-design/charts/lib/area/index.js:12:15) at Object. (node_modules/@ant-design/charts/lib/index.js:308:36) at Object. (src/App.js:3:1) at Object. (src/App.test.js:4:1)

THERE'S NO FOLDER: node_modules/@antv/g2plot/src, ANYWHERE ON MY LAPTOP

Also, when you hover the cursor to jump to the folder in the console, the line with /area/index.js is OK, but the one with /src/index.js not anymore, meaning there's no folder for that.

lxfu1 commented 4 years ago

Upgrade 1.0.