alexkrolick
commented
3 years ago We are indeed strictly locked onto that version of Axios at the moment. Can you try package aliasing if you need a different version in your app?
Closed BustosAndrew closed 3 years ago
alexkrolick
commented
3 years ago We are indeed strictly locked onto that version of Axios at the moment. Can you try package aliasing if you need a different version in your app?
BustosAndrew
commented
3 years ago After downgrading axios, and then installing all the peer dependencies manually, running gulp build still produces the webpack error. Any idea on how to fix that? I can't find the file activity-sidebar.js.
BustosAndrew
commented
3 years ago After adding content-preview and content-sidebar to webpack for code splitting this is my new error log:
[21:37:53] [Webpack errors]:
[21:37:53] 67.js from Terser
Unexpected token: punc (:) [webpack://./node_modules/setimmediate/setImmediate.js:80,12][67.js:30817,18]
at js_error (/Users/bustosman/Documents/GitHub/Box/Integration/node_modules/terser/dist/bundle.min.js:550:11)
at croak (/Users/bustosman/Documents/GitHub/Box/Integration/node_modules/terser/dist/bundle.min.js:1274:9)
at token_error (/Users/bustosman/Documents/GitHub/Box/Integration/node_modules/terser/dist/bundle.min.js:1282:9)
at unexpected (/Users/bustosman/Documents/GitHub/Box/Integration/node_modules/terser/dist/bundle.min.js:1288:9)
at semicolon (/Users/bustosman/Documents/GitHub/Box/Integration/node_modules/terser/dist/bundle.min.js:1326:56)
at simple_statement (/Users/bustosman/Documents/GitHub/Box/Integration/node_modules/terser/dist/bundle.min.js:1583:73)
at statement (/Users/bustosman/Documents/GitHub/Box/Integration/node_modules/terser/dist/bundle.min.js:1369:47)
at _embed_tokens_wrapper (/Users/bustosman/Documents/GitHub/Box/Integration/node_modules/terser/dist/bundle.min.js:1339:26)
at block_ (/Users/bustosman/Documents/GitHub/Box/Integration/node_modules/terser/dist/bundle.min.js:2172:20)
at statement (/Users/bustosman/Documents/GitHub/Box/Integration/node_modules/terser/dist/bundle.min.js:1403:29)As you can see 67.js is not a file.
Here is my current webpack config:
const webpack = require("webpack");
const Dotenv = require("dotenv-webpack");
const nodeExternals = require("webpack-node-externals");
const ESLintPlugin = require("eslint-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { IgnorePlugin } = require("webpack");
// const TerserPlugin = require("terser-webpack-plugin");
const path = require("path");
const fs = require("fs");
const argv = require("yargs").argv;
const { json } = require("express");
const debug = argv.debug !== undefined;
const lint = !(argv["no-linting"] || argv.l === true);
const config = [
{
entry: {
server: [path.join(__dirname, "/src/server/server.ts")]
},
mode: debug ? "development" : "production",
output: {
path: path.join(__dirname, "/dist"),
filename: "[name].js",
devtoolModuleFilenameTemplate: debug
? "[absolute-resource-path]"
: "[]"
},
externals: [nodeExternals()],
devtool: debug ? "source-map" : "source-map",
resolve: {
extensions: [".ts", ".tsx", ".js"],
alias: {}
},
target: "node",
node: {
__dirname: false,
__filename: false
},
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: ["ts-loader"]
}
]
},
plugins: []
},
{
entry: {
client: [path.join(__dirname, "/src/client/client.ts")],
sidebar:
"./node_modules/box-ui-elements/es/elements/content-sidebar/Sidebar",
preview:
"./node_modules/box-ui-elements/es/elements/content-preview/ContentPreview"
},
mode: debug ? "development" : "production",
output: {
path: path.join(__dirname, "/dist/web/scripts"),
filename: "[name].js",
libraryTarget: "umd",
library: "integration",
publicPath: "/scripts/"
},
externals: {},
devtool: debug ? "source-map" : "source-map",
resolve: {
extensions: [".ts", ".tsx", ".js"],
alias: {}
},
target: "web",
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: ["ts-loader"]
},
{
test: /\.css$/i,
use: ["style-loader", "css-loader"]
},
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader"
]
},
{
test: /\.js$/,
loader: "babel-loader",
exclude: /(node_modules)/
}
]
},
plugins: [
new Dotenv({
systemvars: true
})
]
}
];
if (lint !== false) {
config[0].plugins.push(
new ESLintPlugin({ extensions: ["ts", "tsx"], failOnError: false })
);
config[1].plugins.push(
new ESLintPlugin({ extensions: ["ts", "tsx"], failOnError: false })
);
}
module.exports = config;Looks like you are bundling UI Elements stand-alone from source. Can you try using the UMD builds from the dist folder that ship with the package instead?
BustosAndrew
commented
3 years ago How would I modify my current webpack config for the UMD builds?
alexkrolick
commented
3 years ago You don't need to webpack the dist/ files, they are prebuilt and ready for use in a <script> tag. You can also use the CDN approach described here: https://developer.box.com/guides/embed/ui-elements/installation/
Environment:
Desktop (please complete the following information):
Steps to reproduce the problem:
What is the expected behavior? (Screenshots can be helpful here) To be able to install the npm package without dependency issues. What went wrong? (Screenshots, console logs, or HAR files can be helpful here) Npm can't resolve dependency with axios versions. Log:
Link to application or sample code: N/A
Expected behavior To be able to install the package without dependency conflicts.
Additional context If I force the install of the package, and then run gulp build, this is the webpack error log I get:
Please update the package with the newest version of axios. (.21.1) I need to continue with integrating the content explorer into a Microsoft Teams tab. I'm aware box already has an app for this in MS Teams, but it's still limited in search features from what it seems.