Dynamic Import of JSON File skips import of Keys with Fullstop/Dot (.)

[fritzfelix]

Describe the bug

When dynamiclly importing a JSON file that contains keys with fullstops in it (i.e. foo.bar), these key/value pairs are not imported but skipped:

de.json:

{
    "foo": "bar",
    "foo.bar": "baz"
}

Import:

const thing = await import(`./translations/${locale}.json`);
console.log(thing);

Output:
It can be seen, that "foo.bar" only exists under "default":

Expected Output (previously working with Webpack Dynamic Import):
"foo.bar" exists at top level:

Reproduction

https://stackblitz.com/edit/vitejs-vite-3yrpdy?file=main.js

Steps to reproduce

No response

System Info

System:
    OS: macOS 13.0.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 62.20 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.12.1 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.19.2 - /opt/homebrew/bin/npm
  Browsers:
    Brave Browser: 107.1.45.113
    Chrome: 108.0.5359.98
    Firefox Developer Edition: 108.0
    Safari: 16.1

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

This is not a bug. foo.bar is not a valid name for export.

export const foo.bar = '' // this is not a valid js syntax

If we use "Arbitrary module namespace identifier names" that landed in ES2022, we could support this:

const foo_bar = ''

export { foo_bar as 'foo.bar' }

But this is not supported by rollup yet (rollup/rollup#4322).

[steventilator]

I am facing a similar issue. I have a JSON file with translations. Some keys contain spaces. For example: "Add employee": "Mitarbeiter hinzufügen". These keys are not included in the imported JSON file.

How can I fix it?

[steventilator]

Ha, I just fixed it. For future reference:

Does not work:

import * as de from './locales/de.json'

Works:

import de from './locales/de.json'

[jonahgoldwastaken]

Hey, just checking in to ask what the progress is on fixing this? We just migrated to Vite and this is causing a big regression in the way we translate our app. We've implemented a workaround but it's less than pretty and would like to be able to just dynamically import the JSON files directly.

[bluwy]

In the last meeting we had discussed that we could support a new json.includeArbitraryNames option to enable this.