I've a sample TypeScript code and I'm trying to bundle multiple ts/tsx files using typescript compiler (tsc).
Here is the code:
File: ISample.ts
class ISample{
constructor(public value:string){
}
}
export = ISample;
File: Sample.ts
import ISample = require('./ISample');
class SampleImpl{
value: ISample;
constructor(sample:number){
this.value = new ISample(sample+'');
}
}
File: tsconfig.json
{
"compilerOptions": {
"module": "amd",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"jsx": "react",
"outFile": "./dist/bundle.js",
"target": "es3",
"listFiles": true,
"sourceMap": false
},
"files": [
"./src/Sample.ts",
"./src/ISample.ts"
]
}
When I run the command:
tsc
bundle.js is generated but it is completely blank.
Observations:
The problem doesn't occur when I move the code to Internal Modules
The problem also doesn't occur when I omit the import/require statement and use a declaration for ISample class, but in that case bundle.js does not contain the code of ISample class
Any ideas why this is happening?
This is not supported for now: Suggestion: multi-file external modules.
There are a set of workarounds, e.g. Compile TypeScript with modules and bundle to one file
Related
I have a Gruntfile.js like this.
module.exports = function(grunt) {
require('time-grunt')(grunt);
require('load-grunt-config')(grunt, {
jitGrunt: {
staticMappings: {
scsslint: 'grunt-scss-lint'
}
}
});
grunt.loadNpmTasks('grunt-run');
grunt.registerTask('default', ['eslint', 'jest', 'scsslint', 'svgstore'])
};
And when I run the grunt it says.
grunt
No "eslint" targets found.
eslint is already installed and I even created the configuration file using
./node_modules/.bin/eslint --init
And this is the content of .eslintrc.js.
module.exports = {
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 13
},
"rules": {
}
};
Any opinions?
Depending on how you downloaded the codebase for the theme, it may be missing the "grunt" folder. If your project is missing this folder, try adding the one from Cornerstone: https://github.com/bigcommerce/cornerstone/tree/master/grunt
Per the BigCommerce documentation around eslint errors -- If bundling your theme triggers multiple lint errors related to the bundle.js file, your theme is missing the .eslintignore file.
You can retrieve this file from the Cornerstone repo. Once you add this in, re-run the bundle command.
I want to use rollup to make two builds of my library, an UMD version as well as a never ESM version
Earlier my configuration when using the non official plugin rollup-plugin-typescript2 looked like this:
import typescript from 'rollup-plugin-typescript2'
import pkg from '../package.json'
export default {
input: 'src/index.ts',
output: [
{
file: pkg.main,
format: 'umd',
name: pkg.name,
sourcemap: true
},
{
file: pkg.module,
format: 'esm',
sourcemap: true
},
],
plugins: [
typescript({
tsconfig: "src/tsconfig.json",
useTsconfigDeclarationDir: true
}),
],
}
And in my package json I have:
(...)
"scripts": {
"build": "rollup -c ./scripts/dist.js",
},
"main": "dist/index.js",
"module": "dist/index.esm.js",
"files": [
"dist"
],
(...)
And in my tsconfig.json I have:
(...)
"compilerOptions": {
"rootDir": "./src",
"outDir": "./dist",
"declaration": true,
"declarationDir": "./dist/#types/chrisweb-utilities",
(...)
The resulat was "created dist/index.js, dist/index.esm.js in 2.6s" ... all good
The files that got created where the following:
/dist
|-#types
|-index.d.ts
|-index.js
|-index.esm.js
|-index.esm.js.map
|-index.js.map
Today I tried to use the official plugin #rollup/plugin-typescript instead (because I use that one in other projects where I only do a single ESM build and it works without a problem and I wanted to use the same plugins through out all of my projects)
I had a first error because of the configuration propery only rollup-plugin-typescript2 understands:
"(!) Plugin typescript: #rollup/plugin-typescript TS5023: Unknown compiler option 'useTsconfigDeclarationDir'."
So I removed it, which fixed that problem ...
But I got another error: "[!] (plugin typescript) Error: #rollup/plugin-typescript: 'dir' must be used when 'outDir' is specified."
So I added dir to my configuration, which then looked like this:
import typescript from '#rollup/plugin-typescript';
import pkg from '../package.json'
export default {
input: 'src/index.ts',
output: [
{
file: pkg.main,
format: 'umd',
name: pkg.name,
sourcemap: true,
dir: "dist",
},
{
file: pkg.module,
format: 'esm',
sourcemap: true,
dir: "dist",
},
],
plugins: [
typescript({
tsconfig: "tsconfig.json",
}),
],
}
Nope, next error shows up: "[!] Error: You must set either "output.file" for a single-file build or "output.dir" when generating multiple chunks."
Actually I don't even want to generate chunks, I'm fine with a single file, but I remove dir I'm back to the previous error. So next thing I tried was to keep "dir" and instead remove "file"
This worked, or at least I got a success message: "created dist, dist in 2.6s" but the problem now is that instead of having two builds I just have a single one "dist/index.js", the first build for UMD gets owerwritten by the second one for ESM.
I thought ok one last try, lets output the UMD version in a subfolder of /dist and the ESM version in another one, so I changed my config to this:
(...)
output: [
{
format: 'umd',
name: pkg.name,
sourcemap: true,
dir: "dist/umd",
},
{
format: 'esm',
sourcemap: true,
dir: "dist/esm",
},
],
(...)
This failed too :( this time with this error: "[!] (plugin typescript) Error: #rollup/plugin-typescript: 'outDir' must be located inside 'dir'." So my outDir is "./dist" which yes is not in dir: "dist/umd" anymore, I only have one outDir in tsconfig, so it can't be in each rollup output.dir, or do I miss something here?
Oh and I actually also tried something else, remember that earlier error where rollup told me that "'dir' must be used when 'outDir' is specified", so I removed outDir from tsconfig.json and hey another rollup error (at this point I think I got all possible rollup errors ;) ) which was the following: "[!] (plugin typescript) Error: #rollup/plugin-typescript: 'dir' must be used when 'declarationDir' is specified."
So I also commented out "declarationDir" in the tsconfig ... no more error, but this is not really the solution as now I don't have typescript type definition files getting generated.
I went back and forth and tried all combinations for hours, but no luck so far...
So I'm stuck and was wondering if someone can help me out? Maybe you had this or a similar problem? Either I'm missing something or this a bug in which case I will open a ticket in a few days.
General jist:
import Image from '#/assets/default-profile-picture.svg'
//ERROR: Cannot find module '#/assets/default-profile-picture.svg'.Vetur(2307)
I have spent the better part of today trying to find a solution to this. I know there are a lot of other posts like this one, but they are all outdated (all over a year old).
I've just generated a clean Vue CLI app, and still have the same issue.
I'm using Vue CLI Version 4.2.3, and just attempted using Vue CLI Version 4.3.1, but ran into the same issue.
I have checked that the file is in assets.
I have checked that the filename is spelled correctly.
I have a feeling this is a webpack issue, as require() would not work when called using typescript.
I have tried creating vue.config.js and manually setting the path for assets.
Project setup configuration:
Features: Babel, TS, Router, ESLint
not class-style syntax
Babel used alongside Typescript
No history mode for router
eslint with error prevention only
Lint on save
Configs placed in package.json.
Error in Component.vue
<script lang="ts">
import Vue from 'vue'
/* Cannot find module '#/assets/default-profile-picture.svg'.Vetur(2307) */
import Image from '#/assets/default-profile-picture.svg'
export default Vue.extend({
components: {
},
props: [
'employeeImage',
'employeeName',
'employeeAge',
'employeeSalary'
],
data () {
return {
marked: false,
result: [],
name: this.employeeName,
age: this.employeeAge,
salary: this.employeeSalary
}
},
computed: {
compClasses: function () {
return {
marked: this.marked
}
},
imageDefault: function () {
if (this.employeeImage === '') {
console.log('employee image empty: ' + this.employeeImage)
return '#/assets/default-profile-picture.svg'
} else {
console.log('employee image set: ' + this.employeeImage)
return this.employeeImage
}
}
}
})
</script>
Typescript Config
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env"
],
"paths": {
"#/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"/src/**/*.*",
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}
What am I doing wrong?
Thanks in advance!
Please keep this in mind, that this answer is not a solution but more like a work-around for this issue by the time this question has been asked/answered for vue-svg-loader(#vue/cli Version: 4.2.3 and 4.3.1).
You can use absolute path instead of using # to reference the file when you want to import .vue components. Here is an example:
Instead of this:
Read more about this issue and any possible solutions on official repository for this issue on GitHub:
Typescript Cannot find module '#/assets/svg/register.svg?inline' #92
Typescript does not support svg files.
Create a svg.d.ts file in your project source folder with the following content:
declare module '*.svg';
and restart your editor
I am having some problems building the distributable package for a React app.
I'm trying to execute the following sentence:
rimraf dist && env-cmd .env cross-env NODE_ENV=production webpack -p --config ./config/webpack/prod.js
And receiving this error:
ERROR in a86e50ffd4893c44fdfd.app.js from UglifyJs Unexpected token:
operator (>) [a86e50ffd4893c44fdfd.app.js:10679,43]
The line indicated in that trace corresponds to one of the libraries being loaded as dependencies, and not to the actual code of my app. This is the line itself (line 10679 corresponds to the declaration of the const method with the arrow function):
const DEFAULT_DISPLAY_LABEL_FOR_NULL_VALUES = '';
/* unused harmony export DEFAULT_DISPLAY_LABEL_FOR_NULL_VALUES */
const getAllColumnLabels = (columnLabels) => {
const columnNames = [];
columnLabels.forEach((value) => {
columnNames.push(value.label);
});
return columnNames;
};
At first I thought it could be related to Babel config, but it is identical to another project which is building correctly. The content of my .babelrc file is shown below, loaded using babel-preset-env:
{
"presets": [
[
"env", {
"modules": false,
"targets": {
"browsers": [
"Chrome >= 52",
"FireFox >= 44",
"Safari >= 7",
"Explorer 11",
"last 4 Edge versions"
]
},
"useBuiltIns": true
}
]
]
}
An additional test to rule out some possibilities has been done using the default presets for Babel, though no success was achieved with this test.
{
"presets": [
[
"env",
{
"modules": false
}
]
]
}
The settings in tsconfig.json could also be of interest, so i'm showing them here even though they also are identical to the ones in this another project mentioned above, which builds correctly:
{
"compilerOptions": {
"target": "es6",
"module": "es6",
"lib": ["dom", "es2017"],
"moduleResolution": "node",
"declaration": false,
"noImplicitAny": false,
"sourceMap": true,
"jsx": "react",
"noLib": false,
"allowJs": true,
"suppressImplicitAnyIndexErrors": true,
"skipLibCheck": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
},
"compileOnSave": true,
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
I've tried to delete node_modules and re-install the dependencies, also played setting uglify to false in the env for Babelrc, but surprisingly (at least, to me!) it didnt help.
There is a thread in the webpack-contrib Github site which is marked as closed but I didnt find anything that helped me.
Any ideas? I have some experience with npm but this issue certainly is blocking me.
Thanks!
Updating webpack to version 4 (currently 4.17) solved the problem. A few other dependencies needed to be updated to work properly with webpack 4, most importantly the Extract Text Webpack Plugin hasn't at this moment a stable release that works with webpack4, but the 4.0.0-beta works around the issue and may be used until a better replacement is found.
Description of the project: My project is downloading to node_module via package.json
Package.json
....
dependencies:{
....
"#myllc/application-core": "git+ssh://git#bitbucket.org/myllc/application-core.git",
"#myllc/application-shared":"git+ssh://git#bitbucket.org/myllc/application-shared.git",
}
....
Gotting error when doing "npm build":
ERROR in ./node_modules/#myllc/application-core/index.ts Module
build failed: Error:
/var/www/frontend-skeleton/node_modules/#myllc/application-core/index.ts is missing from the TypeScript compilation. Please make sure it is in
your tsconfig via the 'files' or 'include' property. The missing file
seems to be part of a third party library. TS files in published
libraries are often a sign of a badly packaged library. Please open an
issue in the library repository to alert its author and ask them to
package the library using the Angular Package Form at
(https:// goo.gl/jB3GVv).
This appear after upgrade from Angular4 to Angular5:
Tsconfig:
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"baseUrl": "src",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"lib": [
"es2016",
"dom"
],
"typeRoots": [
"node_modules/#types"
]
}
}
I tried to add
"include": [
"./node_modules/#myllc/**/*"
]
but there appear same error at deeper folder .ts file. Also founding
https://github.com/angular/angular-cli/issues/8284
but nothing solved this error.
What is the solution?
The solution is found in index.ts is not part of the compilation. #8284 by tapaz1 :
2 tsconfig.json files, one at the root of the app, and the other inside the src folder (one level down from the root) named tsconfig.app.json that extends the main tsconfig.json. I explicitly added the package that I needed that wasn't being transpiled by Typescript in the "include" array, and like a lot of people here I was getting the *.spec.ts files included despite having them in "exclude" option, so I removed it from the tsconfig.json. The fix was adding the "exclude" option to the second (extended) tsconfig.app.json file.
tsconfig.app.json:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../dist",
"baseUrl": "./",
"module": "es2015",
"types": []
},
"exclude": [
"../node_modules/your_package/**/*.spec.ts"
]
}