Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Webpack has odd behavior when used with babel-loader and trying to bundle json files. #4411

Closed
seafoodbuffet opened this issue Mar 2, 2017 · 3 comments

Comments

Projects
None yet
2 participants
@seafoodbuffet
Copy link

commented Mar 2, 2017

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
When using Webpack with babel-loader in conjunction with bundling json files, certain configurations of webpack (which seemingly shouldn't impact bundling behavior) fail.
During bundling, the following error message is emitted.

ERROR in ./src/some.json
Module build failed: SyntaxError: Unexpected token, expected ; (2:6)

  1 | {
> 2 |   "it": "works",
    |       ^
  3 |   "number": 42
  4 | }
  5 | 

If the current behavior is a bug, please provide the steps to reproduce.
This repository, https://github.com/seafoodbuffet/webpack2_json_babel_loader_test contains three testcases.

All of them involve a single js file that requires in a JSON file.

test_json.js

var json = require('./some.json');
console.log(JSON.stringify(json));

some.json (taken from webpack test)

{
  "it": "works",
  "number": 42
}

The following webpack.config.js fails

var webpack = require('webpack');
var path = require('path');

var APP_DIR = path.resolve(__dirname, 'src');
var BUILD_DIR = path.resolve(__dirname, 'build');

var config = {
  entry: APP_DIR + '/test_json.js',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  module : {
    loaders : [
     {
       test : /\.jsx?/,
       include : APP_DIR,
       loader : 'babel-loader'
     }
   ]
  },
  resolve: {
    extensions: ['.js', '.json']
  }
};

module.exports = config;

whereas this works just fine (doesn't use path.resolve for paths)

var webpack = require('webpack');
var path = require('path');

var config = {
  entry: './src/test_json.js',
  output: {
    path: './build',
    filename: 'bundle.js'
  },
  module : {
    loaders : [
     {
       test : /\.jsx?/,
       include : './src',
       loader : 'babel-loader'
     }
   ]
  },
  resolve: {
    extensions: ['.js', '.json']
  }
};

module.exports = config;

and this works too (doesn't use babel-loader)

var webpack = require('webpack');
var path = require('path');

var APP_DIR = path.resolve(__dirname, 'src');
var BUILD_DIR = path.resolve(__dirname, 'build');

var config = {
  entry: APP_DIR + '/test_json.js',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['.js', '.json']
  }
};

module.exports = config;

To see the behavior, clone the repo referenced above, then
npm install && npm test

What is the expected behavior?
I expected the "fail" case to work correctly

If this is a feature request, what is motivation or use case for changing the behavior?

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.
webpack v2.2.1
babel-loader v6.3.2
node v6.10.0
macOS Sierra 10.12.3

@seafoodbuffet

This comment has been minimized.

Copy link
Author

commented Mar 2, 2017

An update, it appears that NOT using path.resolve for the babel loader (test 2 above) causes it to not run (e.g. React syntax isn't understood). This makes me think that the conflict lies in the babel-loader and loading of json as both "working" configurations don't make use of babel-loader.

Should this issue be opened in the babel-loader repo instead?

@sokra

This comment has been minimized.

Copy link
Member

commented Mar 2, 2017

test : /\.jsx?$/,

@seafoodbuffet

This comment has been minimized.

Copy link
Author

commented Mar 2, 2017

Thank you, the configuration change specifically excludes .json from babel-loader, which is what I'm guessing was the issue all along. I've tested it and it now appears to work. Much appreciated.

elsigh added a commit to quip/quip-apps that referenced this issue Aug 25, 2018

fixes JSON import or require, same fix as webpack/webpack#4411 fixes #24
. users will need to reinstall this package to get the fix.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.