I do not understand the problem. peerDependencies does nothing regarding how a package is required/used at runtime

if you use regular :npm-module build and let webpack post process the dependencies then there should be no issue since shadow-cljs will not be providing any JS deps

if you however configured :js-provider or something then you'll get duplicates

Should not providing the JS deps also be true of the shadow dev server, eg. shadow-cljs watch npm, when it is being yarn linked by the webpacked project? That's the situation we're having difficulty with Maybe there's some setting we've goofed. Though :js-provider certainly isn't being set explicitly. :thinking_face:

Oh! I think it's because webpack sees the node_modules in the linked package, and bundles those as the (duplicated) deps to use for the linked module. It seems like the problematic packages only need to be installed in the :npm-module's node_modules for the Karma test suite to run :thinking_face:

@U01V2D5ALKX, sometimes shadow-cljs can't find all libraries because there are a lot of libs that use some kind of require.resolving or other tricks to find out if their dependencies are available. Do you have crypto npm installed? If so, is it a pure JS library, or is it a native (C/C++) library?

crypto is a native node js library (https://nodejs.org/api/crypto.html), it is polyfilled in node-libs-browser for browser target. Here I need to include mathjs in my node build, and mathjs requires the native crypto (that must not be included in the build).

I try to use a workaround

:resolve {"crypto" {:target :global                                           :global "crypto"}}

I guess it is supposed to work as crypto is listed here: https://github.com/thheller/shadow-cljs/blob/de52880090c7840ee30eb5369173c1bd7dd3055c/src/main/shadow/build/resolve.clj#L86

:resolve {"crypto" false} seems to work as a workaround

You can use :keep-as-requires, let me find it to you...

Here's my config for Chlorine (it's a node-library that uses :shadow as :js-provider):

