Webpack 5: "Module parse failed: Unexpected token" when importing JSON file

Bug report

I think I have found a bug in webpack 5. I’m getting the error Module parse failed: Unexpected token (1:13) from webpack. It points to a node_modules/emoji-mart/data/all.json. emoji-mart is a react library that we are using https://github.com/missive/emoji-mart.

What is the current behavior? When I try to compile my application webpack throws an error saying that it can’t parse the json file.

 @ ../../../node_modules/emoji-mart/dist-es/utils/emoji-index/emoji-index.js 1:0-42 3:38-42
 @ ../../../node_modules/emoji-mart/dist-es/index.js 1:0-72 1:0-72
 @ ../jsx/MyApp/screens/screen-inner/sections/Tab/Chat/components/Emojis.tsx
 @ ../jsx/MyApp/screens/screen-inner/sections/Tab/Chat/components/TextFieldForm.tsx
 @ ../jsx/MyApp/screens/screen-inner/sections/Tab/Chat/Chat.tsx 34:0-55 199:18-31
 @ ../jsx/MyApp/screens/screen-inner/sections/Tab/Chat/index.tsx 1:0-33 1:0-33
 @ ../jsx/MyApp/screens/screen-inner/sections/Tab/LiveTabs.tsx 36:0-26 250:80-84
 @ ../jsx/MyApp/screens/screen-inner/sections/Tab/index.tsx 1:0-37 1:0-37
 @ ../jsx/MyApp/screens/screen-inner/Detail.tsx 50:0-43 289:18-26 336:18-26
 @ ../jsx/MyApp/screens/screen-inner/index.tsx 32:0-38 131:43-49
 @ ../jsx/MyApp/App.tsx 40:0-44 66:16-25
 @ ../jsx/MyApp/index.tsx 14:0-24 24:67-70

It points to the first line of node_modules/emoji-mart/dist-es/emoji-index/emoji-index.js:

import data from '../../../data/all.json'; // <= THIS ONEEEE
import NimbleEmojiIndex from './nimble-emoji-index';
var emojiIndex = new NimbleEmojiIndex(data);
var emojis = emojiIndex.emojis,
    emoticons = emojiIndex.emoticons;

function search() {
  return emojiIndex.search.apply(emojiIndex, arguments);
}

export default {
  search: search,
  emojis: emojis,
  emoticons: emoticons
};

Maybe it’s related to this? (image from emoji-mart github docs)

If the current behavior is a bug, please provide the steps to reproduce.

• Install "emoji-mart": "3.0.0" package
• Configure babel loader with react
• Build files with webpack in production mode

Webpack config:

{
 ....
 module: {
   rules: {
     {
  test: /\.(js|tsx|ts)$/,
  include: pathFolder,
  use: [
    {
      loader: 'babel-loader',
      options: {
        cacheDirectory: true,
      },
    },
  ],
},
 {
  test: /\.(graphql|gql)$/,
  include: [
    pathFolder,
    path.join(__dirname, '../../../../node_modules/@xxx'),
  ],
  loader: 'graphql-tag/loader',
},
{
  test: TEST,
  use: [
    'style-loader',
    'css-loader',
   'postcss-loader',
    'sass-loader',
  ],
},
{
  test: /\.svg$/,
  include: pathFolder,
  loader: 'svg-react-loader',
},
   }
 }
 ...
}

What is the expected behavior? It should compile without errors since webpack5 supports json files.

Other relevant information: My solution was to use the json-loader. With json-loader it builds without any errors 🤔 webpack version: 5.36.2 Node.js version: v12.18.2 Operating System: Window 10 Additional tools:

• “webpack-cli”: “4.6.0”
• “terser-webpack-plugin”: “5.1.1”
• “css-minimizer-webpack-plugin”: “^2.0.0”
• “circular-dependency-plugin”: “5.2.2”
• “html-webpack-harddisk-plugin”: “2.0.0”
• “html-webpack-plugin”: “5.3.1”

[sokra]

Change test: /\.m?js/ to test: /\.m?js$/ in your webpack config.

[GiancarlosIO]

@sokra @alexander-akait thanks!