I use fountainJS Angular2 generator with Typescript and Systems.js
for scaffolding the project.
https://github.com/FountainJS/generator-fountain-angular2
But I got the issue, I can't add the component to the project.
When I put import {GOOGLE_MAPS_DIRECTIVES}
I get this error
system.src.js:1057 GET http://localhost:3000/node_modules/angular2-google-maps/core/index.js 404 (Not Found)
I went through that
https://angular-maps.com/docs/getting-started.html
'getting started' section and added some code to jspm.config.js file but I don't have angular-cli-build.js file inside my project.
My jspm.config.js
SystemJS.config({
packageConfigPaths: [
'npm:#*/*.json',
'npm:*.json',
'github:*/*.json'
],
map: {
'angular2-google-maps': 'node_modules/angular2-google-maps',
'#angular/common': 'npm:#angular/common#2.0.0-rc.4',
'#angular/compiler': 'npm:#angular/compiler#2.0.0-rc.4',
'#angular/core': 'npm:#angular/core#2.0.0-rc.4',
'#angular/http': 'npm:#angular/http#2.0.0-rc.4',
'#angular/platform-browser': 'npm:#angular/platform-browser#2.0.0-rc.4',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic#2.0.0-rc.4',
'#angular/router': 'npm:#angular/router#3.0.0-beta.2',
'es6-shim': 'npm:es6-shim#0.35.1',
'os': 'github:jspm/nodelibs-os#0.2.0-alpha',
'process': 'github:jspm/nodelibs-process#0.2.0-alpha',
'reflect-metadata': 'npm:reflect-metadata#0.1.3',
'rxjs': 'npm:rxjs#5.0.0-beta.6',
'ts': 'github:frankwallis/plugin-typescript#4.0.16',
'zone.js': 'npm:zone.js#0.6.17'
},
packages: {
'angular2-google-maps/core': {
defaultExtension: 'js',
main: 'index.js' // you can also use core.umd.js here, if you want faster loads
},
'github:frankwallis/plugin-typescript#4.0.16': {
'map': {
'typescript': 'npm:typescript#1.8.10'
}
},
'github:jspm/nodelibs-os#0.2.0-alpha': {
'map': {
'os-browserify': 'npm:os-browserify#0.2.1'
}
}
}
});
You are getting node_modules/angular2-google-maps/core/index.js 404 (Not Found) because node_modules is not made available by web server used by npm run serve.
If you need node_modules to be accessible by client code, you have to add route for it in conf/browsersync.conf.js:
routes: {
'/node_modules': 'node_modules',
Alternatively, you could use jspm instead of npm to install angular2-google-maps:
jspm install angular2-google-maps
and jspm would modify jspm.config.js to add correct mapping for angular2-google-maps.
BUT, after 404 error is fixed, I'm getting now
system.src.js:123 Uncaught (in promise) Error: (SystemJS) core_1.NgModule is not a function
TypeError: core_1.NgModule is not a function
which probably means that the latest angular2-google-maps is incompatible with angular2-rc4 installed by generator-fountain-angular2.
Related
I know there are several answers to this problem already, but none of them have worked for me.
I already installed these packages:
mysql
buffer
crypto-browserify
utils
process
And my webpack.config.js file looks like this:
module.exports = {
resolve:
{fallback:
{
"crypto": false,
"stream": false,
"timers": false
}
}
}
I have also tried the webpack.config.js file to look like this:
module.exports = {
resolve:
{fallback:
{
"timers": require.resolve("timers-browserify"),
"stream": require.resolve("stream-browserify"),
"crypto": require.resolve("crypto-browserify")
}
}
}
The line of code that calls mysql just looks like this (this line alone initiates the errors):
const mysql = require("mysql");
And this is what the error says:
Compiled with problems:
ERROR in ./node_modules/mysql/lib/Connection.js 1:13-30
Module not found: Error: Can't resolve 'crypto' in
'/home/pattmayne/Prog/robotblog/robot-god-blog/node_modules/mysql/lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js
core modules by default. This is no longer the case. Verify if you
need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
install 'crypto-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: {
"crypto": false }
ERROR in ./node_modules/mysql/lib/Connection.js 3:10-24
Module not found: Error: Can't resolve 'net' in
'/home/pattmayne/Prog/robotblog/robot-god-blog/node_modules/mysql/lib'
ERROR in ./node_modules/mysql/lib/Connection.js 4:10-24
Module not found: Error: Can't resolve 'tls' in
'/home/pattmayne/Prog/robotblog/robot-god-blog/node_modules/mysql/lib'
ERROR in ./node_modules/mysql/lib/protocol/Auth.js 2:13-30
Module not found: Error: Can't resolve 'crypto' in
'/home/pattmayne/Prog/robotblog/robot-god-blog/node_modules/mysql/lib/protocol'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js
core modules by default. This is no longer the case. Verify if you
need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
install 'crypto-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: {
"crypto": false }
ERROR in ./node_modules/mysql/lib/protocol/Protocol.js 4:13-37
Module not found: Error: Can't resolve 'stream' in
'/home/pattmayne/Prog/robotblog/robot-god-blog/node_modules/mysql/lib/protocol'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js
core modules by default. This is no longer the case. Verify if you
need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
install 'stream-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: {
"stream": false }
ERROR in ./node_modules/mysql/lib/protocol/Timer.js 1:13-30
Module not found: Error: Can't resolve 'timers' in
'/home/pattmayne/Prog/robotblog/robot-god-blog/node_modules/mysql/lib/protocol'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js
core modules by default. This is no longer the case. Verify if you
need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
add a fallback 'resolve.fallback: { "timers": require.resolve("timers-browserify") }'
install 'timers-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: {
"timers": false }
ERROR in ./node_modules/mysql/lib/protocol/sequences/Query.js 2:9-22
Module not found: Error: Can't resolve 'fs' in
'/home/pattmayne/Prog/robotblog/robot-god-blog/node_modules/mysql/lib/protocol/sequences'
Did I install something wrong?
While following the tutorial from Contentful for setting up a blog I encountered an error I'm unable to get past.
I've tried changing a few things inside the JSON file but am limited in what I can change.
.contentful.json
{
"CTF_SPACE_ID": "uw...oj",
"CTF_CDA_ACCESS_TOKEN": "yIQp...rs",
"CTF_PERSON_ID": "15...0m",
"CTF_BLOG_POST_TYPE_ID": "blogPost",
}
nuxt.config.js
const config = require('./.contentful.json')
module.exports = {
env: {
CTF_SPACE_ID: config.CTF_SPACE_ID,
CTF_CDA_ACCESS_TOKEN: config.CTF_CDA_ACCESS_TOKEN,
CTF_PERSON_ID: config.CTF_PERSON_ID,
CTF_BLOG_POST_TYPE_ID: config.CTF_BLOG_POST_TYPE_ID
},
Expected: When I run npm run dev the website is served
Actual: When I run npm run dev the error "Unexpected token } in .contentful.json
{
"CTF_SPACE_ID": "uw...oj",
"CTF_CDA_ACCESS_TOKEN": "yIQp...rs",
"CTF_PERSON_ID": "15...0m",
"CTF_BLOG_POST_TYPE_ID": "blogPost"
}
Remove the trailing comma from the last key value pair, otherwise it's not valid JSON
I'm using an arrow function and it's complaining about a parsing error:
Parsing Error: Unexpected token =
However my code is valid (please tell me if i'm mistaken). Additionally, i've set the .eslintrc settings to use es6 parsing:
.eslintrc
{
"parserOptions": {
"ecmaVersion": 6,
}
}
Here's my code:
class foo() {
// Doesn't like the line below
// even though it is valid:
namedFunction = () => {
}
}
There a way to resolve this error? This makes a huge different in terms of what the value of this from a particular function.
You're using class field (a.k.a. property initializer) syntax, which is not part of ECMAScript 2015 (ES6), nor ES2016 or 2017, and so unsupported by ESLint. It's currently a Stage 3 proposal. If you want to use it with ESLint, you'll need to use babel-eslint. That page describes how to use it, but the gist is:
Installation
$ npm install eslint babel-eslint --save-dev
# or
$ yarn add eslint babel-eslint -D
Note: babel-eslint requires babel/core#>=7.2.0 and a valid Babel configuration file to run. If you do not have this already set up, please see the Babel Usage Guide.
Setup
To use babel-eslint, "babel-eslint" must be specified as the parser in your ESLint configuration file (see here for more detailed information).
.eslintrc.js
module.exports = {
parser: "babel-eslint",
};
With the parser set, your configuration can be configured as described in the Configuring ESLint documentation.
In 2021 it seems that babel-eslint has been deprecated in favour of #babel/eslint-parser, according to the GitHub repo:
NOTE: babel-eslint is now #babel/eslint-parser and has moved into the Babel monorepo.
So to update the instructions from the other answers, you need to:
npm i eslint #babel/eslint-parser --save-dev
Then make sure you configure the parser key in .eslintrc:
{
"parser": "#babel/eslint-parser",
...
}
As an aside, as the OP doesn't mention the runtime, I'm running in Node 12 so I don't need babel to transpile my code but ESlint does need babel to lint the code (sounds weird but that's my understanding). So I also needed a basic babel config, babel.config.json:
{
"presets": [
[
"#babel/env",
{
"targets": {
"node": "12"
}
}
]
]
}
I had a very similar problem. The accepted answer is correct, as far as it goes, and very helpful. But I use a json version of the eslint config, not a javascript one, so once babel-eslint was installed using:
npm i eslint babel-eslint --save-dev
I had to change my json config. It looks like this now:
.eslintrc.json
{
"parserOptions": {
"es6": true,
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"parser": "babel-eslint",
"rules": {
"no-unused-vars": 0
},
"env": {
"browser": true,
"node": true
}
}
It seems that native support for Public class fields without the need for a babel parser is now finally supported in Eslint since eslint8 with setting ecmaVersion: 13.
I would like to add "/app" as my base path for all routes in react routes. So I am trying -
.... more routes
I am unable to make webpack dev server serve pages with URL localhost:8080/app. It gives me a "Cannot get /app" error. If I try localhost:8080/ - it gives me an error that it cannot match a route with "/".
What should be a basic webpack dev server configuration for this scenario?
The Webpack historyApiFallback config option is what you're looking for. Just set that to true and all requests that don't route to an asset will be rewritten to /. You can also pass in an object with custom rewrites:
historyApiFallback: {
rewrites: [
{ from: /^\/$/, to: '/views/landing.html' },
{ from: /^\/subpage/, to: '/views/subpage.html' },
{ from: /./, to: '/views/404.html' }
]
}
(Example taken from the documentation page linked above.)
So first.. I have next gulp task:
gulp.task('js', function() {
browserify('./src/js/main.js')
.bundle()
.on('error', onError)
.pipe( source('main.js') )
.pipe( gulp.dest(path.build.js) );
});
and package.json:
{
"browserify": {
"transform": [
["babelify", { "presets": ["es2015"] }],
"debowerify"
]
},
}
I am importing Backbone in main.js (or only underscore... it doesn't matter)
import Backbone from 'backbone';
And in console I am getting error
Uncaught TypeError: Cannot read property '_' of undefined
I checked code and found that in underscore sources at start of library root is undefined
// Establish the root object, `window` in the browser, or `exports` on the server.
var root = this;
// Save the previous value of the `_` variable.
var previousUnderscore = root._;
I think the problem is that debowerify or babelfy is wrapping code in some function. But also if I use node modules without debowerify all works fine. But I want to use bower.
So how to fix this problem?
To any future visitors to this question,
this is similar to Underscore gives error when bundling with Webpack
The gist of the issue is that babel is probably running the underscore.js code, since underscore.js uses this, and in es6 this is undefined when outside of a function, naturally this._ fails.
In code I've fixed the issue by ensuring that babel does not run on node_modules.
In my case the same error arose when using just browserify with underscore. I've workarounded issue by switching from underscore to lodash. They are in general (surely not fully) compatible, but at the worst I'd rather copy some missing function from underscore sources than live with its deisolated load approach.