Can't import JSON file from installed module

[vixalien]

Reproduction

Can't import JSON documents in app.

import translations from "@shopify/polaris/locales/en.json" assert {
  type: "json",
};

System Info

System:
    OS: Linux 6.6 Arch Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-1065G7 CPU @ 1.30GHz
    Memory: 439.21 MB / 7.33 GB
    Container: Yes
    Shell: 5.2.15 - /bin/bash
  Binaries:
    Node: 20.5.1 - ~/.nvm/versions/node/v20.5.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v20.5.1/bin/yarn
    npm: 9.8.0 - ~/.nvm/versions/node/v20.5.1/bin/npm
    pnpm: 8.10.5 - /usr/bin/pnpm
    bun: 1.0.13 - /usr/bin/bun
  npmPackages:
    @remix-run/css-bundle: ^2.3.0 => 2.3.0 
    @remix-run/dev: ^2.3.0 => 2.3.0 
    @remix-run/eslint-config: ^2.3.0 => 2.3.0 
    @remix-run/node: ^2.3.0 => 2.3.0 
    @remix-run/react: ^2.3.0 => 2.3.0 
    @remix-run/serve: ^2.3.0 => 2.3.0

Used Package Manager

yarn

Expected Behavior

I would expect the import to be imported correctly.

Actual Behavior

It fails with the following error log:

✘ [ERROR] /home/alien/sites/rwarrims5/app/polaris/index.tsx: Support for the experimental syntax 'importAttributes' isn't currently enabled (16:61):

  14 |
  15 | import { AppProvider } from "@shopify/polaris";
> 16 | import translations from "@shopify/polaris/locales/en.json" assert {
     |                                                             ^
  17 |   type: "json",
  18 | };
  19 |

Add @babel/plugin-syntax-import-attributes (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-import-attributes) to the 'plugins' section of your Babel config to enable parsing. [plugin remix-hmr]

    app/root.tsx:22:28:
      22 │ import PolarisProvider from "./polaris";
         ╵                             ~~~~~~~~~~~

  This error came from the "onLoad" callback registered here:

    node_modules/@remix-run/dev/dist/compiler/js/plugins/hmr.js:149:12:
      149 │       build.onLoad({
          ╵             ~~~~~~

    at setup (/home/alien/sites/rwarrims5/node_modules/@remix-run/dev/dist/compiler/js/plugins/hmr.js:149:13)
    at handlePlugins (/home/alien/sites/rwarrims5/node_modules/esbuild/lib/main.js:1279:21)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

[vixalien]

It seems I cannot import JSON files stored in node_modules. I can correctly import JSON files stored locally.

[dhanush-marmeto]

facing the same issue.

[tobi110289]

Same problem here

[jseparovic]

Same issue here. Is there a workaround?

[vixalien]

Not really a solution, but switching to Vite eliminates the issue. in production, I currently move the JSON files inside my source repo temporarily

[nullndr]

This is quite annoying because it is blocking me to upgrade my entire project to ESM. Any news?

[gyenabubakar]

Has anyone found a solution to this? I've created an issue in the Shopify Remix template repo.

You can reproduce with this repo — https://github.com/gyenabubakar/remix-dev-bug-repro. Install the packages and run npm exec remix dev.