Develop Reference

how to import mathjax in vue as local dependency?

im using vue-mathjax in my project and in the readme it says to use cdn of mathJax
works fine with the CDN version
im need to use mathJax(v. 2.7.2) as local as dependency for my project but dont know how to import it with the correct configurations
how do yout set the configuration same as with the cdn version?
CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-AMS_HTML"></script>
Local import after installing with npm
//main.js
import '../node_modules/mathjax/MathJax?config=TeX-AMS_HTML'
error
Uncaught SyntaxError: Unexpected token '<'
repo - https://github.com/qwtfy/mathjax-test

If you're able to switch to the new version 3, here are the steps assuming you already have vue-mathjax.
Install MathJax from npm: npm install mathjax#3
Move the MathJax's es5 directory to a public directory: mv node_modules/mathjax/es5/ src/assets/mathjax/
Import the component config you want, for example:
import '../assets/mathjax/es5/tex-chtml.js';
If you must stick with version 2.7.x, you'll need to do the following. In my testing, it was less stable.
Install MathJax 2.7.9 from npm: npm install --save mathjax#2.7.9
Move MathJax.js (located at node_modules/mathjax/MathJax.js) to a public directory like assets.
Move TeX-AMS_HTML.js (located at node_modules/mathjax/config/TeX-AMS_HTML.js) to the same public diretory.
Import both files inside your component, in order:
import '../assets/MathJax.js'
import '../assets/TeX-AMS_HTML.js';
Here it is working for me:
Full single file component example using v3 and vue-mathjax.
<template lang='pug'>
div
b-container(style='width: 40%')
b-textarea(v-model='formula' cols='30' rows='10')
p output
vue-mathjax(:formula='formula')
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { VueMathjax } from 'vue-mathjax';
import '../assets/mathjax/es5/tex-chtml.js';
#Component({
components: {
'vue-mathjax': VueMathjax,
},
})
export default class HelloWorld extends Vue {
formula = '$$x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.$$';
}
</script>
Documentation of these steps can be found here and here.

react helper import fails in production but works in development

I've got a file called "globalHelper.js" like this:
exports.myMethod = (data) => {
// method here
}
exports.myOtherMethod = () => { ... }
and so on...
I import my Helper in other files like this:
import helper from "../Helper/globalHelper";
Now there is the problem:
In the past, everything worked with that when running my build-script:
"build": "GENERATE_SOURCEMAP=false react-scripts build"
but for some reason, when I run "npm run build", I get the error:
Attempted import error: '../Helper/globalHelper' does not contain a default export (imported as 'helper')
However, when I simply start my development server (npm start), everything works just fine.
I already tried to import like import { helper } from "../Helper/globalHelper";, but that did not work either.
Does someone know how to solve that?

try exporting like this with ES6 syntax
export const myOtherMethod = () => { ... }
then
import { myOtherMethod } from '...your file'
The method you are using exports.functionName is CJS. you need to use require to get the methods.
The CommonJS (CJS) format is used in Node.js and uses require and
module.exports to define dependencies and modules. The npm ecosystem
is built upon this format.
If you want to use module method you can do this.
export { myOtherMethod1, myOtherMethod2 }
then you import like this.
import * as Module from '....file name'

Since you've not export default you should import the function with {} like :
import {helper} from "../Helper/globalHelper";

How can I make webpack treeshake my ES6 module?

I have followed every guide out there for turning on tree shaking in webpack 4 but webpack still bundles code from a NPM module that I have set up to be treeshaken. How can I enable treeshaking and not include particular code in my web app?
Full source code in GitHub repo
I have a CRA (create-react-app) that imports a NPM module I created to test it that looks like this:
package
index.mjs
dist
esm
components
image
index.js
index.js
index.js
with package.json like this:
"main": "index",
"module": "index.jsm",
"sideEffects": false,
that transpiles using babel with babelrc like:
{
"presets": [
[
"#babel/preset-env",
{
"modules": false
}
],
"#babel/react",
"#babel/flow"
]
}
I have 3 React components: image, avatar (that imports image) and login-button that has this es6 code:
import React from 'react'
document.body.innerHTML = document.body.innerHTML + "<div>This is a side effect and should never have happened</div>"
export default () => <button>Login</button>
The index file for the NPM es6 module:
import * as lib from './dist/esm'
export default lib
In the CRA's app.js I have:
import TreeshakingTestModule from 'treeshaking-test-module'
function App() {
return (
<div className="App">
<TreeshakingTestModule.Avatar />
</div>
);
}
When I npm start it builds and renders the avatar but I also see the message.
Note that login-button is never used however the default export of my NPM package which does export the component is imported, however I read tutorials that explained that even default exports and re-exports should still work with tree shaking if what is exported is never used.
What is happening? What am I doing wrong?
Full source code in GitHub repo

