Related
I'm trying to move from babel to swc for compiling and bundling a react component library but I have trouble with the configuration.
When I run npm run spack, I get the following error:
thread '<unnamed>' panicked at 'internal error: entered unreachable code: module item found but is_es6 is false: ExportNamed(NamedExport { span: Span { lo: BytePos(954874), hi: BytePos(954914), ctxt: #0 }, specifiers: [Named(ExportNamedSpecifier { span: Span { lo: BytePos(954883), hi: BytePos(954890), ctxt: #0 }, orig: Ident(Ident { span: Span { lo: BytePos(954883), hi: BytePos(954890), ctxt: #4141 }, sym: Atom('default' type=static), optional: false }), exported: Some(Ident(Ident { span: Span { lo: BytePos(954883), hi: BytePos(954890), ctxt: #194 }, sym: Atom('default' type=static), optional: false })), is_type_only: false })], src: Some(Str { span: Span { lo: BytePos(954898), hi: BytePos(954913), ctxt: #0 }, value: Atom('./FormControl' type=dynamic), raw: Some(Atom(''./FormControl'' type=dynamic)) }), type_only: false, asserts: None })', crates/swc_bundler/src/bundler/chunk/cjs.rs:142:29
What I get from this error is that he fails to bundle React components. I can't find the is_es6 configuration mentioned in the error so I'm not sure how to solve this. I tried rereading the doc of swc without any success. The module part of the config doesn't seem to solve my problem.
Here is my working tree:
.
├── jest.config.ts
├── package-lock.json
├── package.json
├── spack.config.js
└── src
├── components
│ ├── FiltersBar
│ │ ├── FiltersBar.test.tsx
│ │ ├── FiltersBar.tsx
│ │ ├── __snapshots__
│ │ │ └── FiltersBar.test.tsx.snap
│ │ └── index.ts
│ └── index.ts
├── index.ts
└── libraries
├── helpers
│ ├── helpers.test.ts
│ ├── helpers.ts
│ └── index.ts
└── index.ts
Here is my .swcrc file:
{
"jsc": {
"target": "es2021",
"parser": {
"syntax": "typescript"
}
},
"module": {
"type": "commonjs"
}
}
I'm pretty new to all this stuff so please bear with me :)
I am restructuring the app and switching to monorepo using CRA and refactoring existing CRA configs.
The folder structure now looks like this.
.
├── api
│ ├── business
│ └── consumer
└── tsconfig.json
├── apps
│ ├── business
└── tsconfig.json
│ │ └── src
│ │ ├── components
│ │ ├── constants
│ │ ├── pages
│ │ └── reducers
│ └── consumer
└── tsconfig.json
│ └── src
│ ├── components
│ ├── constants
│ ├── pages
│ ├── reducers
│ └── selectors
├── config
│ ├── jest
│ └── utils
├── core
│ ├── components
│ ├── helpers
│ ├── services
│ ├── static
│ │ ├── images
│ │ └── styles
│ └── utils
├── public
├── scripts
├── tsconfig.json
├── shared
│ ├── components
│ ├── constants
│ ├── hooks
│ ├── redux
│ ├── selectors
│ └── types
I have added root paths in the root tsconfig.json and extended it for every in-module tsconfig.json.The root tsconfig.json looks like this
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"core/*": [
"core/*"
],
"api/*": [
"api/*"
],
"apps/*": [
"apps/*"
],
"shared/*": [
"shared/*"
],
"types/*": [
"shared/types/*"
],
"styles/*": [
"core/static/styles/*"
],
},
"jsx": "preserve",
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"noEmit": true,
"strict": true,
"allowJs": true,
"sourceMap": true,
"skipLibCheck": true,
"noImplicitAny": false,
"esModuleInterop": true,
"resolveJsonModule": true,
"noFallthroughCasesInSwitch": true,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"incremental": true,
"tsBuildInfoFile": "./buildcache/front-end",
},
"exclude": ["node_modules", "**/*.js"]
}
And here is the tsconfig.json for the business app.
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"components/*": [
"src/components/*"
],
"constants/*": [
"src/constants/*"
],
"helpers/*": [
"src/helpers/*"
],
"pages/*": [
"src/pages/*"
],
"reducers/*": [
"src/reducers/*"
],
"selectors/*": [
"src/selectors/*"
],
"types/*": [
"src/types/*"
],
"core/*": [
"../../core/*"
],
"apps/*": [
"../../apps/*"
],
"shared/*": [
"../../shared/*"
],
"api/*": [
"../../api/*"
]
}
},
"extends": "../../tsconfig.json"
}
I have also refactored paths.js to match my current folder structure ( P.S. - CRA doesn't allow to import files outside of the src so I changed paths ).
appName can be either business or consumer.I am running the app like npm start business which exposes the app name to the node process.
const grpConfig = require('./grp-config');
const parseArgv = require('./utils/parse-argv');
const args = parseArgv(process.argv);
const devMode = process.env.NODE_ENV === 'dev' || process.env.NODE_ENV === 'development';
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
const publicUrlOrPath = devMode ? '/' : `${grpConfig.CDN_URL}/${args.appName}/`;
const moduleFileExtensions = [
'web.mjs',
'mjs',
'web.js',
'js',
'web.ts',
'ts',
'web.tsx',
'tsx',
'json',
'web.jsx',
'jsx',
];
// Resolve file paths in the same order as webpack
const resolveModule = (resolveFn, filePath) => {
const extension = moduleFileExtensions.find(extension =>
fs.existsSync(resolveFn(`${filePath}.${extension}`)),
);
if (extension) {
return resolveFn(`${filePath}.${extension}`);
}
return resolveFn(`${filePath}.js`);
};
// config after eject: we're in ./config/
module.exports = {
publicUrlOrPath,
appRoot: resolveApp('.'),
appSrc: resolveApp(`${args.appName}/src`),
appPath: resolveApp(`apps/${args.appName}`),
dotenv: resolveApp('.env'),
appPublic: resolveApp('public'),
yarnLockFile: resolveApp('yarn.lock'),
appHtml: resolveApp(`public/index.html`),
appTsConfig: resolveApp(`apps/${args.appName}/tsconfig.json`),
appJsConfig: resolveApp('jsconfig.json'),
appPackageJson: resolveApp('package.json'),
appNodeModules: resolveApp('node_modules'),
appBuild: resolveApp(`build/${args.appName}`),
appWebpackCache: resolveApp('node_modules/.cache'),
swSrc: resolveModule(resolveApp, 'src/service-worker'),
testsSetup: resolveModule(resolveApp, 'tests/setupTests'),
appIndexJs: resolveModule(resolveApp, `apps/${args.appName}/index`),
appTsBuildInfoFile: resolveApp('node_modules/.cache/tsconfig.tsbuildinfo'),
};
module.exports.moduleFileExtensions = moduleFileExtensions;
And finally the webpack config.
{
// Webpack noise constrained to errors and warnings
mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
// Stop compilation early in production
bail: isEnvProduction,
devtool: isEnvProduction
? shouldUseSourceMap
? 'source-map'
: false
: isEnvDevelopment && 'cheap-module-source-map',
// These are the "entry points" to our application.
// This means they will be the "root" imports that are included in JS bundle.
entry: paths.appIndexJs,
output: {
// The build folder.
path: paths.appBuild,
pathinfo: isEnvDevelopment,
filename: isEnvProduction
? 'static/js/[name].[contenthash:8].js'
: isEnvDevelopment && 'static/js/bundle.js',
chunkFilename: isEnvProduction
? 'static/js/[name].[contenthash:8].chunk.js'
: isEnvDevelopment && 'static/js/[name].chunk.js',
assetModuleFilename: 'static/media/[name].[hash][ext]',
publicPath: paths.publicUrlOrPath,
devtoolModuleFilenameTemplate: isEnvProduction
? info =>
path
.relative(paths.appSrc, info.absoluteResourcePath)
.replace(/\\/g, '/')
: isEnvDevelopment &&
(info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
},
resolve: {
alias: {
// api: path.resolve(__dirname, 'api'),
// apps: path.resolve(__dirname, 'apps'),
// core: path.resolve(__dirname, 'core'),
// shared: path.resolve(__dirname, 'shared'),
components: path.resolve(__dirname, 'apps', 'business', 'src', 'components'),
reducers: path.resolve(__dirname, 'apps', 'business', 'src', 'components'),
// reducers: path.resolve(__dirname, paths.appPath, 'src', 'reducers'),
// pages: path.resolve(__dirname, 'apps', 'business', 'src', 'pages'),
// constants: path.resolve(__dirname, 'apps', 'business', 'src', 'constants'),
// helpers: path.resolve(__dirname, 'apps', 'business', 'src', 'helpers'),
// selectors: path.resolve(__dirname, 'apps', 'business', 'src', 'selectors'),
// types: path.resolve(__dirname, 'apps', 'business', 'src', 'types'),
},
},
module: {
strictExportPresence: true,
},
plugins: [
new ModuleNotFoundPlugin(paths.appPath),
// TypeScript type checking
useTypeScript &&
new ForkTsCheckerWebpackPlugin({
async: isEnvDevelopment,
typescript: {
typescriptPath: resolve.sync('typescript', {
basedir: paths.appNodeModules,
}),
configFile: paths.appTsConfig,
context: paths.appPath,
diagnosticOptions: {
syntactic: true,
},
mode: 'write-references',
// profile: true,
},
logger: {
infrastructure: 'silent',
},
}),
].filter(Boolean),
// Turn off performance processing because we utilize
// our own hints via the FileSizeReporter
performance: false,
}
I have removed nonrelated webpack configs so as not to create a mess for your convenience.
I am not sure what I have set up wrong, but when I am running npm start business, it throws me a lot of warnings like this.
Cannot find module 'reducers/root-reducer' or its corresponding type
declarations.
import { rootReducer } from 'reducers/root-reducer';
I have a project with the following structure:
.
├── app
│ ├── icon.svg
│ ├── index.html
│ └── scripts
├── config
│ └── iparams.json
├── jest.config.js
├── manifest.json
├── __mocks__
│ └── svgrMock.js
├── package.json
├── public
│ ├── index.html
│ └── iparams.html
├── setUpTests.js
├── src
│ ├── App.css
│ ├── app.index.css
│ ├── app.index.js
│ ├── App.js
│ ├── App.test.js
│ ├── assets
│ ├── components
│ ├── Config.css
│ ├── config.index.css
│ ├── config.index.js
│ ├── Config.js
│ ├── hooks
│ ├── log
│ └── logo.svg
├── webpack.config.js
└── yarn.lock
It have two main SPAs: config and app, so, I need to generate two different bundles respectively to ./config and ./app using webpack. The ./src/config.index.js is the entry point of the config app, witch renders the ./src/Config.js React component to the ./config/iparams.html page (using the ./public/iparams.html template). The same logic holds for the app page.
Currently I'm using this webpack config without success:
'use strict';
const HtmlWebPackPlugin = require('html-webpack-plugin');
const {
CleanWebpackPlugin
} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: {
'../app/': ['#babel/polyfill', `${process.cwd()}/src/app.index.js`],
'../config/': ['#babel/polyfill', `${process.cwd()}/src/config.index.js`]
},
output: {
globalObject: 'this',
path: `${process.cwd()}/dist`,
filename: '[name].[contenthash:8].js',
chunkFilename: '[name].[contenthash:8].js',
publicPath: './scripts',
clean: true
},
devtool: 'source-map',
module: {
rules: [{
test: /\.(js|jsx|ts|tsx|test.js)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.(css|scss)$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|jpe?g|gif|svg)$/i,
use: [{
loader: 'file-loader',
options: {
name: '[name][contenthash:8].[ext]',
outputPath: '/assets/img',
esModule: false
}
}]
},
{
test: /\.html$/,
use: [{
loader: 'html-loader'
}]
}
]
},
plugins: [
new CleanWebpackPlugin({
dangerouslyAllowCleanPatternsOutsideProject: true,
dry: false
}),
new MiniCssExtractPlugin({
filename: '[name].[contenthash:8].css',
chunkFilename: '[name].[contenthash:8].css'
}),
new HtmlWebPackPlugin({
template: `${process.cwd()}/public/index.html`,
filename: `${process.cwd()}/app/index.html`
}),
new HtmlWebPackPlugin({
template: `${process.cwd()}/public/iparams.html`,
filename: `${process.cwd()}/config/iparams.html`
}),
new CopyWebpackPlugin([
{
from: 'dist/**/*',
to: '../app'
}
]),
],
optimization: {
moduleIds: 'deterministic',
runtimeChunk: 'single',
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
priority: -10,
chunks: 'all'
}
}
}
}
};
What is the correct webpack configuration for this use case? Note that I'm using a proprietary sdk which doesn't allow a custom build script, just a custom webpack config, also, the pages outputs must be ./app and ./config.
I current have a project that follows this structure:
src/
├── browserAction/
│ ├── assets/
│ ├── index.html
│ ├── script.js
│ └── style.css
├── options/
│ ├── assets/
│ ├── index.html
│ ├── script.js
│ └── style.css
├── manifest.json
├── background_script.js
└── content_script.js
I currently have webpack setup to transpile the background and content script with babel and copy the manifest as a standalone file but I can't figure out how to bundle the two index.html files (containing the contents of script.js and style.js) and keep the file structure of being in two separate folders. My current webpack config is:
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const IS_PRODUCTION = process.env.NODE_ENV === 'production';
module.exports = {
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
context: path.resolve(__dirname, 'src'),
entry: { background_script: './background_script.js', content_script: './content_script.js'},
module: {
rules: [
{
test: /\.html$/i,
use: [
'file-loader',
'extract-loader',
{
loader: 'html-loader',
options: {
minimize: IS_PRODUCTION,
},
},
],
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.m?js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
},
},
],
},
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
},
},
],
},
],
},
plugins: [new CopyWebpackPlugin({ patterns: [{ from: 'manifest.json', to: '.' }] }), new CleanWebpackPlugin()],
};
And my intent is the output into dist matches:
dist/
├── browserAction/
│ └── index.html
├── options/
│ └── index.html
├── manifest.json
├── background_script.js
└── content_script.js
What loaders do I need to use to achieve this? I've been experimenting with various ones but I can't get the results I need.
You're looking for html-webpack-plugin. An example configuration:
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
context: path.resolve(__dirname, 'src'),
entry: {
browser_action: './browserAction/script.js',
options: './options/script.js',
background_script: './background_script.js',
content_script: './content_script.js'
},
module: {
// your loaders
// ...
},
plugins: [
new HtmlWebpackPlugin({
filename: 'browserAction/index.html',
template: 'browserAction/index.html',
chunks: ['browser_action']
}),
new HtmlWebpackPlugin({
filename: 'options/index.html',
template: 'options/index.html',
chunks: ['options']
})
]
}
By the way, it looks like you're trying to write a browser extension; I'd recommend a boilerplate like this which has webpack already configured.
I have a product made with React.js (sth like CRM) which I would like to distribute to many of my customers but with client-specific components (override the common ones).
Source folder structure of main codebase looks like this:
...
/src
├── components
│ ├── Sidebar
│ ├── Navbar
│ ├── Buttons
│ ├── Chart
│ └── __tests__
├── containers
│ ├── About
│ ├── App
│ ├── Chat
│ ├── ...
├── helpers
├── redux
│ ...
├── theme
| ...
└── vendor
...
/custom-src
├── clientA
│ ├── components
│ ├── containers
│ └── theme
└── clientB
└── components
...
But, each customer wants custom designed components for their CRM like custom Navbar, custom Sidebar, etc.. + custom UI theme (CSSs).
I don't want to have multiple codebases but also I don't want to distribute each client the same bundled code which will also include custom components of other clients.
Let's say I have clientA. He has some custom made components (which overrides the common ones), custom made containers and specific theme. Til now I was using bash script to merge /src folder with /custom-src/<client> folder but this approach does not seem right to me and also I have to make temp folder outside the working directory which is not very practical.
Does somebody know how can do this using webpack, which I already use for code bundling?
My current webpack configuration looks like this:
{
devtool: 'inline-source-map',
context: path.resolve(__dirname, '..'),
entry: {
'main': [
'webpack-hot-middleware/client?path=http://' + host + ':' + port + '/__webpack_hmr',
'./src/theme/loader!./webpack/styles.js',
'font-awesome-webpack!./src/theme/font-awesome.config.js',
'./src/client.js'
]
},
output: {
path: assetsPath,
filename: '[name]-[hash].js',
chunkFilename: '[name]-[chunkhash].js',
publicPath: 'http://' + host + ':' + port + '/dist/'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders: ['babel?' + JSON.stringify(babelLoaderQuery), 'eslint-loader']
},
{test: /\.json$/, loader: 'json-loader'},
{
test: /\.less$/,
loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!less?outputStyle=expanded&sourceMap'
},
{
test: /\.scss$/,
loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap'
},
{test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff"},
{test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff"},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream"},
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file"},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml"},
{
test: webpackIsomorphicToolsPlugin.regular_expression('images'),
loader: 'url-loader?limit=10240&name=[hash:6].[ext]'
}
]
},
progress: true,
resolve: {
modulesDirectories: [
'src',
'node_modules'
],
extensions: ['', '.json', '.js', '.jsx']
},
plugins: [
// hot reload
new webpack.HotModuleReplacementPlugin(),
new webpack.IgnorePlugin(/webpack-stats\.json$/),
new webpack.DefinePlugin({
__CLIENT__: true,
__SERVER__: false,
__DEVELOPMENT__: true
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
webpackIsomorphicToolsPlugin.development()
]
}
So I solved this thing using webpack's resolve.alias functionality with dynamically added filenames into it. Here's the code:
// webpack.config.js
let variation = require('./variation')("clientA");
...
let alias = Object.assign(variation, {
"components" : path.resolve(__dirname, '../src/components'),
"config" : path.resolve(__dirname, '../src/config'),
"containers" : path.resolve(__dirname, '../src/containers'),
"helpers" : path.resolve(__dirname, '../src/helpers'),
"theme" : path.resolve(__dirname, '../src/theme'),
"utils" : path.resolve(__dirname, '../src/utils'),
"vendor" : path.resolve(__dirname, '../src/vendor')
});
...
module.exports = {
...
resolve: {
...
alias: alias,
...
},
...
}
.
// variation.js
const fs = require('fs');
const path = require('path');
const walkSync = function (dir, filelist, base) {
const files = fs.readdirSync(dir);
const extension = /\.(js|jsx)$/i;
filelist = filelist || {};
files.forEach(function (file) {
const dirname = dir.replace(base, '').substr(1);
const fullname = dir + '/' + file;
const filename = file.replace(/(.*)\.[^.]+$/, '$1');
if (fs.statSync(dir + '/' + file).isDirectory()) {
filelist = walkSync(dir + '/' + file, filelist, base);
} else {
if (extension.test(file)) {
filelist[dirname + '/' + filename] = fullname;
} else {
filelist[dirname + '/' + file] = fullname;
}
}
});
return filelist;
};
module.exports = function(variation){
const dirname = path.resolve(__dirname, '../custom/' + variation);
const aliasComponents = walkSync(dirname + "/components", {}, dirname);
const aliasContainers = walkSync(dirname + "/containers", {}, dirname);
return Object.assign({}, aliasComponents, aliasContainers);
};
I hope someone will find it helpful.