Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

V1.2.0, with ES6 module change can no longer use require? #997

Closed
jaybo opened this issue Jul 22, 2020 · 7 comments · Fixed by #1004
Closed

V1.2.0, with ES6 module change can no longer use require? #997

jaybo opened this issue Jul 22, 2020 · 7 comments · Fixed by #1004

Comments

@jaybo
Copy link

jaybo commented Jul 22, 2020

mapbox-gl-js version: 1.11.0
mapbox-gl-draw version: 1.2.0

Steps to Trigger Behavior

  1. Had working code using:
    MapboxDraw = require("@mapbox/mapbox-gl-draw");
  2. Yarn upgrade to MapboxDraw 1.2.0
  3. require no longer works. Needed to change to:
    import MapboxDraw from "@mapbox/mapbox-gl-draw";

Documentation in Readme.md page needs updating, or is this some other issue?

@ericclemmons
Copy link

This is actually a bigger problem when adding maps within a project like Next.js:

event - build page: /
wait  - compiling...
error - ./node_modules/jsonlint-lines/lib/jsonlint.js
Module not found: Can't resolve 'fs' in '.../node_modules/jsonlint-lines/lib'
.../node_modules/@mapbox/mapbox-gl-draw/index.js:1
import runSetup from './src/setup';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at compileFunction (<anonymous>)
    at wrapSafe (internal/modules/cjs/loader.js:1047:16)
    at Module._compile (internal/modules/cjs/loader.js:1097:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:10)
    at Module.load (internal/modules/cjs/loader.js:977:32)
    at Function.Module._load (internal/modules/cjs/loader.js:877:14)
    at Module.require (internal/modules/cjs/loader.js:1019:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at eval (webpack-internal:///@mapbox/mapbox-gl-draw:1:18)
    at Object.@mapbox/mapbox-gl-draw (.../.next/server/static/development/pages/index.js:234:1)

@adrianababakanian
Copy link
Contributor

Thank you for opening @jaybo , you are correct that the readme should be updated to use import rather than require, since v1.2.0 includes an upgrade to ES6 as noted in the changelog.

@adrianababakanian
Copy link
Contributor

@ericclemmons thank you for your feedback, would you be able to open a separate issue expanding on the details of the problem you are seeing? For example, some additional context on your use case, whether the same import statement was working with a version of GL Draw earlier than v1.2.0, etc.

@nogashimoni
Copy link

nogashimoni commented Jan 7, 2021

Any news on this?

@nrgapple
Copy link

This is still an issue and does not work with nextjs

@doliolarzz
Copy link

doliolarzz commented Jan 27, 2021

@nrgapple Currently, this library doesn't work on Server side rendering.
There's a workaround that load the mapbox-gl-draw dynamically at the client side, see the code below:

let MapboxDraw;
if (process.browser) {
  MapboxDraw = require('@mapbox/mapbox-gl-draw');
  require('@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css');
}

which you can call the constructor like this
const _draw = new MapboxDraw.default()

and don't forget to config the next.config.js

module.exports = {
  webpack: (config, options) => {
    config.node = {
      fs: "empty"
    };
    return config;
  }
};

@bradgreens
Copy link

bradgreens commented Feb 2, 2021

Similar to @doliolarzz, I converted my map component to a dynamic import instead of testing for the browser presence.

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 a pull request may close this issue.

7 participants