:js-options {:js-provider :shadow
                     :keep-native-requires true
                     :keep-as-require #{"atom"}}

You can see if only adding :keep-native-requires true works. If it doesn't, change the :keep-as-require to #{"crypto"} and that should work 🙂

It works! Thanks. I'll create a PR to add this into the user guide

note that I do not recommend using :js-provider :shadow for node builds

and therefore also not :keep-as-require or :keep-native-requires 😛

better to do a regular build and post process with https://github.com/vercel/ncc if you must have a standalone file

I want the closest behaviour to the :browser target (that I use too). Unless there's an unworking library with this setup, is there a reason why not tu use :shadow for node builds?

:shadow is heavily optimized for the browser and usually not required for node

goog is already an implicit dependency of every cljs namespace so you do not need it

Yeah I didn't know that. Turns out there's some regression in CLJS: https://clojure.atlassian.net/browse/CLJS-3336

Console errors about importing:

shadow.js.js:sourcemap:36 shadow-cljs - failed to load module$node_modules$aws_amplify$lib$index
shadow.js.jsRequire @ shadow.js.js:36
shadow.js.require @ shadow.js.js:59
eval @ app.core.js:2
goog.globalEval @ main.js:528
env.evalLoad @ main.js:1603
(anonymous) @ main.js:4961
main.js:1495 TypeError: util.inherits is not a function
    at Object.shadow$provide.module$node_modules$assert$assert (module$node_modules$assert$assert.js:12)
    at shadow.js.jsRequire (shadow.js.js:34)
    at Object.shadow$provide.module$node_modules$http2$lib$protocol$endpoint (module$node_modules$http2$lib$protocol$endpoint.js:2)
    at shadow.js.jsRequire (shadow.js.js:34)
    at Object.shadow$provide.module$node_modules$http2$lib$protocol$index (module$node_modules$http2$lib$protocol$index.js:1)
    at shadow.js.jsRequire (shadow.js.js:34)
    at Object.shadow$provide.module$node_modules$http2$lib$http (module$node_modules$http2$lib$http.js:9)
    at shadow.js.jsRequire (shadow.js.js:34)
    at Object.shadow$provide.module$node_modules$http2$lib$index (module$node_modules$http2$lib$index.js:1)
    at shadow.js.jsRequire (shadow.js.js:34)
reportError @ main.js:1495
env.evalLoad @ main.js:1605
(anonymous) @ main.js:4961
main.js:1497 The above error occurred when loading "app.core.js". Any additional errors after that one may be the result of that failure. In general your code cannot be trusted to execute properly after such a failure. Make sure to fix the first one before looking at others.
reportError @ main.js:1497
env.evalLoad @ main.js:1605
(anonymous) @ main.js:4961
shadow.module.main.append.js:4 An error occurred when calling (app.core/init)
eval @ shadow.module.main.append.js:4
goog.globalEval @ main.js:528
env.evalLoad @ main.js:1603
(anonymous) @ main.js:4962
main.js:1495 TypeError: app.core.init is not a function
    at eval (shadow.module.main.append.js:4)
    at eval (<anonymous>)
    at Object.goog.globalEval (main.js:528)
    at Object.env.evalLoad (main.js:1603)
    at main.js:4962
reportError @ main.js:1495
env.evalLoad @ main.js:1605
(anonymous) @ main.js:4962
main.js:1497 The above error occurred when loading "shadow.module.main.append.js". Any additional errors after that one may be the result of that failure. In general your code cannot be trusted to execute properly after such a failure. Make sure to fix the first one before looking at other

Core file

(ns app.core
  (:require
    ["/aws-exports.js" :default aws-exports]
    ["aws-amplify" :default amplify]
    [reagent.core :as r]
    [reagent.dom :as dom]
    [re-frame.core :as rf]
    [app.db]
    [app.router :as router]
    [app.components.core :as c]))


(def functional-compiler (r/create-compiler {:function-components true}))
(r/set-default-compiler! functional-compiler)

(defn pages
  [page-name]
  (case page-name
    :inboxes [inboxes]
    :profile [profile]
    :become-a-chef [become-a-chef]
    :recipes [recipes-page]
    :recipe [recipe-page]
    :log-in [log-in]
    :sign-up [sign-up]
    [recipes-page]))


(defn app
  []
  (let [active-page @(rf/subscribe [:active-page])]
    [:<>
     [:div.bg-gray-100.w-screen.h-screen
      [:div.container.mx-auto
       [:div
        [nav]
        [pages active-page]]]]]))

(defn ^:dev/after-load start
  []
  (dom/render
    [app]
    (.getElementById js/document "app")))

(defn ^:export init
  []
  (.configure amplify aws-exports)
  (router/start!)
  (rf/dispatch-sync [:initialize-db])
  (start))

package.json:

{
  "name": "Cheffy",
  "version": "0.0.1",
  "description": "Cheffy - AirBnB for Chefs",
  "private": true,
  "repository": {
    "type": "git",
    "url": ""
  },
  "scripts": {
    "shadow:watch": "shadow-cljs watch app",
    "shadow:release": "shadow-cljs release app",
    "postcss:build": "cross-env TAILWIND_MODE=build postcss src/css/tailwind.css -o ./public/css/main.css --verbose",
    "postcss:watch": "cross-env TAILWIND_MODE=watch postcss src/css/tailwind.css -o ./public/css/main.css --verbose -w",
    "postcss:release": "cross-env NODE_ENV=production postcss src/css/tailwind.css -o ./public/css/main.css --verbose",
    "dev": "run-p -l *:watch",
    "release": "run-s *:release"
  },
  "devDependencies": {
    "autoprefixer": "^10.3.3",
    "cssnano": "^5.0.8",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.3.5",
    "postcss-cli": "^8.3.1",
    "react-flip-move": "^3.0.2",
    "shadow-cljs": "^2.15.5",
    "tailwindcss": "^2.2.4"
  },
  "dependencies": {
    "@aws-amplify/ui-react": "^2.1.1",
    "@headlessui/react": "^1.4.2",
    "@heroicons/react": "^1.0.5",
    "@tailwindcss/forms": "^0.3.3",
    "aws-amplify": "^4.3.8",
    "aws-crt": "^1.10.2",
    "create-react-class": "15.7.0",
    "cross-env": "^7.0.3",
    "encoding": "^0.1.13",
    "highlight.js": "11.1.0",
    "http2": "^3.3.7",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  }
}

Other thing that is worth mentioning: The aws-amplify was requiring http2 module which (from what I remember) was built in with node js. I installed it with npm I http2 and there seem to be some errors related to this also

There might be some issues when using the Amplify UI components, but I’m not sure if that is the issue for you. I’m using AWS Amplify v4 and have solved by building my app in two steps: clojurescript + webpack. This blog post (with links to a fully working example repo) might help you: https://davidvujic.blogspot.com/2021/08/hey-webpack-hey-clojurescript.html

Hei @U018VMC8T0W! Yes, this is the problem, most likely! I will remake my repo after your demo! Thank you for the fast reply!

Great!

Did you also have this error? Seems that it gets this error trying to access process.env.BROWSERLIST_DISABLE_CACHE and process is undefined. I saw you also tried to install process as an npm package (did this also but it does not fix the issue) UDPATE: Added this to the webpack config and it was fixed

plugins: [
        // fix "process is not defined" error:
        // (do "npm install process" before running the build)
        new webpack.ProvidePlugin({
            process: 'process/browser',
        }),
    ],

In my case I added the process npm package, because there were conflicts with AWS Amplify and Storybook: both depending on Webpack, but with different versions. And Storybook used a feature that has been removed (process). So my workaround was to include it in the Storybook UI only. But I don’t think that package should be exposed in a web site (if I’m not mistaking).

Just noticed your update: great!