Any idea how I can import a module who's name ends with .js?
example of module https://www.npmjs.com/package/bandchain2.js
import React, { useEffect, useState } from 'react';
import { Client } from '#bandprotocol/bandchain.js';
export default App = () =>{
return(
<div></div>
);
}
Failed to compile.
./src/components/app.js
Module not found: Can't resolve '#bandprotocol/bandchain.js' in '/mnt/g/Projects/test-app/src/components'
I reproduced your problem with no compile issues and imported it as:
import { Client } from "bandchain2.js";
You're importing it as bandchain.js when the npmjs you provided is bandchain2.js
import { Client } from "#bandprotocol/bandchain.js";
and you should add the following line to your package.json file.
"browser": { "crypto": false }
discussion of the relevant topic:https://github.com/brix/crypto-js/issues/291
Resolved by using node v16.
Seems that the problem only occurs with node 14 or the react/create-react-app version installed
Related
I have a problem in my three js project, I use parcel as a module bundler. I want to import SVGRenderer from 'three/addons/renderers/SVGRenderer.js'. But it looks like parcel cannot resolve this. Any idea how to fix it ?
The error says:
#parcel/core: Failed to resolve 'three/addons/renderers/SVGRenderer.js' from './app.js'
This is the code:
app.js
import dat from 'dat.gui';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { SVGRenderer, SVGObject } from 'three/addons/renderers/SVGRenderer.js'; // error is in this line
import { Text } from 'troika-three-text';
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";
I want to change the behavior of an ionic4 web component.
I created a stencil component from stencil-component-starter and copied the source of the component (ion-reorder in my case) from '#ionic/core/src/components'.
To make it work, I need to fix this import : import { getIonMode } from '../../global/ionic-global'
I installed #ionic/core as dependence and tried many ways to import :
import { getIonMode } from '#ionic/core/dist/types/global/ionic-global';
returns a TypeError :
TypeError: Failed to resolve module specifier "#ionic/core/dist/types/global/ionic-global". Relative references must start with either "/", "./", or "../".
So I tried to directly import from node_modules
import { getIonMode } from '../../../node_modules/#ionic/core/dist/types/global/ionic-global';
but it returns a rollup import error :
Rollup: Unresolved Import Could not resolve '../../../node_modules/#ionic/core/dist/types/global/ionic-global' from src/components/reorder/lazy_7lathtd3dfwla7hdtr7reg-reorder.js
I also tried to import the Ionic/core module : import * as Ionic from '#ionic/core';
But it doesn't provide the method getIonMode() that I need.
Perhaps I miss something in the import process ?
Any help or hint appreciated 🙏
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.
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.