Module not found - Githubissues

UglyHobbitFeet commented 2 years ago

Tried v5.0.3 and got

Module not found: Error: Package path ./dist/ol-contextmenu is not exported from package /app/node_modules/ol-contextmenu (see exports field in /app/node_modules/ol-contextmenu/package.json)

The way I am using it in vue is

<script lang="ts">
  import 'ol-contextmenu/dist/ol-contextmenu.min.css';

Which is the way it was working in v4.1.0

UglyHobbitFeet commented 2 years ago

FWIW I've also tried the following with no luck: import 'ol-contextmenu/dist/ol-contextmenu.css'; import 'ol-contextmenu/ol-contextmenu.css';

jonataswalker commented 2 years ago

In the examples folder I've used this way:

@import 'ol/ol.css';
@import 'ol-contextmenu/ol-contextmenu.css';

Can you try this way for now?

jonataswalker commented 2 years ago

I have this code in package.json

    "exports": {
        ".": {
            "import": "./dist/ol-contextmenu.js",
            "require": "./dist/ol-contextmenu.umd.cjs",
            "types": "./dist/ol-contextmenu.d.ts"
        },
        "./ol-contextmenu.css": {
            "import": "./dist/ol-contextmenu.css",
            "require": "./dist/ol-contextmenu.css"
        }
    },

Not sure what else I have to do.

UglyHobbitFeet commented 2 years ago

Using the at symbol gives a parsing error in vue. So the provided examples do not work. Is there a difference in package.json between the 2 versions which would account for this?

jonataswalker commented 2 years ago

@import is within your css file, right?

UglyHobbitFeet commented 2 years ago

No, it is not. It is in a .vue file which compiles the script tag contents. I don't really have a css file I use but I can create one and try

jonataswalker commented 2 years ago

And how about this?

<template>
  <router-view />
</template>

<style lang="scss">
@import 'ol-contextmenu/ol-contextmenu.css';

body {
  font-family: 'Source Sans Pro', sans-serif;
  background: $white;
  color: #333;
}
</style>

UglyHobbitFeet commented 2 years ago

I tried adding the @import to a separate css file as I mentioned in an earlier comment.

In order to avoid similar errors I also had to change the Context from import ContextMenu from 'ol-contextmenu/dist/ol-contextmenu'; to import ContextMenu from 'ol-contextmenu';

The code now compiles with no errors, however the ContextMenu does not show. So something is still off about the v5.0.3 over v4.1.0

I will also try with the code blurb you just posted

UglyHobbitFeet commented 2 years ago

The style tag you provided results in the same error: Syntax Error: Error: Package path ./ol-contextmenu.css is not exported from package /app/node_modules/ol-contextmenu (see exports field in /app/node_modules/ol-contextmenu/package.json)

jonataswalker commented 2 years ago

Are you able to provide a minimal reproduction?

UglyHobbitFeet commented 2 years ago

Unfortunately not, sorry

UglyHobbitFeet commented 2 years ago

I took a cursory look at the package.json from v4.1.0 and it looks pretty different than the current one. perhaps the introduction of the exports, modules, types, etc fields are introducing something that is causing the issue, since v4.1.0 works as expected

jonataswalker commented 2 years ago

Which bundler are you using?

UglyHobbitFeet commented 2 years ago

I'm not sure where to look for that information offhand. Would it be in my package.json file or an npm/docker command etc

On Sat, Sep 24, 2022, 8:11 AM Jonatas Walker @.***> wrote:

Which bundler are you using?

— Reply to this email directly, view it on GitHub https://github.com/jonataswalker/ol-contextmenu/issues/229#issuecomment-1256954718, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALBDS7WR2XMVKE7J7OUUKQ3V73VVPANCNFSM6AAAAAAQTIUXZE . You are receiving this because you authored the thread.Message ID: @.***>

UglyHobbitFeet commented 2 years ago

I use the latest vue-cli for vue v2 if that's what you're looking for

On Sat, Sep 24, 2022, 8:51 AM Jeremy D @.***> wrote:

I'm not sure where to look for that information offhand. Would it be in my package.json file or an npm/docker command etc

On Sat, Sep 24, 2022, 8:11 AM Jonatas Walker @.***> wrote:

Which bundler are you using?

— Reply to this email directly, view it on GitHub https://github.com/jonataswalker/ol-contextmenu/issues/229#issuecomment-1256954718, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALBDS7WR2XMVKE7J7OUUKQ3V73VVPANCNFSM6AAAAAAQTIUXZE . You are receiving this because you authored the thread.Message ID: @.***>

jonataswalker commented 2 years ago

There's no enough information to continue the investigation.

Generally anyone reporting a problem should provide a reproduction.

UglyHobbitFeet commented 2 years ago

I can include a package.json file if that helps but I don't have a project I can include

On Sat, Sep 24, 2022, 9:12 AM Jonatas Walker @.***> wrote:

There's no enough information to continue the investigation.

Generally anyone reporting a problem should provide a reproduction.

— Reply to this email directly, view it on GitHub https://github.com/jonataswalker/ol-contextmenu/issues/229#issuecomment-1256965695, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALBDS7T5LD7CZJBZ5QNOJ53V7344TANCNFSM6AAAAAAQTIUXZE . You are receiving this because you authored the thread.Message ID: @.***>

