Module parse failed: Unexpected character '@'

[DiamondYuan]

在react里引入

class ClipperFullPagePreiview extends React.Component<ClipperFullPagePreiviewProps> {

    onDataChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
        const { value } = e.target;
        this.props.data.setFullPage(value);
    }

    componentDidMount = () => {
        console.log(document.querySelector('#myyyyy'));
        let myTextarea = document.getElementById('myyyyy') as HTMLTextAreaElement;
        HyperMD.fromTextArea(myTextarea, {
            /* 在此添加其他编辑器选项 */
            hmdModeLoader: false, // 见下面的备注
        });
    }
    render() {
        return (
            <div className={styles.preview}>
                <div className={styles.previewContent}>
                    <textarea id="myyyyy"></textarea>
                </div>
            </div>
        );
    }
}

webpack

{
                exclude: /node_modules/,
                test: [/\.scss$/, /\.css$/],
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'typings-for-css-modules-loader',
                        options: {
                            modules: true,
                            namedExport: true,
                            camelCase: true,
                            localIdentName: '[path][name]__[local]--[hash:base64:5]'
                        }
                    },

                    {
                        loader: 'sass-loader'
                    }
                ]
            }

[DiamondYuan]

    ERROR in ./node_modules/hypermd/theme/hypermd-image-spin.gif 1:6
    Module parse failed: Unexpected character '' (1:6)
    You may need an appropriate loader to handle this file type.

    ERROR in ./node_modules/hypermd/theme/hypermd-image-error.png 1:0
    Module parse failed: Unexpected character '�' (1:0)
    You may need an appropriate loader to handle this file type.

    ERROR in ./node_modules/hypermd/theme/hypermd-image-link.png 1:0
    Module parse failed: Unexpected character '�' (1:0)
    You may need an appropriate loader to handle this file type.

[DiamondYuan]

可以了。加了一个css loader 和 url loadr

 {
                include: /hypermd|codemirror/,
                test: [/\.css$/],
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader'
                    }
                ]
            }

 {
                test: /\.(png|jpg|gif)$/,
                loader: 'url-loader?limit=8192&name=./static/img/[hash].[ext]',
            },

[DiamondYuan]

一共四张图 用 base64 吧。

[laobubu]

感谢指出。等过后在文档里加上说明

[DiamondYuan]

对了。切换编辑模式是不是文档里也没有。我看 demo 源码才发现的。

[DiamondYuan]

研究了几个小时。整个项目真不错。 感谢一下。