file-loader fails with JSON files in Webpack 4 #259

Activity

1. alexander-akait

   added

   priority: 4 (important)

   type: Bug

   severity: 3 (broken)

   semver: Patch

   on Feb 27, 2018
2. enjikaka commented on Feb 27, 2018

   

   enjikaka

   on Feb 27, 2018

   Author

   More actions

   I assume this is related to webpack 4 now handling JSON loading natively

   👍React with 👍2Reacted by Nick Brady and Aakash

   😄React with 😄1Reacted by Aakash

   🎉React with 🎉1Reacted by Aakash

   ❤️React with ❤️2Reacted by Martijn Groeneveldt and Aakash
3. alexander-akait commented on Feb 27, 2018

   

   alexander-akait

   on Feb 27, 2018

   Member

   More actions

   @enjikaka seems bug in webpack@4, he should ignore .json files which loaded other loaders
4. alexander-akait commented on Feb 27, 2018

   

   alexander-akait

   on Feb 27, 2018

   Member

   More actions

   @webpack-bot move to webpack/webpack
5. michael-ciniawsky commented on Feb 27, 2018

   

   michael-ciniawsky

   on Feb 27, 2018

   Member

   More actions

   @see webpack/webpack#6586. Why is the file-loader even needed here ? Either explicitly add the type to the rule in webpack.config.js or use a different extname for inline usage (e.g x.manifest). The inline loader syntax is discouraged for a while now and it would even work in case x-loader supports module.type = 'json'.
6. michael-ciniawsky

   closed this as completedon Feb 27, 2018
7. michael-ciniawsky

   removed

   priority: 4 (important)

   semver: Patch

   severity: 3 (broken)

   type: Bug

   on Feb 27, 2018
8. joelcollyer commented on May 24, 2018

   

   joelcollyer

   on May 24, 2018

   More actions

   For anyone who's encountering the error Module parse failed: Unexpected token m in JSON at position 0 like I was, and you find this thread, you don't need to specify that json files be loaded in any special way.

   Simply require your files like this:

   const langFile = require('./locale/en/lang.json');
   

   Webpack 4.x will do the rest.

   No special tests, configuration, or loaders are needed for .json to be required in your JavaScript.

   👍React with 👍27Reacted by Jason Minnick, rohin123, johnjerrico, pilapila, Hichem ben chaabene, Ricardo Matias, Yury Romanov, Chad Ridings, Ilya Pronin, mekbib-tekle and 17 more

   👎React with 👎10Reacted by Brendon, Aron Jones, Mihail ZI, TemaKozyrev, mibcadet, Wu Haotian, Reet Chowdhary, James Reetzke, Egor Komarov and Smackymander

   😄React with 😄2Reacted by crloshro and Nick Brady

   🎉React with 🎉6Reacted by Hichem ben chaabene, Nick Brady, Paul Zmuda, Nathan Leiby, Nikhil Das Nomula and Vladimir Podolyan

   ❤️React with ❤️6Reacted by Mario Jerkovic, Hichem ben chaabene, Chad Ridings, crloshro, Nick Brady and ikrainiev

   🚀React with 🚀2Reacted by Josh and Marcin "yasiu" Jasiukowicz

   👀React with 👀1Reacted by Adrian
9. rlefever68 commented on Jun 7, 2018

   

   rlefever68

   on Jun 7, 2018

   More actions

   Please check the encoding of your .json file.
   It is probably 'UTF-8 with BOM'.
   Resave the file with pure 'UTF-8' and it should be solved.

   👍React with 👍5Reacted by Dillan Cagnetta, Filip Hurta, Grzegorz Popowicz, johnnotron and JozefPastucha

   🚀React with 🚀1Reacted by Marwen
10. 1 remaining item

    Load more

11. BobbyBabes commented on Jul 6, 2018

    

    BobbyBabes

    on Jul 6, 2018

    More actions

    @joelcollyer The only problem with using require() to read JSON files, is that the file will be cached. Unless it's deleted from require()'s cache.
