Import JSON file in Javascript using Webpack 4

Question

I have a file called generic-map.json containing the following:

[
    {
        "names": ["text", "description"],
        "map": {
            "name": "textContent",
            "target": "property",
            "type": "string"
        }
    },
    {
        "names": ["checked"],
        "map": {
            "name": "checked",
            "target": "property",
            "type": "boolean"
        }
    },
    {
        "names": ["disabled", "readonly"],
        "map": {
            "name": "disabled",
            "target": "property",
            "type": "boolean"
        }
    },
    {
        "names": ["title", "tooltip"],
        "map": {
            "name": "title",
            "target": "property",
            "type": "string"
        }
    },
    {
        "names": ["cssclass", "classname"],
        "map": {
            "name": "",
            "target": "classList",
            "type": "string"
        }
    },
    {
        "names": ["tabindex"],
        "map": {
            "name": "tabIndex",
            "target": "attribute",
            "type": "string"
        }
    }
]

In a Javascript file I'm trying to import this file:

import generic from './generic-map.json';

Webpack gives me the following error:

./src/utils/property-mapping/generic-map.json
Module parse failed: Unexpected token ; in JSON at position 733 while parsing near '...type": "string" } }];'
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token ; in JSON at position 733 while parsing near '...type": "string" } }];'
    at JSON.parse (<anonymous>)

I do know that webpack does no longer need json-loader, beginning with Webpack version 2.0.0. I'm using Webpack 4.20.2.

This is what my loaders configuration looks like:

[{
    test: /(\.js)/,
    exclude: /(node_modules)/,
    loaders: ['babel-loader'],
}, {
    test: /(\.jpg|\.png)$/,
    loader: 'url-loader?limit=10000',
}]

did you try adding file-loader rule? like '{ type: 'javascript/auto', test: /\.(json)/, exclude: /(node_modules|bower_components)/, use: [{ loader: 'file-loader', options: { name: '[name].[ext]' }, }], }' — Adi Darachi
– Adi Darachi, Commented Mar 18, 2019 at 13:13

Artem Bozhko · Accepted Answer · 2019-03-18 15:54:34Z

7

Replace test: /(\.js)/ to test: /\.js$/ or test: /\.jsx?$/

babel-loader process a .json file because of wrong test expression.

answered Mar 18, 2019 at 15:54

Artem Bozhko

1,89414 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Import JSON file in Javascript using Webpack 4

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related