Resolving a JSON Import Issue with Linaria

Recently, I faced a bug related to the Linaria library that prevented my page from building. I stumbled upon this issue when attempting to import JSON files in a component where Linaria was utilized. Instead of processing the JSON file correctly, Linaria treated it like a JavaScript file, leading to parsing errors. I attempted to exclude all JSON files in the Linaria configuration using a simple regex, but it didn't seem to work properly.

Here's a screenshot of the exact error I encountered: (screenshot here).

Before fixing the issue, my configuration looked like this:

const shaker = require('@linaria/shaker').default;
 
module.exports = {
  rules: [
    {
      test: /\.json/,
      action: 'ignore',
    },
    {
      test: /node_modules/,
      action: 'ignore',
    },
    {
      action: shaker,
    },
  ],
};

As you can see, I'm ignoring all the .json files and node_modules. Additionally, I have the shaker plugin added as the last rule.

After some debugging and setting breakpoints in the code, I discovered that the issue was being caused by the shaker plugin. Under the hood, the rules are applied in reverse order, and the order matters. Since I set the shaker as the last rule, it ran as the first one. As a result, it didn't respect the other rules and failed to ignore the files I intended to exclude, causing the issue.

To fix this problem, I simply needed to place the shaker action as the first rule:

const shaker = require('@linaria/shaker').default;
 
module.exports = {
  rules: [
    {
      action: shaker,
    },
    {
      test: /\.json/,
      action: 'ignore',
    },
    {
      test: /node_modules/,
      action: 'ignore',
    },
  ],
};

By placing the shaker action as the first rule, I was able to resolve the issue and successfully exclude the JSON files and node_modules from processing.