Cannot resolve module 'json'

[es6Test]

Hi, I am trying this, I am confident my paths are correct

var Page = require('json!./json/foo.json');

and get this error

ERROR in ../mocks/mockApi.js
Module not found: Error: Cannot resolve module 'json' in /Users/me/ui/src/components/native/mocks
 @ ../mocks/mockApi.js 1:31-83

[es6Test]

Webpack:

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

[cch5ng]

@es6Test specifying the loader as 'json' (without the '-loader') worked for me.

{test: /\.json$/, loader: "json"}

[es6Test]

thanks but still no luck:

module.exports = {
  context: __dirname,
  entry: {
    main: [
      "./index"
    ]
  },
  output: {
    path: __dirname + "/dist",
    filename: "components.js"
  },
  devtool: "inline-source-map",
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        },
        include: [__dirname + '../', __dirname],
        exclude: [__dirname + '/node_modules', __dirname + '/dist']

      },
      {test: /\.json$/, loader: "json"}


    ]
  },
  resolve: {
    // you can now require('file') instead of require('file.js')
    extensions: ['', '.js', '.json']
  }
}

[es6Test]

{
  "name": "__Demo__",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack --watch --watch-polling"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.4.5",
    "babel-loader": "^6.2.1",
    "babel-preset-es2015": "^6.3.13",
    "css-loader": "^0.23.1",
    "json-loader": "^0.5.4",
    "style-loader": "^0.13.0",
    "stylus-loader": "^1.5.1",
    "webpack": "^1.12.12"
  }
}

[isaac-peka]

I'm experiencing the same problem, path is definitely correct

[xtuc]

I solved the problem by adding an include key in the loader object.

{test: /\.json$/, loader: "json", include: "path/to/your/sources"}

[ashelley]

weirdly... I was just having this issue and after running an npm install --save again it started resolving shrug

[jandob]

Had the same problem but then recognized that the json-loader was not installed (and not in package.json). Shouldn't webpack complain in this case? Seems like a bug in webpack.

[tianleiyiji123]

it worked when i use the "var Page = require('json!./json/foo.json');",but not worked in "webpack.config.js"

[kxxoling]

Same issue. Fixed by adding include in webpack.config.js and using var foo = require('json!./path/to/foo.json') instead of var foo = require('./path/to/foo').

[xiangzhuyuan]

I think the most case of this issue is just because you didn't add the dev dependency for css-loader. since most of docs about css-loader just mention how to use that in js file.

[kevinSuttle]

This is still an issue as of Webpack 2.1.0-beta25. Using that json! syntax has never once worked with require() for me, no matter which path I give it. Using json-loader either breaks, or fails silently.

[JWplanet]

I could solve similiar error(not in mock) with npm install json-loader --save. I didn't install it.

[niedomnie]

I've got the same problem - json load directly works, by webpack does not.

works: import config from "!json!../../cfg/config.json" (I need to have !json! istead of json!)
does not: import config from "../../cfg/config.json and either in webpack.config { loader: 'json-loader', test: /.json$/ } or { loader: 'json', test: /.json$/ } or with include option - all does not work

versions:
"babel-core": "^6.18.2",
"babel-loader": "^6.2.7",
"json-loader": "^0.5.4",
"webpack": "^1.13.3"

[Kerita]

I have absolutely installed all packages,but I also met this problem.When I do 'npm install json-loader --save' like JWplanet above ,it worked.I hoped that it would help you.

[fellipejsousa]

In webpack:
{ test: /\.json$/, include: helpers.root('public', 'data'), loader: 'raw' },

In main.js:
json = require("json-loader!./conteudo.json"),

in mains.js example:
carregaIdiomaPadrao: function () { $.i18n().load(json); if(minhasessionlang === null){ carregaIdiomas.alteraIdioma('br'); }else{ carregaIdiomas.alteraIdioma(minhasessionlang); } },

[oleg-am]

"webpack": "^1.13.1",
"json-loader": "^0.5.4",

My solution:

• add !json! to import path:
  import { version } from '!json!../../config/version.json';
• add loader to WebPack preloaders:

module: {
          preLoaders: [
              {
                test: /\.json$/,
                loader: 'json-loader',
                include: '../../config/version.json',
              },
            ]
      }

[Valerz]

Thanks @oleg-am
Adding !json! to import path solved this for me

[vieillecam]

Any update on this issue ?
I still having the problem, even with !json! or with json-loader in config file or even with pre-loader.
I'm always having : SyntaxError: Unexpected token � in JSON at position 0

[michael-ciniawsky]

@vieillecam I'm not 💯 on this but if you're on webpack v2 I think json-loaderis obsolete (Core Integration) could you try without any JSON specific setup?

I need to wait for reply on the webpack slack regarding this, in case it shouldn't be solved 😛

[michael-ciniawsky]

@vieillecam See #44 && https://webpack.js.org/guides/migrating/#json-loader-is-not-required-anymore

[vieillecam]

Thanks for you reply, it's already what I tried also without success. I'm not loading the loader explicitly and still receive special characters before the json loaded by webpack, as it was loaded already by something that put theses strange characters.

[Valerz]

I've seen this issue before with a json file having the diammond ? character. Some text editors could pick it up and some didn't. From memory sublime text did but atom didn't. Either try open the json in a different text editor and you should see it or copy the contents into a notepad and save that as the json.

[es6Test]

unsubscribing from my own thread, doesn't bother me anymore with WP2

[michael-ciniawsky]

@es6Test 👍

[michael-ciniawsky]

@vieillecam See @pizdetss comment and if you still got regressions either open a new issue and a test repo for reproduction would be appreciated also 😛 , e.g does it happen with every JSON file or with specific ones generated somewhere etc...

[vieillecam]

@pizdetss Thanks for you comment, that was exactly my problem, I was doing my Json file only with Visual Studio Code and Sublime text and both of them were adding these extra ranges characters... Editing it with notepad++ resolve the issue. Thanks !

[sughanpandita]

"Module not found: Error: Can't resolve 'foo.json"
'use strict';

const webpack = require("webpack");
const path = require('path');

module.exports = {
entry: {
app: './build/aws.js',
libraries: ['./src/libraries.js']
},

resolve: {

modules: [
'node_modules',
path.resolve('./build'),
path.resolve('.'),
path.resolve('../../../lib')
]
},

plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'libraries',
filename: 'lib.bundle.js'
})
],

output: {
path: './dist',
filename: 'bundle.js'
},
rules: [
{
test: /.json$/,
use: 'json-loader'
}
],
loaders:[

 { test: /vendor\/.+\.(jsx|js)$/,
     loader: 'imports?jQuery=jquery,$=jquery,this=>window',
 },

]
};

AWS.JSX
import foo from 'foo.json'

[sigeje]

I got the same problem.

"json-loader": "^0.5.4",
"webpack": "^1.13.3",

import text from './titles.json'

solved by adding './' before filename as per below

import text from './titles.json'

[ayslanf]

I'd suggest you play a little bit with the paths like ./../../temp/sample.json for example, depending where your request comes from it doesn't resolve ./ as a root.