Skip to content

Conversation

@maxburs
Copy link

@maxburs maxburs commented Jul 25, 2023

module and export/import are meant to reference es module files. Our bundler (Parcel) throws an error when parses react-azure-maps.es5.js an doesn't find any exports.

Node docs on the "exports" property: https://nodejs.org/api/packages.html#conditional-exports. "main": https://nodejs.org/api/packages.html#main. "module" was a proposal that wasn't adopted and isn't officially supported. Some bundlers still use it.

@yulinscottkang
Copy link
Contributor

hi @maxburs, I ran a quick test with parcel@2.9.3, and it seems to be working fine for me. Btw, I think the original author has removed commonjs support in react-azure-maps@0.2.1 (PR) in favor of esmodule.

package.json

{
  "name": "parcel-react-azure-maps",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel": "^2.9.3",
    "process": "^0.11.10"
  },
  "dependencies": {
    "azure-maps-control": "^3.0.0-preview.10",
    "react": "^18.2.0",
    "react-azure-maps": "^1.0.0-beta.3",
    "react-dom": "^18.2.0"
  }
}

src/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My Parcel App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="index.js"></script>
  </body>
</html>

src/index.js

import { createRoot } from "react-dom/client";
import { App } from "./App";

const container = document.getElementById("app");
const root = createRoot(container)
root.render(<App />);

src/App.js

import { AzureMap, AzureMapsProvider } from "react-azure-maps";
import "azure-maps-control/dist/atlas.min.css"

const option = {
  zoom: 12,
  center: [-122.335, 47.62],
  authOptions: {
    authType: "subscriptionKey",
    subscriptionKey: "",
  },
};

export function App() {
  return (
    <div style={{ height: "300px" }}>
      <AzureMapsProvider>
        <AzureMap options={option} />
      </AzureMapsProvider>
    </div>
  );
}
npx parcel src/index.html

Screenshot 2023-07-26 165117

@maxburs
Copy link
Author

maxburs commented Oct 4, 2023

Looks like your right, sorry for the noise

@maxburs maxburs closed this Oct 4, 2023
@maxburs maxburs deleted the patch-2 branch October 4, 2023 20:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants