"npm install oltb" issue

[gokhanax]

"I am adding it to my React project with npm install oltb and following the examples in the npm directory within the examples directory. However, it still throws numerous errors like the ones below. When used as an npm package, there seems to be an issue with the references."

ERROR in ./node_modules/oltb/src/oltb/js/oltb.js 2:0-37
Module not found: Error: Can't resolve 'ol/proj' in 'D:\Users\Gokhan\reactoltb\my-app\node_modules\oltb\src\oltb\js'
Did you mean 'proj.js'?
BREAKING CHANGE: The request 'ol/proj' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/oltb/src/oltb/js/oltb.js 3:0-96
Module not found: Error: Can't resolve 'ol/interaction' in 'D:\Users\Gokhan\reactoltb\my-app\node_modules\oltb\src\oltb\js'
Did you mean 'interaction.js'?
BREAKING CHANGE: The request 'ol/interaction' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/oltb/src/oltb/js/oltb.js 4:0-113
Module not found: Error: Can't resolve 'ol/events/condition' in 'D:\Users\Gokhan\reactoltb\my-app\node_modules\oltb\src\oltb\js'
Did you mean 'condition.js'?
BREAKING CHANGE: The request 'ol/events/condition' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/oltb/src/oltb/js/oltb.js 7:0-41
Module not found: Error: Can't resolve './browser-prototypes/json-cycle' in 'D:\Users\Gokhan\reactoltb\my-app\node_modules\oltb\src\oltb\js'
Did you mean 'json-cycle.js'?
BREAKING CHANGE: The request './browser-prototypes/json-cycle' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/oltb/src/oltb/js/oltb.js 8:0-37
Module not found: Error: Can't resolve './browser-prototypes/string' in 'D:\Users\Gokhan\reactoltb\my-app\node_modules\oltb\src\oltb\js'
Did you mean 'string.js'?
BREAKING CHANGE: The request './browser-prototypes/string' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/oltb/src/oltb/js/oltb.js 9:0-43
Module not found: Error: Can't resolve './browser-prototypes/slide-toggle' in 'D:\Users\Gokhan\reactoltb\my-app\node_modules\oltb\src\oltb\js'
Did you mean 'slide-toggle.js'?
BREAKING CHANGE: The request './browser-prototypes/slide-toggle' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/oltb/src/oltb/js/oltb.js 13:0-52
Module not found: Error: Can't resolve './ui-common/ui-toasts/toast' in 'D:\Users\Gokhan\reactoltb\my-app\node_modules\oltb\src\oltb\js'
Did you mean 'toast.js'?
BREAKING CHANGE: The request './ui-common/ui-toasts/toast' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/oltb/src/oltb/js/oltb.js 14:0-52
Module not found: Error: Can't resolve './ui-common/ui-modals/modal' in 'D:\Users\Gokhan\reactoltb\my-app\node_modules\oltb\src\oltb\js'
Did you mean 'modal.js'?
BREAKING CHANGE: The request './ui-common/ui-modals/modal' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/oltb/src/oltb/js/oltb.js 15:0-55
Module not found: Error: Can't resolve './ui-common/ui-dialogs/dialog' in 'D:\Users\Gokhan\reactoltb\my-app\node_modules\oltb\src\oltb\js'
Did you mean 'dialog.js'?
BREAKING CHANGE: The request './ui-common/ui-dialogs/dialog' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/oltb/src/oltb/js/oltb.js 16:0-56
Module not found: Error: Can't resolve './browser-constants/settings' in 'D:\Users\Gokhan\reactoltb\my-app\node_modules\oltb\src\oltb\js'
Did you mean 'settings.js'?
BREAKING CHANGE: The request './browser-constants/settings' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
...

[qulle]

Hi @gokhanax

These problems can be a bit tricky. The history of TS/JS and the different types of build systems has brought us here. But they usually can be fixed in some way.

When installing OLTB through "npm install oltb" other packages will also be installed (those specified under dependencies in package.json in OLTB).

Step 1:
Check that your node_modules contains these packages.

"dependencies": {
    "a-color-picker": "^1.2.1",
    "axios": "^1.7.2",
    "browser-dtector": "^4.1.0",
    "html2canvas": "^1.4.1",
    "jsts": "^2.11.3",
    "lodash": "^4.17.21",
    "many-keys-map": "^2.0.1",
    "moment": "^2.30.1",
    "ol": "^10.0.0",
    "proj4": "^2.11.0",
    "screenfull": "^6.0.2",
    "sortablejs": "^1.15.2",
    "tippy.js": "^6.3.7",
    "uuid": "^10.0.0"
},

Step 2:
Check if your package.json has "main" or "module" specified.

Step 3:
React uses Webpack to run, build and bundle.

Try adding this configuration to tour configuration.

resolve: {
    fullySpecified: false
}

More info here:
https://webpack.js.org/configuration/module/#resolvefullyspecified
facebook/create-react-app#11865

Can you share more info about your project:

• package.json
• tsconfig.(ts | json)
• webpack.config.(js | ts | json) (or if you are using Next.js or Vite).

Right now OLTB is written in vanilla js. Sometimes a little more configuration is required when you want to use this in a typescript project. Eventually I will lift everything to TypeScript, but not in the next few months.

[gokhanax]

Hi @qulle

Thank you very much for your response. I will try again, paying attention to the points you mentioned. Additionally, would it be possible for you to share a sample React project with npm added?

Best regards.

[qulle]

Yes i can add one example for React and one for Angular.

Any progress on your issue?