Search code examples
webpackraw-loader

Requiring json file with raw-loader causes a syntax error

When I do require("!!raw-loader!themes/builtin_themes/default/layout.json"), I get the following error:

Module parse failed: Unexpected token m in JSON at position 0 while parsing near 'module.exports = "{\...'
File was processed with these loaders:
* ../node_modules/raw-loader/index.js
You may need an additional loader to handle the result of these loaders.
SyntaxError: Unexpected token m in JSON at position 0 while parsing near 'module.exports = "{\...'
     at JSON.parse (<anonymous>)
     at parseJson (/Users/frederikcreemers/dev/project/node_modules/json-parse-better-errors/index.js:7:17)
     at JsonParser.parse (/Users/frederikcreemers/dev/project/node_modules/webpack/lib/JsonParser.js:16:16)
     at /Users/frederikcreemers/dev/project/node_modules/webpack/lib/NormalModule.js:482:32
     at /Users/frederikcreemers/dev/project/node_modules/webpack/lib/NormalModule.js:358:12
[w-renderer]     at /Users/frederikcreemers/dev/project/node_modules/loader-runner/lib/LoaderRunner.js:373:3
     at iterateNormalLoaders (/Users/frederikcreemers/dev/project/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
     at iterateNormalLoaders (/Users/frederikcreemers/dev/project/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
     at /Users/frederikcreemers/dev/project/node_modules/loader-runner/lib/LoaderRunner.js:236:3
     at runSyncOrAsync (/Users/frederikcreemers/dev/project/node_modules/loader-runner/lib/LoaderRunner.js:130:11)
     at iterateNormalLoaders (/Users/frederikcreemers/dev/project/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
     at Array.<anonymous> (/Users/frederikcreemers/dev/project/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
     at Storage.finished (/Users/frederikcreemers/dev/project/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:43:16)
     at /Users/frederikcreemers/dev/project/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:79:9
     at /Users/frederikcreemers/dev/project/node_modules/graceful-fs/graceful-fs.js:90:16
     at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:61:3)

We do have the json loader configured like this:

{ 
test: /\.json$/, 
  use: [{
    loader: "json-loader",
    options: { context: "." }
  }]
}

but my understanding was that the "!!" in front would disable any configured loaders.

If possible, I'd like to leave the webpack configuration alone and just change the require statement to make this work.

Solution

  • Change the format of imported file like this

    raw-loader!./my-json-file.txt

    Use txt or any other postfix - that worked for me