I absolutely loved this blog when it got posted year or so ago & I used it for my extension.

Recently, I have been implementing licenses & I am facing an issue with the boilerplate.

Basically, I don't want to show the extension until someone buys a license so it should show the license page.

I tried creating a simple license.html & connected it to License.tsx but all I see is an empty page.

License.tsx

import React from 'react'

const License = () => <h1>License</h1>
export default License

onboarding.tsx

import React from 'react'
import ReactDOM from 'react-dom'

import License from '@/License'

import '@/styles/tailwind.css'

const mountNode = document.getElementById('license')
ReactDOM.render(<License />, mountNode)

license.html

<!DOCTYPE html>
<html>
    <head>
        <title>License</title>
        <meta charset="utf-8" />
    </head>

    <body>
        <div id="license"></div>
        <script src="license.js"></script>
    </body>
</html>

webpack.config.js

const fs = require('fs')
const path = require('path')
const webpack = require('webpack')
const CopyPlugin = require('copy-webpack-plugin')

const srcPath = (subdir) => path.join(__dirname, 'src', subdir)
const getFilesAndDirectories = (source) =>
    fs.readdirSync(source, { withFileTypes: true }).map((dirent) => dirent.name)

let absoluteImports = {}
getFilesAndDirectories('src').forEach((fileName) => {
    const fileNameWithoutExtension = path.parse(fileName).name
    absoluteImports[`@/${fileNameWithoutExtension}`] = srcPath(fileName)
})

const config = {
    mode: process.env.NODE_ENV || 'development',
    entry: {
        license: path.join(__dirname, 'src/license.tsx'),
        popup: path.join(__dirname, 'src/popup.tsx'),
        content: path.join(__dirname, 'src/content.ts'),
        background: path.join(__dirname, 'src/background.ts'),
    },
    output: { path: path.join(__dirname, 'extension'), filename: '[name].js' },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use: 'babel-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'postcss-loader'],
                exclude: /\.module\.css$/,
            },
            {
                test: /\.ts(x)?$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                            modules: true,
                        },
                    },
                ],
                include: /\.module\.css$/,
            },
            {
                test: /\.svg$/,
                use: 'file-loader',
            },
            {
                test: /\.png$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            mimetype: 'image/png',
                        },
                    },
                ],
            },
        ],
    },
    resolve: {
        extensions: ['.js', '.jsx', '.tsx', '.ts'],
        alias: {
            'react-dom': '@hot-loader/react-dom',
            ...absoluteImports,
        },
    },
    devtool: 'cheap-module-source-map',
    devServer: {
        contentBase: './extension',
    },
    plugins: [
        new CopyPlugin({
            patterns: [
                {
                    from: 'public',
                    to: '.',
                },
                {
                    from: 'icons',
                    to: '.',
                    globOptions: {
                        ignore: ['**/*.sh'],
                    },
                },
            ],
        }),
    ],
}

module.exports = config

The popup.tsx file does the same thing as onboarding.tsx but for some reason, I see the license page as blank.

Do you know if there is any solution to this?

sivertschou / snow-extension

Is there a way to use a second ReactDOM inside of this extension? #1

License.tsx

onboarding.tsx

license.html

webpack.config.js