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?
Related
I've created boilder plate project with webpack, react, typescript etc. but whenever I build my project, webpack throw this errors on my entry point that Cannot resolve other modules (which is just simple Login component)
This is my webpack's error message
ERROR in ./src/index.tsx
Module not found: Error: Can't resolve './components/Login' in '/Users/myname/Desktop/Projects/front/src'
# ./src/index.tsx 6:14-43
This is my index.tsx file
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import Login from './components/Login';
ReactDOM.render(
<BrowserRouter>
<Login />
</BrowserRouter>,
document.getElementById('root')
);
And this is my Login components, which webpack cannot resolve
import * as React from 'react';
export default () => <div>Login</div>;
This is my webpack config and package.json's scripts
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: './src/index.tsx',
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'awesome-typescript-loader',
options: {
useCache: true,
reportFiles: ['src/**/*.{ts,tsx}']
}
},
{
enforce: 'pre',
test: /\.js$/,
loader: 'source-map-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'template/index.html'
})
],
mode: 'production',
output: {
path: path.resolve(__dirname, 'build/'),
filename: 'bundle.[hash].js'
},
plugins: [new CleanWebpackPlugin()]
};
package.json's scripts
"scripts": {
"build": "webpack"
},
I tried minimize my project as possible so you can focus on this single problem, why the hack my webpack cannot resolve ordinary component file? you can find this minimized project on https://github.com/sh2045/myproblem
you can just clone it, and run
npm i
npm run build
and you can see error message, please help :(
Instead of using awesome-typescript-loader why don't you try the loader's recommended by webpack for typescript
To fix your problem,
Install this node package npm install --save-dev typescript ts-loader. This is the loader that does ts to js conversion.
You need to remove awesome-typescript-loader and use ts-loader in webpack.config.js. Below is the updated webpack.config.js. You can use this configuration and execute npm run build and verify if your webpack bundles the project without errors
Modified webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: './src/index.tsx',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
enforce: 'pre',
test: /\.js$/,
loader: 'source-map-loader'
}
]
},
resolve: {
extensions: [ '.tsx', '.ts', '.js' ]
},
plugins: [
new HtmlWebpackPlugin({
template: 'template/index.html'
})
],
mode: 'production',
output: {
path: path.resolve(__dirname, 'build/'),
filename: 'bundle.[hash].js'
},
plugins: [new CleanWebpackPlugin()]
};
Note When i downloaded & setup your project from your git, this package npm i acorn --save was missing in your package.json i believe. so i had to install it manually
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.
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 am trying to bundle and server a small app I have on a webpack dev server. So far it has been good, however it seems to be unable to locate my jsx files. I have an index in each of my react smart component folders that looks like so :
import Component from './component';
import container from './container';
import reducers from './reducers';
export default {
Component,
container,
Container: container(),
reducers
};
Webpack is complaining when I try to run the bundle and saying
client:47 ./client/ux-demo/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./component in /Users/me/projects/ux-demo/client/ux-demo
resolve file
The only real difference is it is a jsx file, rather than a js file, but I have babel-loader in place.
Here is my webpack.config file
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./client/app.jsx'
],
output: {
path: path.join(__dirname, 'client'),
filename: 'bundle.js',
publicPath: '/client/'
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
module: {
loaders: [{
test: /\.js$/,
loaders: ['react-hot', 'babel-loader'],
include: path.join(__dirname, 'client')
}, {
test: /\.jsx$/,
loaders: ['react-hot', 'babel-loader'],
include: path.join(__dirname, 'client')
}]
}
};
Unsure what I am doing wrong here, thanks!
You need to tell webpack that resolve .jsx files also
resolve:{
extensions:['.jsx']
}