Basic use in the browser

[amilich]

Hello! I'm trying to use latex.js in the browser using webpack. Calling import { parse, HtmlGenerator } from 'latex.js' yields

Module not found: Error: Can't resolve './documentclasses' in '.../node_modules/latex.js/dist'

I looked briefly inside latex.js and see an import from ./documentlcasses, which does not exist. Apologies if I'm missing some configuration step.

[amilich]

The same import works when using version 11.0. Not sure what's going on - solved my problem, but I'd love to use latest if possible.

[michael-brade]

Hi, sorry for the delay. I guess the reason is "webpack in the browser". I never thought of that use case. Why would you want to compile latex.js again in the browser?

But if you really want to, I guess you could declare latex.js as an external. The problem of the browser is that it doesn't know about the file system and file hierarchies...

[ignacioxd]

I'm running into this error when trying to use latex.js as a library in a React app.

Simply importing latex.js via `import { parse, HtmlGenerator } from 'latex.js' causes the error in when the project uses Webpack.

I believe what @amilich was reporting was an error when compiling latex.js into a bundle that will be later used in the browser. It's not about using Webpack in the browser directly, but using it to generate a bundle that will ultimately run in the browser.

[amilich]

I'm running into this error when trying to use latex.js as a library in a React app.

Simply importing latex.js via `import { parse, HtmlGenerator } from 'latex.js' causes the error in when the project uses Webpack.

I believe what @amilich was reporting was an error when compiling latex.js into a bundle that will be later used in the browser. It's not about using Webpack in the browser directly, but using it to generate a bundle that will ultimately run in the browser.

Absolutely, that is spot on - I was able to use 11.0 just fine so suggest trying that for now

[michael-brade]

Ok. So is it possible that you give me a working example where I can reproduce this issue?

[ignacioxd]

Here's a working example of the problem on a fresh React app install. First, create a new app and install latex.js

npx create-react-app myapp
cd myapp
npm install latex.js

Then import latex.js from any file in the app, like src/App.js via import { parse, HtmlGenerator } from 'latex.js' like so:

import logo from './logo.svg';
import './App.css';
import { parse, HtmlGenerator } from 'latex.js';

function App() {
...

Then just run the app with npm start. The import itself causes the error.

[michael-brade]

Thanks! This is unfortunate: empty folders are not included in the npm package. So for now you can solve this with

mkdir node_modules/latex.js/dist/packages node_modules/latex.js/dist/documentclasses

In the next release I will add a .keep file or so to make sure the directories are created.

[rm-arun-kumar]

Hi @michael-brade, any updates about next release..?

[michael-brade]

Sorry, not really... my whole time got caught up in another project 16h/day. I did not have any time to work on this again yet.

[snowinmars]

The workaround above works, but the next error is Class constructors cannot be invoked without 'new'

react 17.0.2, typescript 4.1.2, latex.js: 0.12.4

tsconfig

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

Part of package.json

{
  "dependencies": {
    "@babel/core": "7.12.3",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.6.0",
    "babel-loader": "8.1.0",
    "babel-plugin-named-asset-import": "^0.3.7",
    "babel-preset-react-app": "^10.0.0",
  },
  "jest": {
    "transform": {
      "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/config/jest/babelTransform.js",
    },
   },
   "babel": {
    "presets": [
      "react-app"
    ]
  }
}

usage in App.tsx

// @ts-ignore latex.js has no @types package
import { LaTeXJSComponent } from 'latex.js'

const App: FunctionComponent = () => {
    return (
        <LaTeXJSComponent>
            hello
        </LaTeXJSComponent>
    );
}

[michael-brade]

Hi @snowinmars, do you have an app skeleton where I could easily test this? I have no idea which line causes this error.

[michael-brade]

Ok, I managed to create a react app with LaTeX.js. I get the same error you got but I don't understand how to fix it. Apparently it is because the LaTeXJSComponent is a class. How should I define a webcomponent? Isn't it possible to use webcomponent classes with react?

react-dom.development.js:14985 Uncaught TypeError: Class constructors cannot be invoked without 'new'
    at renderWithHooks (react-dom.development.js:14985)
    at mountIndeterminateComponent (react-dom.development.js:17811)
    at beginWork (react-dom.development.js:19049)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)

[snowinmars]

Hi @snowinmars, do you have an app skeleton where I could easily test this? I have no idea which line causes this error.

@michael-brade , no, I don't have an example with this error.

Is it possible that that's because ES6 classes can not be created without new? I mean, maybe the error will disappear at es5.

Or maybe this.

[duhaime]

@michael-brade could you say a little about why the empty documentclasses folder is present? Can the repo be shipped without that directory (perhaps the directory could be used later when it's being used)?

[michael-brade]

no, the directory is there so that people can add their own implementations for packages and documentclasses. I think it's easier for people to know where to put stuff if the structure is already there. And apparently, webpack checks that folder even if we never actually import anything from there.

[michael-brade]

Finally, with the current rollup and plugin-commonjs releases, all the issues mentioned here should be fixed. I have added an integration test as well that creates a react app, adds latex.js and starts the server. Seems to work now :)

[RohitKuwar]

Hi, I refer to the zip code which you share in release. There I came across a line of code import { parse, HtmlGenerator, SyntaxError } from '../../../dist/latex.js'. But thing is that neither I am seeing any distfolder nor I am able to generate it withscriptsmentioned inpackage,json` file,

reference link