UglyHobbitFeet commented 2 years ago

I am building it via docker as such:

FROM node:16.14.2-alpine3.15
RUN npm ci --no-audit --progress=false && npm run build

Here is the package.json that I am using.

{
  "name": "ol-test",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "build": "vue-cli-service build --modern",
    "lint": "vue-cli-service lint",
    "start": "vue-cli-service serve"
  },
  "dependencies": {
    "@graphql-typed-document-node/core": "^3.1.1",
    "@mdi/js": "^7.0.96",
    "apollo-cache-inmemory": "^1.6.6",
    "apollo-client": "^2.6.10",
    "apollo-link": "^1.2.14",
    "apollo-link-context": "^1.0.20",
    "apollo-link-http": "^1.5.17",
    "apollo-link-ws": "^1.0.20",
    "apollo-utilities": "^1.3.4",
    "axios": "^0.27.2",
    "chart.js": "^3.9.1",
    "chartjs-plugin-zoom": "^1.2.1",
    "core-js": "^3.25.2",
    "dot-properties": "^1.0.1",
    "fontsource-roboto": "^4.0.0",
    "graphql": "^16.6.0",
    "graphql-tag": "^2.12.6",
    "he": "^1.2.0",
    "json2csv": "^5.0.7",
    "mitt": "^3.0.0",
    "ol": "^7.1.0",
    "ol-contextmenu": "^5.3.0",
    "sortablejs": "^1.15.0",
    "subscriptions-transport-ws": "^0.11.0",
    "uuid": "^9.0.0",
    "vue": "^2.7.10",
    "vue-apollo": "^3.1.0",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^9.1.2",
    "vue-router": "^3.6.5",
    "vuetify": "^2.6.10",
    "vuex": "^3.4.0",
    "vuex-class": "^0.3.2",
    "vuex-module-decorators": "^1.2.0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.37.0",
    "@typescript-eslint/parser": "^5.37.0",
    "@vue/cli-plugin-babel": "^5.0.8",
    "@vue/cli-plugin-eslint": "^5.0.8",
    "@vue/cli-plugin-router": "^5.0.8",
    "@vue/cli-plugin-typescript": "^5.0.8",
    "@vue/cli-plugin-vuex": "^5.0.8",
    "@vue/cli-service": "^5.0.8",
    "@vue/eslint-config-airbnb": "^6.0.0",
    "@vue/eslint-config-typescript": "^11.0.1",
    "copy-webpack-plugin": "^11.0.0",
    "eslint": "^8.23.1",
    "eslint-plugin-vue": "^9.5.1",
    "eslint-plugin-vuejs-accessibility": "^1.2.0",
    "sass": "^1.54.9",
    "sass-loader": "^13.0.2",
    "terser-webpack-plugin": "^5.3.6",
    "typescript": "^4.8.3",
    "vue-cli-plugin-vuetify": "^2.5.8",
    "vue-template-compiler": "^2.7.9",
    "vuetify-loader": "^1.9.2"
  },
  "optionalDependencies": {
    "fsevents": "^2.3.2"
  }
}

UglyHobbitFeet commented 2 years ago

A quick vue template would look like:

<template>
  <div></div>
</template>
<script lang="ts">
  import Map from 'ol/Map';
  import 'ol-contextmenu/dist/ol-contextmenu.min.css';
  import ContextMenu from 'ol-contextmenu/dist/ol-contextmenu';
  ...
  mounted() {
    const someContextMenuItems = [blah blah];
    const contextMenu = new ContextMenu({
      width: 400,
      defaultItems: true,
      items: someContextMenuItems,
    });
    contextMenu.on('open', (evt) => { ... blah blah});
    this.someMap.addControl(contextMenu);
  }
</script>

UglyHobbitFeet commented 1 year ago

I came up with a temporary (but undesirable) workaround. I had to manually copy/paste the contents of the css file inline since the import was complaining about the css being private aka not exposed (Syntax Error: Error: Package path ./ol-contextmenu.css is not exported from package /app/node_modules/ol-contextmenu (see exports field in /app/node_modules/ol-contextmenu/package.json))

In my .vue file I have

<template>
  <div></div>
</template>
<script lang="ts">
    import ContextMenu from 'ol-contextmenu';
</script>
<style lang="scss">
    .ol-ctx-menu-container{position:absolute; ....
</style>

jonataswalker commented 1 year ago

Sorry, I admit, my feedback has been horrible.

Closing as I have no clue if this is still an issue, please reopen a new one with a repro.

UglyHobbitFeet commented 1 year ago

Seems to work fine with vue3 and vite

On Sat, Mar 11, 2023, 7:48 AM Jonatas Walker @.***> wrote:

Closed #229 https://github.com/jonataswalker/ol-contextmenu/issues/229 as completed.

— Reply to this email directly, view it on GitHub https://github.com/jonataswalker/ol-contextmenu/issues/229#event-8723963772, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALBDS7WAB3ILJMYM6PXF52TW3RYCZANCNFSM6AAAAAAQTIUXZE . You are receiving this because you authored the thread.Message ID: @.***>

jonataswalker / ol-contextmenu

Module not found #229