remix
remix copied to clipboard
Can't import JSON file from installed module
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)
It seems I cannot import JSON files stored in node_modules. I can correctly import JSON files stored locally.
facing the same issue.
Same problem here
Same issue here. Is there a workaround?
Not really a solution, but switching to Vite eliminates the issue. in production, I currently move the JSON files inside my source repo temporarily
This is quite annoying because it is blocking me to upgrade my entire project to ESM. Any news?
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.