12. joelcollyer commented on Jul 6, 2018

    

    joelcollyer

    on Jul 6, 2018

    More actions

    @BobbyBabes: I fully agree; it'd be best to fetch json with an async request most of the time.

    In this case we were loading a mandatory language file, so the require isn't so bad. If you try to do that with an import tree shaking gets in the way and the file isn't loaded.

    My point was mostly that no webpack configuration is required for it to understand the loading of a json file (unlike the additional configuration you'd have to do for say, sass, or jsx loading).
13. crloshro commented on Oct 27, 2018

    

    crloshro

    on Oct 27, 2018

    More actions

    @joelcollyer thank you so much, that tip helped me to fix the bug!
14. naretini commented on Feb 14, 2019

    

    naretini

    on Feb 14, 2019

    Last edited by naretini

    More actions

    In my package.json I have:
    "scripts":{ ... "build-mydir01": "webpack --env.ext mydir01 --mode production ./code/mydir01/index.js --output ./public/mydir01/main.js", ... }

    In my webpack.config.js:
    `
    const HtmlWebPackPlugin = require("html-webpack-plugin");

    module.exports = function (env) {
    console.log(env, env);
    const ext = env.ext || 'src';

    const ext_file = require('./code/' + ext + '/extension.json');
    
    return {
        module: {
            rules: [
                {
                    test: /\.(js|jsx)$/,
                    exclude: /node_modules/,
                    use: {
                        loader: "babel-loader"
                    }
                },
                {
                    test: /\.(json)$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {},
                        },
                    ],
                },
                {
                    test: /\.(html)$/,
                    use: [
                        {
                            loader: "html-loader"
                        }
                    ]
                }
            ]
        },
        plugins: [
            new HtmlWebPackPlugin({
                template: `./code/${ext}/index.html`,
                filename: "./index.html"
            })
        ]
    }
    

    };
    `

    After executing:

    npm run build-mydir01

    In my ./public/mydir01/ i see index.html and main.js but extension.json is not moved there....
    What do I miss?

    👍React with 👍2Reacted by Arvin Sevilla and Jérôme Lanteri
15. blachawk commented on Mar 3, 2019

    

    blachawk

    on Mar 3, 2019

    More actions

    Is there any official documentation on how to output JSON files to my /dist folder with Webpack 4?

    Simply adding const langFile = require('./locale/en/lang.json'); to my webpack.config.js file does not tell me much or do much for me with Webpack 4. I still encounter the same error.

    👍React with 👍9Reacted by Alex Matei, Derek Surguy, Cody Swartz, Martin Löper, Arvin Sevilla, Kaelan Cooter, Jérôme Lanteri, Egor Komarov and Johannes Fahrenkrug
16. garkin commented on Oct 14, 2019

    

    garkin

    on Oct 14, 2019

    More actions

    Correct way to use file-loader with JSON in Webpack 4+:

    {
    	test: /\.json$/,
    	loader: 'file-loader',
    	type: 'javascript/auto'
    },

    👍React with 👍20Reacted by kensley, Churbanov Valery, yatohiyori, Michal Trnka, Chamod Pathirana, Kevin Kim, Sandeep Sirodia, Materix, Ahmed Kamal, Yves M. and 10 more

    😄React with 😄3Reacted by Kevin Kim, Kaelan Cooter and Cosmin Ababei

    🎉React with 🎉5Reacted by Sandeep Sirodia, Kevin Kim, Reza Z. Ramadan, Michael Sorensen and Cosmin Ababei

    ❤️React with ❤️5Reacted by Arvin Sevilla, Kevin Kim, Raúl Díaz Poblete, Cosmin Ababei and Olfa Melles

    🚀React with 🚀4Reacted by Kevin Kim, WWQ1993, Cosmin Ababei and Kevin Farrugia
17. zaitebaki commented on Oct 16, 2019

    

    zaitebaki

    on Oct 16, 2019

    More actions

    Correct way to use file-loader with JSON in Webpack 4+:

    {
    	test: /\.json$/,
    	loader: 'file-loader',
    	type: 'javascript/auto'
    },

    best wishes, you awesome :)))
    With saving path:

          {
            test: /\.json$/,
            loader: 'file-loader',
            type: 'javascript/auto',
            options: {
              name() {
                return '[path][name].[ext]';
              },
            },
          }

    👍React with 👍1Reacted by Arvin Sevilla
18. Garwin4j commented on Oct 27, 2019

    

    Garwin4j

    on Oct 27, 2019

    More actions

    Correct way to use file-loader with JSON in Webpack 4+:

    {
    	test: /\.json$/,
    	loader: 'file-loader',
    	type: 'javascript/auto'
    },

    best wishes, you awesome :)))
    With saving path:

          {
            test: /\.json$/,
            loader: 'file-loader',
            type: 'javascript/auto',
            options: {
              name() {
                return '[path][name].[ext]';
              },
            },
          }

    So I do this, the project build and loads, but it seem the JSON import is undefined like it isn't ready the JSON. is anyone else getting this? Does your application still recognize the JSON values after doing tihs.

    👍React with 👍1Reacted by Johan
