Cannot resolve language files from ../lang/fr.json (react-intl)

[jberes-cmm]

I have a LanguageWrapper component taken directly from a react-intl document example

//LanguageWrapper.jsx
import React, {useState} from 'react';
import {IntlProvider} from 'react-intl';
import French from '../lang/fr.json'
import Arabic from '../lang/ar.json';
import English from '../lang/en.json';

export const LanguageContext = React.createContext();

const local = navigator.language;

let lang;
if (local === 'en') {
  lang = English;
}else {
  if (local === 'fr') {
    lang = French;
  } else {
    lang = Arabic;
  }
}

const LanguageWrapper = (props) => {
  const [locale, setLocale] = useState(local);
  const [messages, setMessages] = useState(lang);

  function selectLanguage(e) {
    const newLocale = e.target.value;
    setLocale(newLocale);
    if (newLocale === 'en') {
      setMessages(English);
    } else {
      if (newLocale === 'fr'){
        setMessages(French);
      } else {
        setMessages(Arabic);
      }
    }
  }

  return (
    <LanguageContext.Provider value = {{locale, selectLanguage}}>
      <IntlProvider messages={messages} locale={locale}>
        {props.children}
      </IntlProvider>
    </LanguageContext.Provider>
  );
}

export default LanguageWrapper;

With a basic App,js (added only for context)

//App.jsx
import React, {useContext} from 'react';
import Header from "./components/Header";
import Footer from "./components/Footer";
import { Switch, Route } from 'react-router'
import './App.css';
import ContentArea from "./components/ContentArea";
import {FormattedMessage} from 'react-intl';
import {LanguageContext} from './components/LanguageWrapper'

function App() {
  const localeCode = navigator.language;
  const languageContext = useContext(LanguageContext)
    return (
        <div data-testid='app-wrapper' className="App">
            <div className="App-header">
                <Switch>
                  <Route>
                    <Header/>
                    <ContentArea/>
                    <select value = {languageContext.locale} onChange={languageContext.selectLanguage}>
                      <option value= 'en'>English</option>
                      <option value= 'fr'>French</option>
                      <option value= 'ar'>Arabic</option>
                    </select>
                    <p>
                      <FormattedMessage
                        id = "app.header"
                        defaultMessage="Testing in en-US"
                        values = {{language: localeCode, code: (word)=> <code>{word}</code>}}
                      />
                    </p>
                    <Footer/>
                  </Route>
                </Switch>
            </div>
        </div>
    );
}

export default App;

and a basic index.jsx (added only for context)

//index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
import './index.css';
import LanguageWrapper from './components/LanguageWrapper'

ReactDOM.render(
    <LanguageWrapper>
      <App/>
    </LanguageWrapper>
  document.getElementById('root'),
);

// Hot Module Replacement (HMR) - Remove this snippet to remove HMR.
// Learn more: https://www.snowpack.dev/concepts/hot-module-replacement
if (import.meta.hot) {
    import.meta.hot.accept();
}

Now the problem here is that I have:

test-ui:
l->src
     l-> components
           l-> LanguageWrapper.jsx
     l-> lang
           l-> ar.json
           l-> en.json
           l-> fr.json
l->index.js

but when I run npm run build I get:
UnhandledPromiseRejectionWarning: Error: Can't resolve '../lang/fr.json' in '/Users/me/workSpace/apps/testWebApp/test-ui/build/dist'

I have absolutely no idea what I'm doing wrong but I feel it's small... Can anyone assist me?

[jberes-cmm]

The full error code:

❯ npm run build

> @ build /Users/me/workSpace/cdm/testWebApp/sui-ui
> snowpack build

[14:41:09] [snowpack] ! building files...
[14:41:09] [snowpack] ✔ files built. [0.13s]
[14:41:09] [snowpack] ! building dependencies...
[14:41:15] [snowpack] ✔ dependencies built. [5.55s]
[14:41:15] [snowpack] ! writing to disk...
[14:41:15] [snowpack] ✔ write complete. [0.06s]
[14:41:15] [snowpack] ! optimizing build...
[snowpack-plugin-hash] ℹ Hashing Directory /Users/me/workSpace/cdm/testWebApp/test-ui/build...
falling back to enhanced-resolve ../lang/fr.json
(node:31152) UnhandledPromiseRejectionWarning: Error: Can't resolve '../lang/fr.json' in '/Users/me/workSpace/cdm/testWebApp/test-ui/build/dist'
    at finishWithoutResolve (/Users/me/workSpace/cdm/testWebApp/test-ui/node_modules/enhanced-resolve/lib/Resolver.js:293:18)
    at /Users/me/workSpace/cdm/testWebApp/test-ui/node_modules/enhanced-resolve/lib/Resolver.js:362:15
    at /Users/me/workSpace/cdm/testWebApp/test-ui/node_modules/enhanced-resolve/lib/Resolver.js:410:5
    at eval (eval at create (/Users/me/workSpace/cdm/testWebApp/test-ui/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /Users/me/workSpace/cdm/testWebApp/test-ui/node_modules/enhanced-resolve/lib/Resolver.js:410:5
    at eval (eval at create (/Users/me/workSpace/cdm/testWebApp/test-ui/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at /Users/me/workSpace/cdm/testWebApp/test-ui/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:87:43
    at /Users/me/workSpace/cdm/testWebApp/test-ui/node_modules/enhanced-resolve/lib/Resolver.js:410:5
    at eval (eval at create (/Users/me/workSpace/cdm/testWebApp/test-ui/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /Users/me/workSpace/cdm/testWebApp/test-ui/node_modules/enhanced-resolve/lib/Resolver.js:410:5
    at eval (eval at create (/Users/me/workSpace/cdm/testWebApp/test-ui/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at /Users/me/workSpace/cdm/testWebApp/test-ui/node_modules/enhanced-resolve/lib/Resolver.js:410:5
    at eval (eval at create (/Users/me/workSpace/cdm/testWebApp/test-ui/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at /Users/me/workSpace/cdm/testWebApp/test-ui/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:87:43
    at /Users/me/workSpace/cdm/testWebApp/test-ui/node_modules/enhanced-resolve/lib/Resolver.js:410:5
    at eval (eval at create (/Users/me/workSpace/cdm/testWebApp/test-ui/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:31152) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 44)
(node:31152) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Nodejs: 14.17.1