in this set-up, how do you transpile the angular2 library being imported from the generated ngfactory files?
the current app is a combination of the webpack + aot cookbook based on the angular docs
angular.io/docs/ts/latest/cookbook/aot-compiler.html
angular.io/docs/ts/latest/guide/webpack.html
I have a working POC where you can replicate the issue from this repo:
https://github.com/jetlogs/Angular2-AOT-Localization
after you've done the compilation / bundling, you can open the 2 files:
non-aot.html - this is the non-aot version of the same app, and it loads fine
aot.html - this file fails with:
ng_module_factory.js?95b1:13 Uncaught SyntaxError: Unexpected token import
Expected behavior
the expected behavior is that aot.html and non-aot.html should have the same behavior
Minimal reproduction of the problem with instructions
clone the repo, then
run these commands on the working directory:
npm install
npm postinstall
npm run build
then open aot.html to reproduce the issue
Is there any way on how to fix the import statements from the imported angular2 libraries? Thanks
UPDATE:
I've tried transpiling the angular2 source files which are in ES2015 by using the babel-loader:
{
test: /\.js$/,
loader: 'babel',
include: [
/node_modules(\\|\/)#angular/
],
exclude: [
/\.umd\.js$/
],
query: {
presets: ['es2015']
}
},
it now compiles without issues with ES6 incompatibilities, however, it now encounters a new error only for aot.html:
core.umd.js?e2a5:3272Uncaught Error: No provider for NgZone!
any reason why transpiled angular2 source codes being referenced by the AOT compiler are cdausing NgZone issues?
I've updated the repo above to reflect my latest changes
UPDATE2: 10/13/16
Updated to Angular 2.1
still the same issue
The System.import syntax used in ng_module_factory.js is ES6 style module loading. Webpack 1, which you are probably using, does not support this syntax.
A workaround might be to transpile the Angular ES6 modules to ES5 with require() syntax, but you already tried this without success.
However you might consider switching to Webpack 2, which fully supports ES6 style imports and is very close to its stable release. The compilation worked for me this way without changing anything except for the webpack config which uses a new syntax for some parts.
For me it was a wrong import generated by IDE:
import { Component, Output } from "#angular/core/src/metadata/directives";
Instead of:
import { Component, Output } from "#angular/core";
Related
I am getting a syntax error in IE when this component of react is loaded in the webpage. Has anybody got the same problem? This is an inherited package, and a syntax error from node_modules makes no sense?
"use strict";
/* WEBPACK VAR INJECTION */(function(module) {
const colorConvert = __webpack_require__(/*! color-convert */ "./node_modules/color-convert/index.js");
const wrapAnsi16 = (fn, offset) => function () {
const code = fn.apply(colorConvert, arguments);
return `\u001B[${code + offset}m`;
};
const wrapAnsi256 = (fn, offset) => function () {
const code = fn.apply(colorConvert, arguments);
return `\u001B[${38 + offset};5;${code}m`;
};
If you are using newer versions of Node/NPM, check your package.json file -> "browserslist" section.
This is the default "browserslist" created for you if you do not have one defined:
In this case, if you run "npm start" on your LOCAL Environment, Babel will not create Polyfills for IE11 because its not included as a target browser in "development". To get this working, I deleted my node_modules directory completely, ran 'npm install', updated package.json with:
and ran 'npm start.
The reason why this fails is that babel or your other favorite transpiler might ignore node_modules (if that's how its configured), so you need to include it manually because IE does not support arrow function syntax.
First, if you search for wrapAnsi16 or wrapAnsi256 function names online it'll point you to common npm packages, such as: ansi-styles, chalk or color-convert, debug, strip-ansi, etc.
If you are using Webpack you can add the following to your rules:
module: {
rules: [{
exclude: /node_modules\/(?!(color-convert|ansi-styles|strip-ansi|ansi-regex|debug|react-dev-utils|chalk)\/).*/
}]
}
or, easier to read:
module: {
rules: [{
include: [
path.resolve(__dirname, 'node_modules/ansi-styles'),
path.resolve(__dirname, 'node_modules/strip-ansi'),
... other's here...
path.resolve(__dirname, 'src'),
]
}]
}
Hope this helps somebody in the future ;)
TLDR; you don't need this library, just run
npm run build
And it will be excluded from your build.
I have same problem with create-react-app, and I solve it (no). From my discovery, this library should not appear in browser, because it was designed for nodejs environment. Also I found, this library come to me as dependency of jest, and jest is dependency for tests and it come as dependency for react.
So, I run
npm run build
server -s build
And try my application in IE. And it work. So, when you run
npm start
It make file including dev dependencies and other garbage that should not appear in production and in browser at all. When you run
npm run build
It make file only with required project libraries.
I had similar issue #punkbit solution and installing 'react-app-polyfill'
and importing it at the top of the index.js file solved it
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
If it still does not work delete node-modules and reinstall also clear cache in IE.
All the best :)
This problem occurs because your compiled code contains (modern) ES6 syntax whilst IE11 only supports ES5.
A way to fix this is to instruct webpack to specifically compile the mentioned packages into ES5;
module: {
rules: [{
test: /\.(tsx?|js)$/,
include: [
// These dependencies have es6 syntax which ie11 doesn't like.
// Whenever you see a "SyntaxError" that crashes IE11 because of a new lib, add it here.
path.join(__dirname, 'node_modules/react-intl'),
path.join(__dirname, 'node_modules/pkce-challenge'),
path.join(__dirname, 'node_modules/fuse.js')
],
use: [{
loader: 'ts-loader', // Or whatever loader you're using
}]
}]
}
for me this was: fuse.js, pkce-challenge and react-intl.
I have a react native app that is setup with Redux and Redux Saga.
I have unit tests using mocha, all tests used to work fine until I added native-base.
When I test now, it throws this error
[poject-path]/node_modules/native-base-shoutem-theme/index.js:1
(function (exports, require, module, __filename, __dirname) { import connectStyle from './src/connectStyle';
^^^^^^
I have a setup with babel, is there anyway I can transpile that dependency? or do something without changing my code?
What I currently did in my file that is causing the problem is the following
const Toast = null;
if(process.env.NODE_ENV !== 'test')
Toast = require('native-base').Toast;
The tests work with the above, but I was just testing to make sure it passes and it did, however that's not a good way to do it.
There is a similar problem in their GitHub Repo here
Can anyone help?
I have a setup with babel, is there anyway I can transpile that dependency
By convention, all npm modules should be provided in repository in transplated form, usually, by perform prepublush script and index link into dist directory. But in general case babel can easily transplate any dependencies, by customizing ignore regex in configutation
For example, when using webpack with babel-loader, config with force transpiling MODULE_ONE and MODULE_TWO will have following view:
{
test: /(\.js)$/,
exclude: /node_modules(?!(?:\/|\\)((MODULE_ONE)|(MODULE_TWO)))/,
loader: 'babel',
query: { presets: ['react', 'es2015', 'stage-0'] }
}
I'm writing a Chrome Extension using ES6/React/Redux babel and Gulp.
I was using babel presets es2015, stage-2 and react.
Then I realized as I'm only targeting Chrome I could get rid of the es2015/estage-2 stage as it's supported by Chrome.
So the first I tried was to get the .babelrc and remove the references to es2015 and stage-2.
Not so fast... Before running webpack gulp script fails to run.
What I tried first was to make only the gulp file ES5 compatible.
Then I got errors of spread operators not being supported, so I re-added "stage-2" loader.
Then I got errors in different modules:
> WARNING in ./background/src/index.html Module parse failed:
> /my_path/my_project/src/index.html Unexpected token (1:0) You may need
> an appropriate loader to handle this file type. SyntaxError:
> Unexpected token (1:0)
> at Parser.pp$4.raise (/my_path/my_project/node_modules/acorn/dist/acorn.js:2221:15)
To help to understand how my code is structured, it's in 3 main folders:
background, content and popup. Each one representing a Chrome environment.
For each one, I have a separated webpack.config.js file, similar to this one: https://pastebin.com/hseVyQaw
Gulp then calls webpack for each config file and generated the bundle output file for each one, during the build process.
There's a way to make Gulp/Webpack works with ES6 syntax, while not transpiling it for the deployment?
What's the best approach for this issue?
Gulp version
> [17:32:27] Requiring external module babel-register
> [17:32:27]CLI version 3.9.1
> [17:32:27] Local version 3.9.1
Webpack version: 1.14.0
UPDATE
After adding html-loader as suggested by #Michael Jungo it seems to run fine, but it gives me a warning, not sure how bad is to ignore it:
WARNING in ./background/src/index.js
Critical dependencies:
17:29-52 the request of a dependency is an expression
# ./background/src/index.js 17:29-52
UPDATE 2
Oh, Chrome is complaining about modules syntax of my extension, but based on what I read it's suppose to be supported:
Uncaught SyntaxError: Unexpected token import
Your error is not related to babel or any ES6 features. You're trying to import the HTML file ./background/src/index.html but in the config you've posted, there is no rule for .html that could handle these files, therefore webpack tells you that you might need an appropriate loader for this file type.
You can use the html-loader and add the following rule to your loaders array:
{
test: /\.html$/,
loader: 'html-loader'
}
As for your babel config, it should work as you wanted. Keep in mind if you're using ES modules (import/export) you would still need to transpile them or switch to webpack 2 which supports them out of the box. Also UglifyJs doesn't understand ES6 syntax, if you want to uglify ES6 you have to use an alternative like babili with the babili-webpack-plugin.
I'm trying to create an isomorphic react app using express, react, and webpack.
Everything works fine until I import a css file in one of my components. I understand node can not handle this import, but can someone explain how this package on github allows their components to have a css import line?
https://github.com/kriasoft/react-starter-kit
I would like to make my project similar to that. Do they have a line anywhere that has the server ignore that line when rendering components?
This is the error I get
SyntaxError: /home/USER/Code/shared/general/ru/src/components/MainPage/MainPage.scss: Unexpected token (1:1)
> 1 | #import '../variables.scss';
| ^
2 |
3 | .MainPage {
4 | background-color: $primary-color;
at Parser.pp.raise (/home/USER/Code/shared/general/ru/node_modules/babylon/lib/parser/location.js:24:13)
at Parser.pp.unexpected (/home/USER/Code/shared/general/ru/node_modules/babylon/lib/parser/util.js:82:8)
at Parser.pp.parseExprAtom (/home/USER/Code/shared/general/ru/node_modules/babylon/lib/parser/expression.js:425:12)
at Parser.parseExprAtom (/home/USER/Code/shared/general/ru/node_modules/babylon/lib/plugins/jsx/index.js:412:22)
at Parser.pp.parseExprSubscripts (/home/USER/Code/shared/general/ru/node_modules/babylon/lib/parser/expression.js:236:19)
at Parser.pp.parseMaybeUnary (/home/USER/Code/shared/general/ru/node_modules/babylon/lib/parser/expression.js:217:19)
You need yet another loader to make css/style loaders to work.
https://www.npmjs.com/package/webpack-isomorphic-tools
But Webpack is made for client side code development only: it finds all require() calls inside your code and replaces them with various kinds of magic to make the things work. If you try to run the same source code outside of Webpack - for example, on a Node.js server - you'll get a ton of SyntaxErrors with Unexpected tokens. That's because on a Node.js server there's no Webpack require() magic happening and it simply tries to require() all the "assets" (styles, images, fonts, OpenGL shaders, etc) as if they were proper javascript-coded modules hence the error message.
Good luck!
Edit:
I think you also want to see this SO question. Importing CSS files in Isomorphic React Components
The project that the OP mentioned is using this:
https://github.com/kriasoft/isomorphic-style-loader
So yes, another loader + an interface to insert and use the styles.
Maybe you doesn't use the sass loader in tour webpack configuration.
Try install this loader:
Sass loader
Example of webpack config:
module.exports = {
...
module: {
loaders: [
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}
]
}
sassLoader: {
includePaths: [path.resolve(__dirname, "./some-folder")]
}
};
I can suggest also you to use postcss to apply autoprefixer!
I have problem with webpack build I write custom webpack config:
https://github.com/Simproduction/react-client-webpack
but when I run dev or build a project everything work correct but I can't call React from console or use react developers tools
I get error
Uncaught ReferenceError: React is not defined(…)
Could you help me?
My test project,
https://github.com/Simproduction/react-CM
You need to expose React so it is available on the window using the expose-loader:
module: {
loaders: [
{ test: require.resolve("react"), loader: "expose?React" },
]
}
It contains AMD and CommonJS in webpack. You know js loader, right?
If you use AMD ,you know that all js code are in 'define([],function(){ var a=10; ...}) area. if you want print a in console. You should like this
define([],function(){
var a=10;
window.a = a;
})
so, you can edit your main.js. Add this line window.React = React; , but we may use CDN instead of it is common solution.