As far as I know, webpack three shakes by analysing imports statically, not by reading your code. You cannot expect webpack to realize you're only using Avatar from TreeshakingTestModule.
So you need to declare what you want to use at import level, by using named imports and exports:
import {Avatar} from 'treeshaking-test-module'
function App() {
return (
<div className="App">
<Avatar />
</div>
);
}
So webpack knows you're only using the Avatar export.
This means that Avatar needs to be a named export in your treeshaking-test-module module.

Critical dependency warning when using react-pdf

I'm trying to display a pdf on a react application and i get the following warning:
/node_modules/react-pdf/node_modules/pdfjs-dist/build/pdf.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
Vscode tells me this under the import function.
Could not find a declaration file for module 'react-pdf'
Already tried running npm install, npm install react-pdf and reinstalling the package
import React, { Component } from 'react';
import { Document } from 'react-pdf';
import sample from 'file location'
export default class viewer extends Component {
render() {
return (
<div>
<Document
file={sample}
onLoadSuccess={this.onDocumentLoadSuccess}
>
</Document>
</div>
);
}
}
Displays:
"Failed to load PDF file" in the browser

This code will display your pdf file, but issue will display in IDE console.
import { Document, Page, pdfjs } from "react-pdf";
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
In my case I'm using webpack 4 and it's not supportted yet.
If you build project it will work fine.

My full workaround.
Create a file at the root called config-overrides.js and it should contain the following:
module.exports = function override(config) {
config.module.rules[0].parser.requireEnsure = true
return config
};
After that npm i react-app-rewired to you app and change your build function in package.json to read react-app-rewired build/react-app-rewired start.
That should do it for now.

Auto-completion in Webstorm for my custom npm module (ES6/Babel)

When I use material-ui package I get nice auto-completion in Webstorm (ctrl+space):
I thought it might have something to do with the fact the package includes an index.es.js file:
import _AppBar from './AppBar';
export { _AppBar as AppBar };
import _AutoComplete from './AutoComplete';
export { _AutoComplete as AutoComplete };
import _Avatar from './Avatar';
export { _Avatar as Avatar };
import _Badge from './Badge';
export { _Badge as Badge };
import _BottomNavigation from './BottomNavigation';
...
So I generated my own index.es.js in my custom npm module and put it next to the transpiled index.js:
import {ActionTypes as _ActionTypesElements} from './reducers/elements/elements';
export { _ActionTypesElements as ActionTypes };
import {ActionTypes as _ActionTypesAppState} from './reducers/appState/appState';
export { _ActionTypesAppState as ActionTypesAppState };
import _appStateActions from './reducers/appState/appState_actions';
export { _appStateActions as appStateActions };
...
And yet I get no auto-complete:
Any idea why?

Found the answer:
Had to add a jsnext:main field to the package.json of the npm module:
package.json:
...
"module": "./index.js",
"jsnext:main": "./index.es.js",
...
Webstorm recognizes the package's inner exports.

In WebStorm 2019.3, here are the steps I follow to force Code Completion (including auto-import) to work for a custom, self-published NPM package:
Ensure that the project, itself, has a package.json file at the root of the project, and that package.json includes the desire package in the "dependency" object. For example:
{
"name": "testproject",
"version": "1.0.0",
"dependencies": {
"#yourname/yourpackage": "latest"
}
}
In WebStorm, select File > Invalidate Caches / Restart...
To enable auto-import for package contents, ensure that the JavaScript file in which the package is being used has AT LEAST ONE export statement. For example, in the following code, an export is present, so Code Completion auto-imports the package function isNil():
export function init () {
isNil
}
By comparison, the following code does not contain an export statement, so isNil() is not automatically imported:
function init () {
isNil
}
For me, all three of the preceding steps are necessary for Code Completion to work for my own NPM packages in WebStorm.