I tried using angular-timer with webpack, es6 and the npm modules of moment and humanize-duration
My implementation would be:
import 'moment';
import 'humanize-duration';
import 'angular-timer';
And I get the error ReferenceError: humanizeDuration is not defined.
Sure, angular-timer needs the variable humanizeDuration and suggests in the requirements section to use bower and script src. In my understanding importing the src with webpack is the same as using it as src in a script tag.
This help for me:
Install moment and humanize-duration:
$ npm install moment
$ npm install humanize-duration
Install them in your webpack.config.js as plugins:
module.exports = function makeWebpackConfig() {
/**
* Config
* Reference: http://webpack.github.io/docs/configuration.html
* This is the object where all configuration gets set
*/
var config = {};
config.plugins = [
new webpack.ProvidePlugin({ 'moment': 'moment', 'humanizeDuration': 'humanize-duration' })
];
And import angular-timer in your component
import 'angular';
import 'angular-timer';
let yourModule = angular.module('your', [
'timer'
]);
I hope this will help you
Related
If I use require to import a module the error is: webpack_require is not a function.
If I use the import statement then its function are not working and I get a type-error.
Does webpack not work with bower?
You could resolve dependency using an alias. Refer https://webpack.js.org/configuration/resolve/?_sm_au_=iVV0dsf3NTdNVrRc#resolvealias
In webpack add the following config:
resolve: {
alias: {
jQuery: path.resolve('./bower_components/jquery/dist/jquery.js'),
...
}
}
In the application wherever you need jQuery import using below line (assuming you are using CommonJS module):
var $ = require('jQuery');
Hope this helps :)
When I try to import Jquery like
import $ from 'jquery';
inside test file
or like
import $ from 'jquery'; global.$ = global.jQuery = $;
inside the Jest setup file, I get error as
● Runtime Error- SyntaxError: Unexpected identifier
at new Function (<anonymous>)
at createMockFunction (node_modules/jest-mock/build/index.js:179:10)
at Array.forEach (<anonymous>)
at Array.forEach (<anonymous>)
How to fix this issue? Checked the path and node_modules for Jquery both are fine. using Jest version "^14.1.0".
I have a newer version of Jest (v24.7.0), so I'm not sure this answer works with the Jest version used in the question.
From a note on Jest documentation:
Note: babel-jest is automatically installed when installing Jest and will automatically transform files if a babel configuration exists in your project.
I found the solution on the Jest documentation itself:
Install these dependencies: npm install --save-dev babel-jest #babel/core #babel/preset-env
Add a configuration file for Babel similar to this one in your project's root directory:
// babel.config.js
module.exports = {
presets: [
[
'#babel/preset-env',
{
targets: {
node: 'current',
},
},
],
],
};
Try using #babel/preset-env. Here's an example .babelrc:
{
"env": {
"test": {
"presets": [["#babel/preset-env"]]
}
}
}
You can add additional configuration options, of course; the important part is that #babel/preset-env is set as a preset in your env.test object.
I've built a wrapper package for drag and drop in React, and I added storybook examples.
Since in my consumer React is exposed globally, i'm not importing React explicitly.
In the storybook examples I need to supply React as part of the custom webpack config, but for some reason it can't resolve React and I get a ReferenceError: React is not defined
This is the package - https://github.com/fiverr/drag_n_drop_package
And this is the custom webpack config file:
const webpack = require('webpack');
module.exports = {
plugins: [
new webpack.ProvidePlugin({
React: 'react'
})
],
module: {
loaders: [
{
test: /\.scss$/,
loader: 'style!raw!sass'
}
]
}
};
This is really strange but your storybook webpack.config.js is mixing webpack v1/v2.
Importing webpack as
const webpack = require('#kadira/storybook/node_modules/webpack');
solves it because it uses the same webpack reference that storybook is using (v1).
I found the following code in webpack.config.js at github:
externals: {
react: 'React'
}
It looks as this question. If it needs to load the React lib from external, like CDN. The page has to be sure have a script tag for importing React lib. And make sure this script tag is in front of the bundle.js or the file which it generated by webpack, so the Object of React will exist when the following code needs to use React, such as:
<script src="./react.js"></script>
<script src="./bundle.js"></script>
I have two project using webpack. Now I want to bring one project as module of other project. I can get the two bundle created but don't know how to import from the other bundle.
Elaborating a bit:-
Lets say the other file from which i want to import looks like as follows:-
index2.js (Bundled as bundleTwo)
import SomeCompoent from "./components/SomeCompoent/SomeCompoent";
module.exports = {SomeCompoent}
and in the file (is in another bundle - bundleOne) below I want to import the component (somecomponent):-
index1.js (in bundleOne)
import {SomeCompoent} from "bundleTwo";
but here bundleTwo is undefiend
Any help is highly appreciated
One way that I have figured out myself, is that using alias this can be achieved.
To make this line import {SomeCompoent} from "bundleTwo"; work, bundleTwo can be defined in alias :-
config:{
resolve: {
alias: {
"bundleTwo": path.join(__dirname, "<path_to_the_bundleTwo>")
}
....
If you want to use webpack only,then just set the libraryTarget to 'umd' in bundletwo webpack configuration.
In order to be able to import this module, you need to export your bundle.
output: {
libraryTarget: 'umd',// make the bundle export
filename: "index.js",
path: path.resolve(__dirname, "dist"),
}
However, this can also be achieved by just using Babel to transpile your ES6 code to ES5 code.
babel index2.js --out-file dist/index2.js
Now set the main in package.json to "dist/index2.js"
Now you can use it like
import {SomeCompoent} from "bundleTwo";
You can also create a gulp script for that
gulp.task('js', function () {
return gulp.src(['packages/**/*.js', "!**/*.test.js"])
.pipe(babel({
plugins: ['transform-runtime']
}))
.pipe(gulp.dest('dist'));
});
I have followed the official tutorial to set up react, typescript and webpack from here: https://www.typescriptlang.org/docs/handbook/react-&-webpack.html
Until this point it runs, fine.
Now I want to use the foundation CSS framework.
So I ran npm install --save foundation
Then I modified my TSX file to look like:
import * as React from "react";
import * as ReactDOM from "react-dom";
import * as React from "react";
import * as ReactDOM from "react-dom";
ReactDOM.render(
<a class="button" href="#">Default Button</a>,
document.getElementById("example")
);
Finally, I ran webpack.
However, when I open the generated index.html, the "button" is not there, just a link, which means the style was not applied.
In my /dist folder, I don't see anything related to css...
It seems that I'm missing something. Is there additional configuration that I have to do with webpack?
At first, foundation is installed as
npm install --save foundation-sites
then you need to include foundation in your root css file like
#import 'foundation';
and finally you need to alias it inside webpack config. For example when you are using sass loader
module: {,
sassLoader: {
includePaths: [
path.resolve(__dirname, "./node_modules/foundation-sites/scss")
]
}