Issues initializing library

[jbarkun]

Hello! I'm running into issues initializing the library, and am not sure what I'm doing wrong. Any pointers would be appreciated!

I tried adding the library through NPM first with npm install read-smore as per the docs, and I could see the library added in my node_modules folder as well package.json under 'dependencies'. But when I included the library in my JS with either import ReadSmore from 'read-smore' or const ReadSmore = require("read-smore");, I got the following error string (reduced to what seemed like the important bits):

looking for modules in [DIR]/app/public/wp-content/themes/ona-local/node_modules
        single file module
          using description file: [DIR]/app/public/wp-content/themes/ona-local/package.json (relative path: ./node_modules/read-smore)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              [DIR]/app/public/wp-content/themes/ona-local/node_modules/read-smore is not a file
            .js
              Field 'browser' doesn't contain a valid alias configuration
              [DIR]/app/public/wp-content/themes/ona-local/node_modules/read-smore.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              [DIR]/app/public/wp-content/themes/ona-local/node_modules/read-smore.json doesn't exist
            .wasm
              Field 'browser' doesn't contain a valid alias configuration
              [DIR]/app/public/wp-content/themes/ona-local/node_modules/read-smore.wasm doesn't exist

I switched to CDN instead, thinking that it might be an issue between the chair and the keyboard, but after loading the file onto my site and adding const ReadSmore = window.readSmore; to my JS file, I got this error in console:

Uncaught TypeError: ReadSmore is not a function

I tried checking window.readSmore; in chrome's dev console, and that also came back undefined.

I'm not sure what I'm doing wrong, any advice?

Thank you!

[H-L]

Hi ! Just got the same issue. Did you find a fix ?

[H-L]

I found what causes the issue, and it's silly. In packages.json, the main points to dist/index.js which... does not exists in the local installed package 😅

For now I patched it locally with npx patch-packages read-smore --exclude 'nothing', but my fix might have side effects on other configurations that are not using index.esm.js.

Some articles and forums are suggesting using exports -> https://nodejs.org/api/packages.html#conditional-exports

This could be the right way to fix this for all configurations (ESM, CJS, UMD).

[jbarkun]

Hey! I hadn't found a solution yet. Won't have a chance to look into this more till next week, but I'll report back if your fix works. Thank you for sharing it!

[saiballo]

I have the same issue. I need to downgrade the package to 2.4.0

[em77]

The solution here (for the moment) is to simply change the import statement to this wherever you're importing:

import ReadSmore from 'read-smore/dist/index.esm'

@H-L is right about the value for main being wrong in package.json but we can just import directly from the file that does exist without having to modify the package. That seems to be the simplest workaround until this is fixed.

[stephenscaff]

Hi. Sorry for the late reply. Haven’t looked at this in a while.

I see the wp reference.

What are you using for a bundler?

I can take a look later to make sure everything is bundled correctly on the latest version.

On Thu, Aug 15, 2024 at 1:12 PM Eric Marchese @.***> wrote:

The solution here (for the moment) is to simply change the import statement to this wherever you're importing:

import ReadSmore from 'read-smore/dist/index.esm'

@H-L https://github.com/H-L is right about the value for main being wrong in package.json but we can just import directly from the file that does exist without having to modify the package. That seems to be the simplest workaround until this is fixed.

— Reply to this email directly, view it on GitHub https://github.com/stephenscaff/read-smore/issues/38#issuecomment-2292136942, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABFUPFISBX4GAXVCQLIPI3TZRUDRJAVCNFSM6AAAAABBRXUYASVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOJSGEZTMOJUGI . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[em77]

@stephenscaff FYI I encountered a similar problem and wasn't using wordpress but rails with webpack. I think as @H-L pointed out, the issue does seem to be that dist/index.js does not exist but is being pointed to by main in package.json.

[stephenscaff]

Thanks.

Will take a look today. I’ve used this in wp projects, so didn’t think it was related to wp. Just making sure a bundler was in play.

Wondering now if something got borked when packaging it all up.

Will ping you in a bit.

On Fri, Aug 16, 2024 at 7:23 AM Eric Marchese @.***> wrote:

@stephenscaff https://github.com/stephenscaff FYI I encountered a similar problem and wasn't using wordpress but rails with webpack. I think as @H-L https://github.com/H-L pointed out, the issue does seem to be that dist/index.js does not exist but is being pointed to by main in package.json.

— Reply to this email directly, view it on GitHub https://github.com/stephenscaff/read-smore/issues/38#issuecomment-2293605680, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABFUPFLF5B4G5DDXPZSFDR3ZRYDNRAVCNFSM6AAAAABBRXUYASVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOJTGYYDKNRYGA . You are receiving this because you were mentioned.Message ID: @.***>