找不到模块：错误：无法解析 JSON

Question

I've commanded npm run dev to run my code. However, it pops up several errors the first error it pops up is Module not found: Error: Can't resolve '../../build/contracts/User.json' I don't know why it pops up this Error, since in my webpack.config.js file I've already set

loaders: [
      { test: /\.json$/, use: 'json-loader' },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015'],
          plugins: ['transform-runtime']
        }
      }
    ] 

I've tried to change json-loader into json, but still can't work. https://github.com/webpack-contrib/json-loader/issues/17

webpack.config.js

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: './app/javascripts/app.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'app.js'
  },
  plugins: [
    // Copy our app's index.html to the build folder.
    new CopyWebpackPlugin([
      { from: './app/index.html', to: "index.html" }
    ])
  ],
  module: {
    rules: [
      {
       test: /\.css$/,
       use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /\.(scss)$/,
        use: [{
          loader: 'style-loader', // inject CSS to page
        }, {
          loader: 'css-loader', // translates CSS into CommonJS modules
        }, {
          loader: 'postcss-loader', // Run post css actions
          options: {
            plugins: function () { // post css plugins, can be exported to postcss.config.js
              return [
                require('precss'),
                require('autoprefixer')
              ];
            }
          }
        }, {
          loader: 'sass-loader' // compiles Sass to CSS
        }]
      }          
    ],
    loaders: [
      { test: /\.json$/, use: 'json-loader' },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015'],
          plugins: ['transform-runtime']
        }
      }
    ]
  }
}

My error message:

C:\Users\ASUS\Desktop\truffle-webpack-ipfs-bootstrap-master>npm run dev

> truffle-init-webpack@0.0.2 dev C:\Users\ASUS\Desktop\truffle-webpack-ipfs-bootstrap-master
> webpack-dev-server

http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from C:\Users\ASUS\Desktop\truffle-webpack-ipfs-bootstrap-master
Hash: 7fb1ff8e4626aaa96e95
Version: webpack 2.7.0
Time: 4164ms
     Asset     Size  Chunks                    Chunk Names
    app.js   4.5 MB       0  [emitted]  [big]  main
index.html  2.85 kB          [emitted]
chunk    {0} app.js (main) 4.42 MB [entry] [rendered]
    [0] ./~/buffer/index.js 48.6 kB {0} [built]
    [8] (webpack)/buildin/global.js 509 bytes {0} [built]
   [51] ./~/multiaddr/src/index.js 13.4 kB {0} [built]
  [158] ./~/jquery/dist/jquery.js 272 kB {0} [built]
  [183] ./~/ipfs-api/src/utils/default-config.js 254 bytes {0} [built]
  [185] ./~/ipfs-api/src/utils/send-request.js 5.81 kB {0} [built]
  [189] ./~/isarray/index.js 132 bytes {0} [built]
  [263] ./~/bootstrap/dist/js/bootstrap.js 115 kB {0} [built]
  [264] ./~/ipfs-api/src/index.js 1.14 kB {0} [built]
  [265] ./app/stylesheets/app.scss 1.21 kB {0} [built]
  [266] ./~/truffle-contract/index.js 2.64 kB {0} [built]
  [267] ./~/web3/index.js 193 bytes {0} [built]
  [268] ./app/javascripts/app.js 6.78 kB {0} [built]
  [280] ./~/base64-js/index.js 3.62 kB {0} [built]
  [325] ./~/css-loader!./~/postcss-loader/lib?{}!./~/sass-loader/lib/loader.js!./app/stylesheets/app.scss 2.53 kB {0} [built] [failed] [1 error]
     + 712 hidden modules

ERROR in ./app/javascripts/app.js
Module not found: Error: Can't resolve '../../build/contracts/User.json' in 'C:\Users\ASUS\Desktop\truffle-webpack-ipfs-bootstrap-master\app\javascripts'
 @ ./app/javascripts/app.js 17:0-60

ERROR in ./~/css-loader!./~/postcss-loader/lib?{}!./~/sass-loader/lib/loader.js!./app/stylesheets/app.scss
Module build failed: Error: Cannot find module 'node-sass'
Require stack:
- C:\Users\ASUS\Desktop\truffle-webpack-ipfs-bootstrap-master\node_modules\sass-loader\lib\loader.js
- C:\Users\ASUS\Desktop\truffle-webpack-ipfs-bootstrap-master\node_modules\loader-runner\lib\loadLoader.js
- C:\Users\ASUS\Desktop\truffle-webpack-ipfs-bootstrap-master\node_modules\loader-runner\lib\LoaderRunner.js
- C:\Users\ASUS\Desktop\truffle-webpack-ipfs-bootstrap-master\node_modules\webpack\lib\NormalModule.js
- C:\Users\ASUS\Desktop\truffle-webpack-ipfs-bootstrap-master\node_modules\webpack\lib\NormalModuleFactory.js
- C:\Users\ASUS\Desktop\truffle-webpack-ipfs-bootstrap-master\node_modules\webpack\lib\Compiler.js
- C:\Users\ASUS\Desktop\truffle-webpack-ipfs-bootstrap-master\node_modules\webpack\lib\webpack.js
- C:\Users\ASUS\Desktop\truffle-webpack-ipfs-bootstrap-master\node_modules\webpack-dev-server\bin\webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:610:15)
    at Function.Module._load (internal/modules/cjs/loader.js:526:27)
    at Module.require (internal/modules/cjs/loader.js:666:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (C:\Users\ASUS\Desktop\truffle-webpack-ipfs-bootstrap-master\node_modules\sass-loader\lib\loader.js:3:14)
    at Module._compile (internal/modules/cjs/loader.js:759:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:770:10)
    at Module.load (internal/modules/cjs/loader.js:628:32)
    at Function.Module._load (internal/modules/cjs/loader.js:555:12)
    at Module.require (internal/modules/cjs/loader.js:666:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at loadLoader (C:\Users\ASUS\Desktop\truffle-webpack-ipfs-bootstrap-master\node_modules\loader-runner\lib\loadLoader.js:13:17)
    at iteratePitchingLoaders (C:\Users\ASUS\Desktop\truffle-webpack-ipfs-bootstrap-master\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
    at iteratePitchingLoaders (C:\Users\ASUS\Desktop\truffle-webpack-ipfs-bootstrap-master\node_modules\loader-runner\lib\LoaderRunner.js:165:10)
    at C:\Users\ASUS\Desktop\truffle-webpack-ipfs-bootstrap-master\node_modules\loader-runner\lib\LoaderRunner.js:173:18
    at loadLoader (C:\Users\ASUS\Desktop\truffle-webpack-ipfs-bootstrap-master\node_modules\loader-runner\lib\loadLoader.js:36:3)
 @ ./app/stylesheets/app.scss 4:14-178
 @ ./app/javascripts/app.js
webpack: Failed to compile.

Answer 1

I thing you should check your path

try editing ./myfile.js to ../myfile.js