The following code in external node_modules is not working:
var _react = require('react');
But:
var _react = require('React');
works. Now I have a problem that in some node_modules it is required with 'react', and then I get this error:
Uncaught Error: Cannot find module 'react'
I am using gulp as build tool.
What can I do so that both requires will work?
Do you have 'React' added in your package.json ?
If not, add: "react": "17.0.2" (or another React version)
Try running the command:
npm install
And try again
Require is not a React api. Try this syntax:
import React from 'react'
Related
i create project in angular 6 using angular cli tool but it gives error when i import * as fs from 'fs'(integrate electron app). The error message Module not found: Error: Cannot resolve module 'fs'
I assume you're using node.
Are you using webpack? If so see
here
The solution is to add
node: {
fs: 'empty'
}
to your webpack config.
If that doesn't work, try changing your import statement to a require:
const fs = require('fs');, as the node documentation recommends.
I have created a react-app using create-react-app utility but when I import a node module then it gives me error stating :
./node_modules/#nross/react-vega/src/VegaLite.js
Module parse failed: Unexpected token (17:2)
You may need an appropriate loader to handle this file type.
| onParseError,
| children,
| ...otherProps
| }) => {
| const adjustedSpec = { ...spec };
And when I import babel-loader into the file where I am importing the node module then it is giving me the error:-
Failed to compile.
./node_modules/babel-core/lib/helpers/resolve.js
Module not found: Can't resolve 'module' in 'C:\VegaDemo\my-app\node_modules\babel-core\lib\helpers'.
You need to eject in order to customize the boilerplate.
Simply run
npm run eject
Or
yarn run eject
If you use yarn.
Then, install your npm module and run
npm run install
Without eject, the boilerplate is locked up.
I migrated from angular 5.2 to 6.0. When I issue the ng serve command, I get the following error:
ERROR in src/app/mappy/mappy.component.ts(1,36): error TS2305: Module
'"C:/NSE911/applicationDev/angular/alo/node_modules/#angular/core/core"'
has no exported member 'state'.
I am using: typescript: 2.7.2, angular cli: 6.0.1, Node: 8.11.2, OS: win32 x 64, angular: 6.0.0, rxjs-compat: "^6.1.0",
I removed the node_modules directory and re-created it again (npm install). This did not work.
I will appreciate any ideas (I am kind of new using this technologies).
Thanks for any help.
The import for "trigger, state, transition, animate, style" has changed from #angular/core to #angular/animations.
For example:
import { trigger, state, transition, animate, style } from '#angular/animations';
I found out was was the error:
import { Component, Input, OnInit, state } from '#angular/core';
After I remove the 'state' on the above import statement the problem went way.
lmv
The import for state has changed from #angular/core to #angular/animations
I am trying to import a library in Remix using:
import "github.com/Arachnid/solidity-stringutils/strings.sol";
However, I get a compilation error that says
Unable to import "undefined": Not Found.
Any idea what wrong could I be doing here?
Your link is broken. This is the correct link: github.com/arachnid/solidity-stringutils/src/strings.sol
You forgot /src part.
I'm using JSPM 0.16.42 which uses SystemJS, I've tried both angular-translate and angular-route, both of which are on github endpoints.
However, for both of them angular throws the same error
argument module is not a function
when using them in ES6 syntax as follows:
import AngularRoute from 'angular-route';
angular.module('app', [AngularRoute]);
I'm using babel as a transpiler. The object I get back from the import seems to be empty. Following is the relevant part of my config.js file:
System.config({
baseURL: "/",
defaultJSExtensions: true,
transpiler: "babel",
babelOptions: {
"optional": [
"runtime",
"optimisation.modules.system"
]
},
paths: {
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
},
map: {
"angular-route": "github:angular/bower-angular-route#1.5.8",
"angular-translate": "github:angular-translate/bower-angular-translate#2.11.1",
}...
EDIT: When I tried to install angular-translate with an npm endpoint I got the error http://errors.angularjs.org/1.5.8/$injector/unpr?p0=e
on the following line in angular.js
return new ErrorConstructor(message);
which I guess is a bit of progress but still doesn't solve my issue obviously
EDIT#2: I got angular-route to work with the help of #artem by using the npm endpoint, for some reason the github endpoint did not work so I used jspm install npm:angular-route. Further investigation is needed as to why the github package did not work and the npm package did
EDIT#3: I have overriden the package configuration as you can see below, though that didn't help
"npm:angular-translate#2.11.1": {
"format": "global",
"dependencies": {
"angular": ">=1.2.26"
},
"shim": {
"angular-translate": {
"deps": "angular"
}
}
}
I eventually fixed it by installing angular-translate as well as angular-route via their npm endpoints instead of the default (github) endpoints, using
jspm install npm:angular-route
&
jspm install npm:angular-translate -o '{dependencies: { angular: ">=1.2.26" } }'
The override for angular-translate was needed since jspm did not understand the original dependency syntax correctly which was angular: ">= 1.2.26 <=1.6" as described in this github issue
Here is not-so-minimal, not-really-self-contained example for angular-translate with systemjs:
npm install jspm
./node_modules/.bin/jspm install github:angular-translate/angular-translate
keep pressing <ENTER>, accepting all the default values
create file test.js
import AngularTranslate from 'angular-translate/angular-translate';
console.log(AngularTranslate);
create file index.html
<!doctype html>
<html>
<head>
<script src="jspm_packages/system.src.js"></script>
<script src="config.js"></script>
<script>
System.import('./test.js');
</script>
</head>
<body>
</body>
</html>
open it in the browser:
Failed to load resource: the server responded with a status of 404 (File not found)
undefined:1 Uncaught (in promise) Error: (SystemJS) XHR error (404 File not found) loading
http://localhost:8035/jspm_packages/github/angular-translate/angular-translate#2.11.1.js(…)
Why that file isn't there? It's supposed to be created by jspm, if you had installed angular-translate from npm it would have contained
module.exports = require("npm:angular-translate#2.11.1/dist/angular-translate.js");
which is just a redirect from symbolic package name (the name of that .js file) to that package main file, as specified in package.json:
"main": "dist/angular-translate.js",
But angular-translate is from github, there is no dist there. That's why jspm did not create the redirect file - there is nothing to redirect to.
No problem, just build it from the source we got from github:
cd jspm_packages/github/angular-translate/angular-translate#2.11.1/
npm install
npm run-script build
cd ../../../..
and fix mapping in config.js:
map: {
"angular-translate/angular-translate": "github:angular-translate/angular-translate#2.11.1/dist/angular-translate",
open index.html in the browser again:
system.src.js:122 Uncaught (in promise) Error: (SystemJS) angular is not defined(…)
No problem, angular is already installed as angular-translate dependency, just tell systemjs when and how to load it.
add to config.js:
meta: {
"angular-translate/angular-translate": {
"deps": ["angular"]
}
},
map: {
"angular": "github:angular-translate/angular-translate#2.11.1/node_modules/angular/angular",
NOTE: You don't need to specify format for angular-translate. SystemJS auto-detects it correctly - it could be loaded as either 'amd' or 'cjs', but it will not work as 'global'. Also, you probably did not start by installing angular-translate, so you already have angular.js file and mapping in place somewhere.
Open index.html in the browser again. It prints in the console:
pascalprecht.translate
Yes angular-translate exports a string - seems to be typical for angular1 modules.
I have no experience with angular.js, so I declare it a success and stop here.
PS Why angular-route worked when you install it from npm, and did not work from github?
When installed from npm, jspm created a file named jspm_packages/npm/angular-route#1.5.8.js, containing
module.exports = require("npm:angular-route#1.5.8/index.js");
because package.json for angular-route has
"main": "index.js",
which is correct and works for you.
When installed from github, jspm created similar file jspm_packages/github/angular/bower-angular-route#1.5.8.js, but this time it points to a different file
module.exports = require("github:angular/bower-angular-route#1.5.8/angular-route");
because someone put an override in jspm registry there at https://github.com/jspm/registry/blob/master/package-overrides/github/angular/bower-angular-route%401.3.0.json
because bower.json for bower-angular-route has
"main": "./angular-route.js",
Maybe it's an oversight, maybe it's correct and works for them - I don't know.
TL;DR It's not a good idea to use package manager for installing software, if the software was not packaged properly for that package manager.