My own modules get included in the build but when using a public node module it does not get included for some reason. Here is the code below.
import helloWorld from "./module";
import Redux from 'redux'
console.log(Redux)
console.log(helloWorld)
when I open the browser Redux is undefined but helloWorld works properly and has my object.
The question is, how can I include redux in my build.
Here is my simple WebPack Config
const path = require('path');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
}
]
}
}
Are you sure entity with name Redux exists in redux module.
Try import { createStore } from 'redux' instead. The set up looks fine.
Related
I have created a JS file by using webpack export.
I am trying to import main.JS file in react app.
I am not able to import JS file created by webpack. Is this way of importing JS is the right approach in react?
I have tried all the library target option in webpack but none of the target type didnt work
webpack.config.js:
const path = require('path');
module.exports = {
entry: ["#babel/polyfill",'./src/index.js'],
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
libraryTarget: 'commonjs',
libraryExport: 'default',
library: 'API'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
main.js export file structure:
exports.API=function(t){..}).default;
react app:
import {API} from "./main.js";
I want to use the webpack export file in react app?
I'm very new to reactjs and webpack. I want to load html file to reactjs via using I use html-loader and webpack, but got this error
Failed to compile.
./src/test_ts.html
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <!DOCTYPE html>
| <html>
| <body>
This is my webpack config
var path = require("path");
var webpack = require("webpack");
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin("common.js");
module.exports = {
entry: "./src/header.js",
output: {
path: path.resolve(__dirname, "build"),
filename: "app.bundle.js"
},
module: {
loaders: [
{
test: /\.html$/,
loader: "html"
},
{
test: /\.js$/,
loader: "babel-loader",
query: {
presets: ["es2015", "react"]
}
}
]
},
stats: {
colors: true
},
devtool: "source-map"
};
and this is where I want to load
import React from "react";
import { Button } from "reactstrap";
var htmlContent = require("./test_ts.html");
class Header extends React.Component {
render() {
return <div></div>;
}
}
export default Header;
I try to follow many tutorial but can't resolve this, what may I do wrong?
Add the following rule to your webpack.config file:
{
test: /\.(html)$/,
use: {
loader: 'html-loader',
options: {
attrs: [':data-src']
}
}
}
Before that install html-loader using command: npm i -D html-loader :
I want to build a react component library as a node module to then import it into different projects. But if I try to import a component it just returns an empty object.
button.jsx:
import React, {Component} from 'react'
export class Button extends Component {
render() {
return <button className='btn'>Hello Button comp</button>
}
}
export default Button
index.js
var Button = require('./button/button').default;
module.exports = {
Button: Button
}
webpack.config.js
const Path = require('path');
module.exports = {
resolve: {
extensions: ['.js', '.jsx']
},
entry: {
app: './src/components/index.js'
},
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.jsx$/,
loader: 'babel-loader',
query: {
presets: [
'es2015',
'react'
]
},
exclude: /node_modules/,
include: [
Path.resolve(__dirname, 'src')
]
},
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: [
'es2015',
'react'
]
},
exclude: /node_modules/,
include: [
Path.resolve(__dirname, 'src')
]
}
]
}
}
Main property in package.json is bundle.js
I figured out that when I import Button in a project it is just an empty object. It seems to me as if webpack doesn't bundle the index file properly. Any ideas what could be wrong here?
A webpack bundle does not expose your exports by default, as it assumes that you're building an app and not a library (which is the far more common use of webpack). You can create a library by configuring output.library and output.libraryTarget.
output: {
path: __dirname,
filename: 'bundle.js',
library: 'yourLibName',
libraryTarget: 'commonjs2'
},
output.libraryTarget is the format of the module, which would also allow you to expose the library as a global variable. commonjs2 is the module format that Node uses. See What is commonjs2? for the difference between commonjs and commonjs2.
Since you're using React, you'll expect that the consumer of the library will have React present as a dependency and therefore you don't want to include it in your bundle. To do that you can define it as an External. This is shown in Authoring Libraries, which walks you through a small example.
Hey guys I'm setting my development server and I would like webpack to search through each .js file and transpiled them using babel. As is currently set up, my bundle.js only includes the content of my entry point but not other js file in the project directory. any tips ?
this is my webpack config
module.exports = {
entry: './app/src/index.js',
output:{
path: __dirname,
publicPath:'/',
filename: 'bundle.js'
},
devServer:{
inline: true,
contentBase:'./',
port: 61116
},
module: {
loaders: [
{
test: /\.js$/,
exclude:/(node_modules)/,
loader: 'babel-loader',
query: {
presets: ["es2015", "react", "stage-1"]
}
},
{
test: /\.css$/,
loader:"style-loader!css-loader"
},
{
test: /\.html$/,
loader:"html-loader"
}
]
}
}
and this is my folder structure
Entry Point index.js
import React from 'react' ;
import ReactDOM from 'react-dom';
console.log("This ran");
const App = () =>{
return (<p>This is a new app</p>);
}
ReactDOM.render(<App />, document.querySelector(".react-container"));
Any idea where I'm going wrong ?
As IsenrichO implies in the comments, you don't seem to be including "index.js" from your components folder. Any file that is not first imported by the entry point, or any file the entry point imports, and so on, will not be transpiled.
Try import IndexComponent from "./components/index";, or whatever the name of your index component class is.
I try to implement wow.js using react and webpack.
I install it via npm.
npm install --save wow.js
It install perfectly. Now the problem is how to import it properly. I can't make it work keep getting undefined.
I've tried few way:
First:
import wow from 'wow.js';
But webpack can't compile it. It says the module cannot be found. Even I using complete url import wow from /node_modules/wow.js
Second:
I'm using this solution from here:
require('imports?this=>window!js/wow.js');
But I still get cannot find modules (i change the path to my node_modules).
Third:
From here:
I'm using the expose module and try to new WOW().init(); it says Wow is undefined.
I'm not using his first solution because I want my html to look simple only has bundle.js script.
I can't found any other solution. What should I do to make it work?.
Thanks!
my webpack.config.js:
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:8080',
'bootstrap-loader',
'webpack/hot/only-dev-server',
'./src/js/index.js'
],
output: {
path: __dirname + "/build",
publicPath: "/build/",
filename: 'bundle.js'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
],
module: {
loaders: [
{
exclude: /node_modules/,
loader: 'react-hot!babel'
},
{
test: /\.css$/,
loader: 'style!css!postcss'
},
{
test: /\.scss$/,
loader: 'style!css!postcss!sass'
},
{ test: /\.(woff2?|ttf|eot|svg|otf)$/, loader: 'url?limit=10000' },
{
test: 'path/to/your/module/wow.min.js',
loader: "expose?WOW"
}
]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
devServer: {
historyApiFallback: true,
contentBase: './'
},
postcss: [autoprefixer]
};
Alternative option without updating your wepack config.
Install WOW.js: npm install wowjs
Import in your component: import WOW from 'wowjs';
Under componentDidMount() of your component: new WOW.WOW().init();
import React, {Component} from 'react';
import WOW from 'wowjs';
class Cmp extends Component {
componentDidMount() {
new WOW.WOW().init();
}
render() {
/* code */
}
}
export default Cmp;
Do the following steps
Install exports-loader
npm i exports-loader --save-dev
Add to webpack.config.js this loader
{
test: require.resolve('wow.js/dist/wow.js'),
loader: 'exports?this.WOW'
}
add import to your app
import WOW from 'wow.js/dist/wow.js';
You can also change .call(this) to .call(window) (wow.js last line). Found this solution here https://foundation.zurb.com/forum/posts/46574-how-to-add-js-library-from-bower