I'm working with preact, and loading a module dynamically within my code, using webpack code-splitting.
If I load my core bundle using a script tag, everything works perfectly. If I load it dynamically like the code bellow, the bundle breaks:
const script = document.createElement('script');
script.src = 'bundle-location.js';
document.body.appendChild(script);
This is the error I get:
If I add a breakpoint inside the Context.js file, I can see the problem:
In the first case, if using the script tag, then react__WEBPACK_IMPORTED_MODULE_0__ actually contains preact. For some reason that's eluding me, if I load the same script dynamically, the preact object exists, but is missing all of its exports, including the 'default' export.
It's important to note that if I disable code-splitting, then everything works properly.
This is my webpack configuration:
const config = {
mode: getMode(),
resolve: {
alias: {
react: 'preact/compat',
'react-dom': 'preact/compat',
},
extensions: ['.ts', '.tsx', '.js'],
},
module: {
rules: [
{
test: /\.(js|jsx|ts|tsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.svg$/,
exclude: /node_modules/,
use: [
'babel-loader',
{
loader: 'react-svg-loader',
query: {
svgo: {
pretty: true,
plugins: [
{
removeStyleElement: true,
},
{
removeViewBox: false,
},
],
},
},
}],
},
],
},
plugins: [
new webpack.DefinePlugin({
PLUGINS_PATH: JSON.stringify(getPluginsPath()),
}),
],
entry: './src/index.ts',
output: {
path: path.resolve(__dirname, './src/dist/bundle/'),
filename: 'bundle.js',
chunkFilename: '[name].js',
publicPath: getPluginsPath(),
},
};
module.exports = config;
Would really appreciate any direction.
Related
I've just faced to unpredictable situation during using custom webpack config.
I will try to explain the problem.
This is my simple app (file index.js):
console.log('!!this', this);
This is my webpack config (file webpack.config.js):
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/index.js',
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
}),
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
resolve: {
extensions: ['.js', '.jsx', '.json'],
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
additionalData: `#import './src/constants/global';`,
},
},
],
},
{
test: /\.(png|svg|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: { name: 'img/[name].[ext]' },
},
'image-webpack-loader',
],
},
],
},
};
This is my npm script for launching the app (file package.json):
"scripts": {
"dev": "webpack serve --config webpack.config.js",
},
As a result I see the next picture - all code executes twice (index.js, VM787 index.js).
In addition to that, if I use data fetching callback in my app with this configuration, I will see two equal requests in the Network tab.
Who knows what is the reason for that and how to resolve it?
Thanks!
This might be result of StrictMode. It mounts, unmount and mount conponent again, to check if everything is running correctly. Try removing it from index.js (just to check). Mind that it's useful for its purpose, and it only has this behaviour in dev mode.
If you're importing JavaScript into an HTML file yourself, you'll need to disable injection in the HtmlWebpackPlugin:
new HtmlWebpackPlugin({
template: './public/index.html',
inject: false,
}),
I am trying to bundle a angular project into a single file (js, css and html). I've managed to get the html and css working and js is also inline now (using HtmlWebpackInlineSourcePlugin). The js files generated after minification are like below:
The vendor, main and polyfill are inline in the index.html. But I see that the generated js for main and vendor js are trying to load from the chunk 3.js (this has the actual js that's written for the app).
I want this chunk also to be inline, but can't seem to find a way to do it. Even if I did manage to make it inline, how do I avoid vendor/main js from loading this chunk. The webpack config is below.
'use strict';
const webpackMerge = require('webpack-merge');
const ngw = require('#ngtools/webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
const isDev = process.env.NODE_ENV !== 'production';
//just a wrapper for path
const helpers = require('./helpers');
module.exports = {
mode: 'production',
output: {
path: helpers.root('dist'),
filename: '[name].js',
},
resolveLoader: {
modules: [helpers.root('node_modules')]
},
entry: {
vendor: './src/vendor.ts',
polyfills: './src/polyfills.ts',
main: './src/main.ts'
},
resolve: {
extensions: ['.ts', '.js', '.scss']
},
module: {
rules: [
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.(scss|sass)$/,
use: [
{ loader: 'style-loader', options: { sourceMap: isDev } },
{ loader: 'css-loader', options: { sourceMap: isDev } },
{ loader: 'sass-loader', options: { sourceMap: isDev } }
],
include: helpers.root('src', 'assets')
},
{
test: /\.(scss|sass)$/,
use: [
'to-string-loader',
{ loader: 'css-loader', options: { sourceMap: isDev } },
{ loader: 'sass-loader', options: { sourceMap: isDev } }
],
include: helpers.root('src', 'app')
},
{
test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
loader: '#ngtools/webpack'
}
]
},
plugins: [
new ngw.AngularCompilerPlugin({
tsConfigPath: helpers.root('tsconfig.json'),
entryModule: helpers.root('src', 'app', 'app.module#AppModule')
}),
new HtmlWebpackPlugin({
template: 'src/index.html',
inlineSource: '.(js|css)$',
}),
new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin),
// new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/chunk/])
]
};
FYI - I want it to be a single inline file because I need to use in google apps script (editor add on).
I ended up solving this using libraryTarget in webpack to compile to umd.
output: {
path: helpers.root('dist'),
publicPath: '/',
filename: '[name].js',
libraryTarget: "umd",
globalObject: 'this'
}
I'm developing a react native component on storybook, which uses react-native-paper and react-native-vector-icons.
The problem is that I can't see the icons, I tried to follow the guide on react-native-vector-icons, this: webpack
Below is the webpack, but I didn't quite understand how to use the second part of the code suggested in the guide, where and how I should use it.
Can anyone help me out?
webpack:
const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
template: path.resolve(__dirname, './public/index.html'),
filename: 'index.html',
inject: 'body',
})
module.exports = {
entry: path.join(__dirname, 'index.web.js'),
output: {
filename: 'bundle.js',
path: path.join(__dirname, '/build'),
},
resolve: {
alias: {
'react-native$': 'react-native-web',
'#storybook/react-native': '#storybook/react',
'styled-components/native': 'styled-components',
},
},
module: {
rules: [
{
test: /\.(js|jsx|ts|tsx)$/,
exclude: /node_modules[/\\](?!react-native-vector-icons)/,
use: {
loader: 'babel-loader',
options: {
// Disable reading babel configuration
babelrc: false,
configFile: false,
presets: [
'#babel/preset-env',
'#babel/preset-react',
'#babel/preset-flow',
'#babel/preset-typescript',
{
plugins: ['#babel/plugin-proposal-class-properties', '#babel/plugin-proposal-object-rest-spread'],
},
],
},
},
},
{
test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
loader: 'file-loader',
},
{
test: /\.ttf$/,
loader: 'url-loader', // or directly file-loader
include: path.resolve(__dirname, 'node_modules/react-native-vector-icons'),
},
],
},
plugins: [HTMLWebpackPluginConfig],
devServer: {
historyApiFallback: true,
contentBase: './',
hot: true,
},
}
The reason for your problem could be that your webpack.config.js is located in the folder .storybook.
So you have to change the path for loading the react-native-vector-icons and add ../ before node_modules, because of the folder structure.
...
{
test: /\.ttf$/,
loader: 'url-loader', // or directly file-loader
// add .. to the path for node_modules
include: path.resolve(__dirname, '../node_modules/react-native-vector-icons'),
},
...
An similar issue has been described and solved here: React Native Vector Icons don't load on react-native-web storybook
I am building a javascript library using NPM and webpack but can't seem to get intellisense to work on my exported module. At the bottom of this post I have included a link to a zip of a small demo project that depicts the problem. Specifically I have a SimulatedClient.js file which imports my module from the dist folder. If you try to use the module it works as intended and has all of the data it should, but you don't get any intellisense/autocomplete in VScode, which makes development a nightmare. How can I get vscode to give valid autocomplete for my module output? Thanks for your help and here is my current webpack setup which is also included in the attached zip:
module.exports = {
target: "web",
entry: { vueStyles: "./src/js/vueStyles.js" },
mode: "development",
devtool: "source-map",
output: {
filename: "[name].js",
path: path.join(__dirname, "dist"),
library: "vueStyles",
libraryTarget: "umd",
globalObject: "this",
umdNamedDefine: true,
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
loader: "css-loader",
options: {
importLoaders: 1,
},
}),
new CleanWebpackPlugin(),
new ProgressBarPlugin({
format: " vueStyles webpack [:bar] " + chalk.green.bold(":percent") + " (:elapsed seconds): :msg",
clear: false,
}),
],
module: {
rules: [
{
test: /\.(sa|s?c)ss$/i,
use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader", "sass-loader"],
},
{
test: /\.m?js$/i,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env"],
plugins: [
"#babel/plugin-transform-runtime",
"#babel/plugin-proposal-nullish-coalescing-operator",
"#babel/plugin-proposal-optional-chaining",
],
},
},
},
{
test: /\.(svg|ttf|eot|woff2?)$/,
loader: "url-loader?name=[name].[ext]",
},
],
},
};
Test Solution Zip
I am using a .Net MVC framework, and trying to render a jsx (React) file that has imports. I am including this file in the razor page (cshtml) through the standard Url.Content injection as follows:
<script src="#Url.Content("~/js/queue/QueueIndex.js")"></script>
<script>
ReactDOM.render(React.createElement(QueueIndex), document.getElementById("queue-index"));
jQuery(window).on("load scroll", function () {
'use strict'; // Start of use strict
// Loader
$("#dvLoading").fadeOut("fast");
});
</script>
If I do not have an import at the top of my React file (QueueIndex.jsx) the page loads just fine. However, I would like to import the react-table package, but if include any imports in my QueueIndex.jsx file, the page breaks.
The error I'm getting is require is not defined.
I think the solution is somewhere in the use of webpack, here is my config:
const webpack = require("webpack");
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
nhqueue: './wwwroot/js/queue/QueueIndex.jsx'
},
output: {
path: __dirname + '/wwwroot/js/',
publicPath: '/wwwroot/js/',
filename: '[name].bundle.js'
},
module: {
preLoaders: [
],
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{ test: /\.tsx?$/, loaders: ['babel', 'ts'] },
{ test: /\.json$ /, loader: "json-loader" },
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: "babel",
query:
{
presets: ['react']
}
}
],
externals: {
"moment": "moment",
},
},
devtool: 'source-map',
target: 'web',
plugins: [
new CleanWebpackPlugin(['./wwwroot/js/*.js'], {
root: __dirname,
verbose: true,
dry: false
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin()
],
resolve: {
extensions: ['', '.jsx', '.js', '.tsx', '.ts']
},
node: {
fs: "empty",
child_process: "empty"
}
}
Unfortunately, I have had no luck there. Please let me know if you have any ideas of how to resolve this issue. Thanks!
Also, Here is the Babel configuration:
{"presets" : ["es2015", "react"]}