19. kevinlabx commented on Jan 6, 2020

    

    kevinlabx

    on Jan 6, 2020

    Last edited by kevinlabx

    More actions

    Correct way to use file-loader with JSON in Webpack 4+:

    {
    	test: /\.json$/,
    	loader: 'file-loader',
    	type: 'javascript/auto'
    },

    @garkin
    Thank you this actually works.

    😄React with 😄2Reacted by garkin and Maxim

    🎉React with 🎉2Reacted by Maxim and AlexeyRadkevich
20. stories2 commented on Mar 5, 2020

    

    stories2

    on Mar 5, 2020

    More actions

    Correct way to use file-loader with JSON in Webpack 4+:

    {
    	test: /\.json$/,
    	loader: 'file-loader',
    	type: 'javascript/auto'
    },

    best wishes, you awesome :)))
    With saving path:

          {
            test: /\.json$/,
            loader: 'file-loader',
            type: 'javascript/auto',
            options: {
              name() {
                return '[path][name].[ext]';
              },
            },
          }

    With exclude node_modules it makes best for me.

    {
            test: /\.json$/,
            loader: 'file-loader',
            type: 'javascript/auto',
            exclude: /node_modules/
          }
    
21. RezaZR commented on Apr 24, 2020

    

    RezaZR

    on Apr 24, 2020

    More actions

    Adding esModule works best for me. Thank you for the solution

    {
            test: /\.json$/,
            use: [
              {
                loader: "file-loader",
                options: {
                  esModule: false,
                },
              },
            ],
            type: "javascript/auto",
          },
    
22. Richifg commented on May 2, 2020

    

    Richifg

    on May 2, 2020

    More actions

    Correct way to use file-loader with JSON in Webpack 4+:

    {
    	test: /\.json$/,
    	loader: 'file-loader',
    	type: 'javascript/auto'
    },

    This is working for me, my bundle now builds successfully and I have a separate JSON file, but now my app stop working. The js in the bundle that imports the JSON file is only getting a string with the file name instead of the javascript object I was receiving before extracting the JSON file from the bundle.

    Any idea what can he causing this?
23. Garwin4j commented on May 3, 2020

    

    Garwin4j

    on May 3, 2020

    Last edited by Garwin4j

    More actions

    I had the same problem. For this you have to read the file as a normal text file and transform it at runtime:

     return Axios.get(`/Config.json`, {
            method: 'GET',
          }).then(x => {
            ConfigService.globalConfig = x.data;
            return ConfigService.globalConfig;
          });

    The thing to consider thou is to ensure this is done before the file is used in code.

    Note that I spit out the file at the root of the app:

    {
        test: /\Config.json$/,
        loader: 'file-loader',
        type: 'javascript/auto',
        options: {
          name(file) {
            return '[name].[ext]';
          },
        },
      }

    👍React with 👍1Reacted by Ricardo Fernandez
24. Richifg commented on May 3, 2020

    

    Richifg

    on May 3, 2020

    Last edited by Richifg

    More actions

    @Garwin4j thanks for the quick reply, yes I ended loading the failed asyncronously as well. I did it with fetch api and it worked well.

    fetch('content.json')
          .then((res) => res.json())
          .then((data) => console.log(data))
    

    In this example the file is also at the root.
25. Eli-Black-Work commented on May 7, 2020

    

    Eli-Black-Work

    on May 7, 2020

    More actions

    So, to sum this up:

    If you want Webpack to load the contents of your JSON, so that you can immediately use it in your code, don't use file-loader at all. (#259 (comment))

    Example:

    Your code

    import languages from './languages.json';
    
    console.log(translations);  // { english: 'English', spanish: 'Español' }

    This method has a downside: The entire contents of the JSON file gets bundled into your app's .js file, which of course makes your app larger.

    If you want to load your JSON file via AJAX, use file-loader. (#259 (comment))

    Example:

    Webpack config file

    {
    	test: /\.json$/,
    	loader: 'file-loader',
    	type: 'javascript/auto'
    }

    Your code

    import languagesFileUrl from './languages.json';
    
    console.log(languagesFileUrl);  // This just returns the URL of your JSON file. For example: '/languages.json'. You should then fetch the file via AJAX.
    
    fetch(languagesFileUrl)
    ...

    👍React with 👍2Reacted by Ricardo Fernandez and Michael Walker