Incorporate its React Component Library to Annex Next

[jonetta]

There's a library with TypeScript+SASS components. The collection is carried out by a web-pack (Figure below). We're in the main project on Next. npm link♪ It's working well until I'm connected to the web-pack. Regular style-loader provocative error Reference Error: document is undefined Because the Annex Next will rent the page twice and in the first phase, it goes on the server. Used the flame MiniExtractCssPluginbut as ready main.css I don't understand. Since he was on the weekend director of the assembly, he was trying in the main project. import 'ui-lib/main.css'but it didn't find it. In the process of solving the problem, the google was accustomed to a type of error. window is undefined and publicPath is not supported by this browser♪ Example library chip:

• src/

  • components/ - folder with all components

  • button/

    • index.tsx - component
    • index.module.scs = module with styles

  • index.ts is a file with imports of all components of their OCD exports.

• configurations

How can the component library be properly connected to the Next Annex with all styles and preferably not break the possibility of accessing normal CRA/React applications?

Webcast configuration:

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {

mode: 'production',

target: 'web',

entry: './src/index.ts',

output: {

filename: 'index.js',

path: path.resolve(__dirname, 'dist'),

clean: true,

libraryTarget: 'umd',

umdNamedDefine: true,

globalObject: 'this',

},

resolve: {

extensions: ['.ts', '.tsx'],

},

externals: {

react: 'react',

//next: 'next',

},

plugins: [new MiniCssExtractPlugin({ // Не разобрался как его выхлоп подключить в основной проект

filename: "[name].css",

chunkFilename: "[id].css",

})],

module: {

rules: [

{

test: /.scss/,

use: ['style-loader', { loader: "css-loader", options: { modules: true } }, 'sass-loader'],

exclude: /node_modules/,

},

{

test: /.(ts|tsx)?$/,

use: ['ts-loader'],

exclude: /node_modules/,

}

],

},

};

[amarantha]

Got it. import 'ui-lib/dist/main.css'