Unexpected token m in JSON at position 0 error

Question

On compiling an app and trying to implement the i18n library with webpack, I face this error:

ERROR in ./node_modules/bundle-loader?lazy&name=lang-pt!./src/locales/pt/translation.json
Module parse failed: Unexpected token m in JSON at position 0
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token m in JSON at position 0
    at JSON.parse (<anonymous>)
    at JsonParser.parse (C:\Users\vasco.bento\ContactosWebPack\node_modules\webpack\lib\JsonParser.js:15:21)
    at doBuild.err (C:\Users\vasco.bento\ContactosWebPack\node_modules\webpack\lib\NormalModule.js:367:32)
    at runLoaders (C:\Users\vasco.bento\ContactosWebPack\node_modules\webpack\lib\NormalModule.js:264:12)
    at C:\Users\vasco.bento\ContactosWebPack\node_modules\loader-runner\lib\LoaderRunner.js:370:3
    at iterateNormalLoaders (C:\Users\vasco.bento\ContactosWebPack\node_modules\loader-runner\lib\LoaderRunner.js:211:10)
    at C:\Users\vasco.bento\ContactosWebPack\node_modules\loader-runner\lib\LoaderRunner.js:183:6
    at runSyncOrAsync (C:\Users\vasco.bento\ContactosWebPack\node_modules\loader-runner\lib\LoaderRunner.js:130:11)
    at C:\Users\vasco.bento\ContactosWebPack\node_modules\loader-runner\lib\LoaderRunner.js:175:3
    at loadLoader (C:\Users\vasco.bento\ContactosWebPack\node_modules\loader-runner\lib\loadLoader.js:36:3)
    at iteratePitchingLoaders (C:\Users\vasco.bento\ContactosWebPack\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
    at runLoaders (C:\Users\vasco.bento\ContactosWebPack\node_modules\loader-runner\lib\LoaderRunner.js:362:2)
    at NormalModule.doBuild (C:\Users\vasco.bento\ContactosWebPack\node_modules\webpack\lib\NormalModule.js:219:3)
    at NormalModule.build (C:\Users\vasco.bento\ContactosWebPack\node_modules\webpack\lib\NormalModule.js:337:15)
    at Compilation.buildModule (C:\Users\vasco.bento\ContactosWebPack\node_modules\webpack\lib\Compilation.js:346:10)
    at factory.create (C:\Users\vasco.bento\ContactosWebPack\node_modules\webpack\lib\Compilation.js:572:15)
 @ ./node_modules/aurelia-i18n/dist/native-modules/aurelia-i18n.js
 @ ./src/main.js
 @ ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js
 @ multi aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry aurelia-bootstrapper

ERROR in chunk app [entry]
[name].[hash].bundle.js
Cannot read property 'replace' of undefined

This repeats for the other language I have in the locales folder, which is correctly placed in the src folder, even if the JSON files are completely empty, the same error occurs.

Here's the webconfig.js file:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const project = require('./aurelia_project/aurelia.json');
const {
    AureliaPlugin,
    ModuleDependenciesPlugin
} = require('aurelia-webpack-plugin');
const {
    ProvidePlugin
} = require('webpack');
const {
    BundleAnalyzerPlugin
} = require('webpack-bundle-analyzer');

// config helpers:
const ensureArray = (config) => config && (Array.isArray(config) ? config : [config]) || [];
const when = (condition, config, negativeConfig) =>
    condition ? ensureArray(config) : ensureArray(negativeConfig);

// primary config:
const title = 'Aurelia Navigation Skeleton';
const outDir = path.resolve(__dirname, project.platform.output);
const srcDir = path.resolve(__dirname, 'src');
const nodeModulesDir = path.resolve(__dirname, 'node_modules');
const baseUrl = '/';

const cssRules = [{
    loader: 'css-loader'
}];

module.exports = ({
    production,
    server,
    extractCss,
    coverage,
    analyze
} = {}) => ({
    resolve: {
        extensions: ['.js'],
        modules: [srcDir, 'node_modules']
    },
    entry: {
        app: ['aurelia-bootstrapper'],
        vendor: ['bluebird']
    },
    mode: production ? 'production' : 'development',
    output: {
        path: outDir,
        publicPath: baseUrl,
        filename: production ? '[name].[chunkhash].bundle.js' : '[name].[hash].bundle.js',
        sourceMapFilename: production ? '[name].[chunkhash].bundle.map' : '[name].[hash].bundle.map',
        chunkFilename: production ? '[name].[chunkhash].chunk.js' : '[name].[hash].chunk.js'
    },
    performance: {
        hints: false
    },
    devServer: {
        contentBase: outDir,
        // serve index.html for all 404 (required for push-state)
        historyApiFallback: true
    },
    devtool: production ? 'nosources-source-map' : 'cheap-module-eval-source-map',
    module: {
        rules: [
            // CSS required in JS/TS files should use the style-loader that auto-injects it into the website
            // only when the issuer is a .js/.ts file, so the loaders are not applied inside html templates
            {
                test: /\.css$/i,
                issuer: [{
                    not: [{
                        test: /\.html$/i
                    }]
                }],
                use: extractCss ? ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: cssRules
                }) : ['style-loader', ...cssRules]
            },
            {
                test: /\.css$/i,
                issuer: [{
                    test: /\.html$/i
                }],
                // CSS required in templates cannot be extracted safely
                // because Aurelia would try to require it again in runtime
                use: cssRules
            },
            {
                test: /\.html$/i,
                loader: 'html-loader'
            },
            {
                test: /\.js$/i,
                loader: 'babel-loader',
                exclude: nodeModulesDir,
                options: coverage ? {
                    sourceMap: 'inline',
                    plugins: ['istanbul']
                } : {}
            },
            {
                test: /\.json$/i,
                loader: 'json-loader'
            },
            // use Bluebird as the global Promise implementation:
            {
                test: /[\/\\]node_modules[\/\\]bluebird[\/\\].+\.js$/,
                loader: 'expose-loader?Promise'
            },
            // embed small images and fonts as Data Urls and larger ones as files:
            {
                test: /\.(png|gif|jpg|cur)$/i,
                loader: 'url-loader',
                options: {
                    limit: 8192
                }
            },
            {
                test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/i,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    mimetype: 'application/font-woff2'
                }
            },
            {
                test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/i,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    mimetype: 'application/font-woff'
                }
            },
            // load these fonts normally, as files:
            {
                test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i,
                loader: 'file-loader'
            }
        ]
    },
    plugins: [
        new AureliaPlugin(),
        new ProvidePlugin({
            'Promise': 'bluebird'
        }),
        new ModuleDependenciesPlugin({
            'aurelia-testing': ['./compile-spy', './view-spy'],
            'aurelia-i18n': [{
                name: 'locales/en/translation.json',
                chunk: 'lang-en'
            }, {
                name: 'locales/pt/translation.json',
                chunk: 'lang-pt'
            }]
        }),
        new HtmlWebpackPlugin({
            template: 'index.ejs',
            minify: production ? {
                removeComments: true,
                collapseWhitespace: true
            } : undefined,
            metadata: {
                // available in index.ejs //
                title,
                server,
                baseUrl
            }
        }),
        ...when(extractCss, new ExtractTextPlugin({
            filename: production ? '[contenthash].css' : '[id].css',
            allChunks: true
        })),
        ...when(production, new CopyWebpackPlugin([{
            from: 'static/favicon.ico',
            to: 'favicon.ico'
        }])),
        ...when(analyze, new BundleAnalyzerPlugin())
    ]
});

