I am attempting to create a bundle using rollup, typescript, and bazel environment. I am having trouble importing relative paths. Typescript builds correctly but rollup is unable to bundle the source.
WORKSPACE
# WORKSPACE
workspace(
name = "WORKSPACE",
# Map the @npm bazel workspace to the node_modules directory.
# This allows Bazel to use the same node_modules as other local tooling.
managed_directories = {"@npm": ["node_modules"]},
)
# Imports
load("//tools:dependencies.bzl", "fetch_dependencies")
fetch_dependencies()
load("@build_bazel_rules_nodejs//:index.bzl", "yarn_install")
yarn_install(
name = "npm",
package_json = "//:package.json",
yarn_lock = "//:yarn.lock",
)
# Set up web testing, choose browsers we can test on
load("@io_bazel_rules_webtesting//web:repositories.bzl", "web_test_repositories")
web_test_repositories()
load("@io_bazel_rules_webtesting//web/versioned:browsers-0.3.2.bzl", "browser_repositories")
browser_repositories(
chromium = True,
firefox = True,
)
FOLDER STRUCTURE
apps
mobile
index.ts
src
index.tsx
asd.ts
packages
core
index.ts
src
index.ts
...
CORE BUILD FILE
# Package Info
package(default_visibility = ['//visibility:public'])
# Imports
load('@npm//@bazel/typescript:index.bzl', 'ts_library')
load('@build_bazel_rules_nodejs//:index.bzl', 'pkg_npm')
ts_library(
name = "core",
module_name = '@app/core',
srcs = glob(["**/*.ts"]),
deps = [
"@npm//reflect-metadata",
"@npm//moment",
"@npm//rxjs",
"@npm//axios",
]
)
pkg_npm(
name = "core-package",
srcs = [],
substitutions = {"//internal/": "//"},
deps = [
'//packages/core:core'
],
)
APP BUILD FILE
# Package Info
package(default_visibility = ['//visibility:public'])
# Imports
load('@npm//@bazel/typescript:index.bzl', 'ts_library')
load("@npm//http-server:index.bzl", "http_server")
load("@npm//@bazel/rollup:index.bzl", "rollup_bundle")
ts_library(
name = "mobile",
module_name = '@app/mobile',
srcs = glob(["**/*.ts", "**/*.tsx"]),
deps = [
"@npm//react",
"@npm//@types/react",
"@npm//react-router-dom",
"@npm//@types/react-router-dom",
"@npm//rxjs",
"@npm//moment",
"//packages/core:core",
]
)
filegroup(
name = "mobile-source",
srcs = [":mobile"],
output_group = "es6_sources",
)
rollup_bundle(
config_file = "//:rollup.config.js",
name = "bundle",
entry_points = {
"index.ts" : "bundle"
},
srcs = [],
output_dir = True,
deps = [
":mobile",
"@npm//@rollup/plugin-node-resolve"
],
)
http_server(
name = "devserver",
data = [
"public/index.html",
"bundle",
],
args = ["."],
)
rollup.config.js
import { nodeResolve } from '@rollup/plugin-node-resolve';
export default {
input: 'index.ts',
output: {
name: 'bundle',
format: 'umd',
plugins: [
nodeResolve({
mainFields: ['browser', 'es2015', 'module', 'jsnext:main', 'main'],
})
]
},
onwarn: function (warning) {
if (warning.code === 'THIS_IS_UNDEFINED') { return; }
console.warn(warning.message);
}
};
my index file in apps/mobile
export * from '@apps/mobile/src';
import { A } from './src/as';
console.log(A.a());
When I run bazel build //apps/mobile:bundle, I receive the following error and the bundle file is not completed.
bazel-out/k8-fastbuild/bin/apps/mobile/index.mjs → bazel-out/k8-fastbuild/bin/apps/mobile/bundle...
'@app/mobile/src' is imported by bazel-out/k8-fastbuild/bin/apps/mobile/index.mjs, but could not be resolved – treating it as an external dependency
The "buildStart" hook used by the output plugin node-resolve is a build time hook and will not be run for that plugin. Either this plugin cannot be used as an output plugin, or it should have an option to configure it as an output plugin.
The "load" hook used by the output plugin node-resolve is a build time hook and will not be run for that plugin. Either this plugin cannot be used as an output plugin, or it should have an option to configure it as an output plugin.
The "resolveId" hook used by the output plugin node-resolve is a build time hook and will not be run for that plugin. Either this plugin cannot be used as an output plugin, or it should have an option to configure it as an output plugin.
GENRATED BUNDLE FILE
export * from '@apps/mobile/src';
class A {
static a() {
return 's';
}
}
console.log(A.a());