webpack - ERROR in ./src/data.yaml Module parse failed: Cannot parse JSON: Unable to parse.为啥报错？

Question

https://www.webpackjs.com/guides/asset-management/
ERROR in ./src/data.yaml
Module parse failed: Cannot parse JSON: Unable to parse.
跟着官网一步步撸还是有问题，看不懂是哪里出了错。

webpack.config.js

const { type } = require('os');
const path = require('path');
const toml = require('toml');
const yaml = require('yamljs');
const json5 = require('json5');
// const { Parser } = require('webpack');
module.exports = {
    entry:'./src/index.js',
    output: {
        filename:'bundle.js',
        path:path.resolve(__dirname,'dist'),
    },
    module:{
        rules:[
            {
                test:/\.css$/i,
                use:['style-loader','css-loader']
            },
            {
                test:/\.(png|svg|jpg|jpeg|gif)$/i,
                type:'asset/resource',
            },
            {
                test:/\.(woff|woff2|eot|ttf|otf)$/i,
                type:'asset/resource',
            },
            {
                test:/\.(csv|tsv)$/i,
                use:['csv-loader'],
            },
            {
                test:/\.xml$/i,
                use:['xml-loader'],
            },
            {
                test: /\.toml$/i,
                type: 'json',
                parser: {
                  parse: toml.parse,
                },
              },
              {
                test: /\.yaml$/i,
                type: 'json',
                parser: {
                  parse: yaml.parse,
                },
              },
              {
                test: /\.json5$/i,
                type: 'json',
                parser: {
                  parse: json5.parse,
                },
              },
        ]
    }
}

data.toml

title = "TOML Example"

[owner]
name = "Tom Preston-Werner"
organization = "GitHub
bio = "GitHub Cofounder & CEO\nLikes tater tots and beer."
dob = 1979-05-27T07:32:00Z

data.yaml

title:YAML Example
owner:
  name:Tom Preston-Werner
  organization:GitHub
  bio:|-
    Github Cofounder & CEO
    Likes tater tots and beer.
  dob:1979-05-27T07:32:00:000Z

data.json5

{
    //coment
    title:'JSON5 Example',
    owner:{
        name:'Tom Preston-Werner',
        organization:'GitHub',
        bio:'GitHub Cofounder & CEO \n\ Liles tater tots and beer.',
        dob:'1979-05-27T07:32:00.000Z',
    },
}

index.js

import _ from 'lodash';
import './style.css';
import Icon from './1.jpg';
import Data from './data.xml';
import Notes from './data.csv';
import toml from './data.toml';
import yaml from './data.yaml';
import json from './data.json5';

console.log(toml.title);
console.log(toml.owner.name);

console.log(yaml.title);
console.log(yaml.owner.name);

console.log(json.title);
console.log(json.owner.name);

function component() {
    const element = document.createElement('div');

    // 执行这一行需要引入loadsh (目前通过 script 脚本引入)
    // lodash 现在使用import引入
    element.innerHTML = _.join(['Hello','Webpack'],' ');
    element.classList.add('hello')

    // 将图像添加到已经存在的div中
    const myIcon = new Image();
    myIcon.src = Icon;

    element.appendChild(myIcon);

    console.log(Data);
    console.log(Notes);
    return element;
}

document.body.appendChild(component());

package.json

{
  "name": "webpack",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "css-loader": "^7.1.2",
    "csv-loader": "^3.0.5",
    "json5": "^2.2.3",
    "style-loader": "^4.0.0",
    "toml": "^3.0.0",
    "webpack": "^5.96.1",
    "webpack-cli": "^5.1.4",
    "xml-loader": "^1.2.1",
    "yamljs": "^0.3.0"
  },
  "dependencies": {
    "lodash": "^4.17.21"
  }
}

Answer 1

第一个error是因为data.toml 中organization 的值缺少引号

第二个error 是因为data.yaml 中 冒号（：）之后没有空格导致的