The issue in the above code happens at

{
                test: /\.json$/i,
                loader: 'json-loader'
            },

Which if you comment, lets the app compile without issues, I've searched but event though I've found similar problems to this one, I haven't found a working solution, if anyone has any suggestion in how I can solve this problem I would appreciate it.

Thanks in advance.

Encode

can you share the .json files , they may be invalid? – Serve

First 2 lines or so from ./src/locales/pt/translation.json would help. And JSON loader is not needed since webpack 2.0 – Discourteous

@Discourteous Here are the first 2 lines from the translation.js from the pt folder inside locales. { "title": "Gestor de Contactos", "description": "Bem-vindo à aplicação sem nome", "au-samples": { "menu": { "welcome": "Bem vindo", "child-router": "Child Routers", "users": "Utilizadores", "charts": "Gráficos", "mod-contacts": "Contactos" }, – Encode

Strange, the error is m in JSON at position 0 in file:./src/locales/pt/translation.json What if you don't use the json-parser? I don't think you need it anymore. You can try to open the file in vs code or notepad and save as unicode. – Discourteous

Answer 1

The reason it says unexpected token m is because the json-loader transforms your json into a javascript file which starts with module.exports = ...

Of course that is not valid json (json must always start with opening brace {), hence it nags about the "m" of "module".

In other words, this error is indicative of webpack trying to apply json-loader twice in a row. Changing json-loader to raw-loader should get rid of webpack's wrapper javascript and pass the json as-is to whatever other plugin might be trying to load it as raw json.

Here's a related issue that might help you get this cleared up:

https://github.com/webpack-contrib/json-loader/issues/13

Leukoderma

Just to highlight, can we handle it to avoid this error? – Tops

Answer 2

I didn't have the loader set in my script and i fixed it by adding this to my headers. In my case this was just a API call to my Smart lighting system

const body = 
{
 "device": "2B:5A:D4:AD",
 "model": "H619E",
 "cmd": {
  "name": "turn",
  "value": "off"
  }
} 
let res = await fetch('https://developer-api.govee.com/v1/devices/control', {
  method: 'put',
  headers: { 
    'Content-Type': 'application/json'
  }, 
  body: JSON.stringify(body)
});

Bobbybobbye

Answer 3

You can remove this error from the backend side by just send response in valid JSON format. So automatically error will go from the frontend side. Just add a line in the backend where send response.

   return res.status(201).json({
                message: 'Success',
            })

Undersecretary