import protomaps from 'protomaps' module not found

[tarngerine]

hi! i'm playing with this library in a react context and the importer doesnt seem to be working:

https://codesandbox.io/s/modern-pine-wn2kq?file=/src/App.tsx

1. open the CSB above
2. try to run the app
3. see error

any tips here on how to use in this environment? all of the demos use a script tag import from unpkg. thank you!

[bdon]

Hmm, this is definitely broken and I ought to make it work - this is the only project I know if that includes protomaps.js as a dependency instead of using a script includes https://github.com/protomaps/protomaps.js-themes and it works, though it may just happen to work because it's also using esbuild/typescript

From what I can tell using create-react-app fails in the same way as your example above, so I'm probably missing something in the configuration at https://github.com/protomaps/protomaps.js/blob/master/package.json ; will need to investigate further

also might help to look at the files uploaded to npm https://unpkg.com/browse/protomaps@0.3.0/

[bdon]

@tarngerine here is a forked example, can you let me know if it works? https://codesandbox.io/s/serene-bhabha-ytez0?file=/src/App.tsx

To summarize:

• protomaps.js now includes TSC-transpiled plain es6 modules in the NPM distribution
• I also needed to change https://github.com/protomaps/PMTiles/blob/master/js/package.json to output a plain es6 module so create-react-app can use it by default (uses classProperties)
• I think another way to accomplish this is to provide a UMD build, but esbuild doesn't support that, and I would prefer to optimize for the main two use cases of 1. single-file script includes and 2) es6 module dependency as we're trying here. But if anyone else has a use case not covered by this revised packaging, let me know.

Modifications to your example:

• I think useRef Is the best way to populate a component with a Leaflet map
• Need to include the leaflet.css on line 5 at the top to display the map properly

[tarngerine]

awesome, ive updated my CSB with the tweaks you suggested and it works great in 0.3.0! thank you

[fraank]

I guess in the latest Version (1.19.0) the importing in react should look like:

import { leafletLayer } from "protomaps";
...
const layer = leafletLayer({ url: url, maxZoom: 14 });

This is working as expected in a codesandbox, but not in my local react setup. protomaps.js version is the same (1.19.0), as well as all other dependencies. I'm always getting:

Uncaught TypeError: (0 , _protomaps.leafletLayer) is not a function

Any idea where sth possibly can go wrong further?

[bdon]

@fraank what bundler are you using (webpack, rollup, esbuild) etc? that would help me reproduce this. you can email me a zip including your package.json as well.

[fraank]

It is a python project where gulp is used. This are the relevant parts of our package.json:

{
  "name": "app",
  "version": "0.1.0",
  "dependencies": {
    "@babel/core": "^7.16.7",
    "@babel/preset-env": "^7.16.8",
    "gulp-babel": "^8.0.0",
    "leaflet": "^1.7.1",
    "postcss": "^8.4.5",
    "protomaps": "^1.16.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-leaflet": "^3.2.5",
    "sass": "^1.48.0"
  },
  "devDependencies": {
    "@babel/preset-react": "^7.16.7",
    "autoprefixer": "^10.4.2",
    "babelify": "^10.0.0",
    "browser-sync": "^2.27.7",
    "cssnano": "^5.0.15",
    "gulp": "^4.0.2",
    "gulp-bro": "^2.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-plumber": "^1.2.1",
    "gulp-postcss": "^9.0.1",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^5.1.0",
    "gulp-uglify-es": "^3.0.0",
    "jquery": "3.6.0",
    "npm-check-updates": "^12.1.0",
    "pixrem": "^5.0.0",
    "react-html-parser": "^2.0.2"
  },
  "engines": {
    "node": ">=12"
  },
  "browserslist": [
    "last 2 versions"
  ],
  "scripts": {
    "dev": "gulp",
    "build": "gulp generate-assets"
  }
}

[bdon]

@fraank are you using a framework that I try myself with those packages so I can reproduce the error?

[fraank]

Really difficult to rebuild from scratch. It was sth. like this.

I guess the easiest thing is to replace gulp with sth. more modern. But only protomaps imports are causing problems. All other npm packages are working fine.

[bdon]

it's going to be impossible for me to reproduce this exactly, but from the error message it seems like this could be Babel related - you could try to fork this repo and change some of the build scripts or keys at https://github.com/protomaps/protomaps.js/blob/master/package.json or lower the version below es2015.

Otherwise you could include the library using a script tag instead of it being part of your build. it should work as long as the Leaflet global is loaded first.

[fraank]

it's going to be impossible for me to reproduce this exactly --> for sure, this meant to be a general question if any other react depending problems are known. thanks anyway!

Otherwise you could include the library using a script tag instead of it being part of your build. it should work as long as the Leaflet global is loaded first. --> you are right. when using https://unpkg.com/protomaps@latest/dist/protomaps.min.js as a script reference in the header this is working:

const layer = protomaps.leafletLayer({
      url: url,
      maxZoom: 14
});

you could try to fork this repo and change some of the build scripts or keys at https://github.com/protomaps/protomaps.js/blob/master/package.json or lower the version below es2015 --> i will do sometime later on and post results here. but for now i'm fine with the script tag.

[bdon]

I would recommend using @1.19.0 instead of @latest for now. I did attempt to reproduce this using gulp but got stuck on conflicts in the dependency list between babel versions. I suspect it is something misconfigured in the protomaps.js package.json, since the other libraries you're including don't have this issue.