I have a simple Typescript project with this code:
import {
parseComponent,
compile as compileTemplate,
ASTElement,
} from "vue-template-compiler";
...
I compile it using tsc with:
"target": "es2020",
"module": "commonjs",
And it gives code like this:
const vue_template_compiler_1 = require("vue-template-compiler");
In my package.json I have this:
"dependencies": {
"vue-template-compiler": "^2.6.12"
But I don't have "vue", because I don't need all of Vue - just the template compiler.
This all works fine, but I'm trying to use Webpack to bundle everyone into a single file. However, when I run webpack I get this error:
ERROR in ./node_modules/vue-template-compiler/index.js 2:19-41
Module not found: Error: Can't resolve 'vue' in '/path/to/myproject/node_modules/vue-template-compiler'
# ./build/analysis.js 8:32-64
# ./build/index.js 8:19-40
This corresponds to the require("vue-template-checker") line. Why do I get this error?
Here's my webpack.config.js:
const path = require("path");
const webpack = require("webpack");
module.exports = {
target: "node",
entry: "./build/index.js",
mode: "production",
output: {
filename: "index.js",
path: path.resolve(__dirname, "dist"),
},
plugins: [
new webpack.BannerPlugin({ banner: "#!/usr/bin/env node", raw: true }),
],
};
That module makes Vue version check during import. I guess, you want to skip that check. I would try aliasing. Something like:
module.exports = {
// ...
resolve: {
alias: {
'vue-template-compiler$': 'vue-template-compiler/build.js'
}
}
}
Related
I am trying to make aliases for the components and sub-directories using jsconfig.json in my Vue.js project. But I am getting this error:
jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"#components/*": [
"./src/components/*"
],
}
},
"exclude": [
"node_modules"
]
}
SomeFile.vue
import GuestLayout from '#components/Layouts/GuestLayout';
Error:
ERROR Failed to compile with 1 error
...
To install it, you can run: npm install --save #components/Layouts/GuestLayout
I tried goggling for the issue but nothing seems to be working. This is the simplest one which found https://www.youtube.com/watch?v=U73TDohXmhQ
What am I doing wrong here..?
✔ Problem solved:
The thing that did the trick for me, was setting up the configurations in vue.config.js instead of using the jsconfig.json or tsconfig.json.
vue.config.js
const path = require('path');
module.exports = {
configureWebpack: {
resolve: {
alias: {
'#Layouts': path.resolve(__dirname, 'src/components/Layouts/'),
'#Inputs': path.resolve(__dirname, 'src/components/Input/'),
'#': path.resolve(__dirname, 'src/components/'),
}
}
}
}
SomeFile.vue
import GuestLayout from '#Layouts/GuestLayout';
import FormGroup from '#Inputs/FormGroup';
...
My testing-app is compiling fine, except that I get this warning:
" Critical dependency: the request of a dependency is an expression"
(base) marco#pc01:~/webMatters/vueMatters/PeerJS-VueJS-Test$ npm run serve
> testproject#0.1.0 serve /home/marco/webMatters/vueMatters/PeerJS-VueJS-Test
> vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin
WARNING Compiled with 1 warnings
7:22:25 PM
warning in ./node_modules/peerjs/dist/peerjs.min.js
Critical dependency: the request of a dependency is an expression
App running at:
- Local: http://localhost:8080
- Network: http://ggc.world/
Note that the development build is not optimized.
To create a production build, run npm run build.
I read around that it might depend of webpack, but didn't find how to put it right.
This is webpack.config.js :
{
"mode": "development",
"output": {
"path": __dirname+'/static',
"filename": "[name].[chunkhash:8].js"
},
"module": {
"rules": [
{
"test": /\.vue$/,
"exclude": /node_modules/,
"use": "vue-loader"
},
{
"test": /\.pem$/,
"use": "file-loader"
}
]
},
node: {
__dirname: false,
__filename: false
},
resolve: {
extension: ['*', '.pem'],
},
devServer: {
watchOptions: {
aggregateTimeout: 300,
poll: 1000
},
https: true,
compress: true,
public: 'ggc.world:8080'
}
}
Any ideas about how to solve it?
The following code works for me. Edit vue.config.js and add webpack config:
configureWebpack: {
module: {
exprContextCritical: false
}
}
const webpack = require('webpack');
module.exports = {
// ... your webpack configuration ...
plugins: [
new webpack.ContextReplacementPlugin(
/\/package-name\//,
(data) => {
delete data.dependencies[0].critical;
return data;
},
),
]
}
try this one
For people coming here using CRA and having trouble with PeerJS, install react-app-rewired and use the following override config and it should work.
/* config-overrides.js */
const webpack = require('./node_modules/webpack')
module.exports = function override (config, env) {
if (!config.plugins) {
config.plugins = []
}
config.plugins.push(
new webpack.ContextReplacementPlugin(
/\/peerjs\//,
(data) => {
delete data.dependencies[0].critical
return data
}
)
)
return config
}
It seems it is an error between the library bundler (parcel) and CRA bundler (webpack), and I couldn't find any official fix on the way.
I want to add support for async / await functions for my project.
I install
"#babel/core": "^7.2.0",
"#babel/plugin-transform-runtime": "^7.2.0",
"#babel/preset-env": "^7.2.0",
"#babel/preset-es2015": "^7.0.0-beta.53",
"#babel/preset-stage-2": "^7.0.0",
"#babel/runtime": "^7.2.0",
It's my webpack.config.js
const Encore = require('#symfony/webpack-encore');
Encore
.setOutputPath('public/build')
.setPublicPath('/build')
.addEntry('app', './assets/app.js')
.enableSourceMaps(!Encore.isProduction())
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableVueLoader()
.configureBabel(function(babelConfig) {
babelConfig.presets.push('#babel/preset-env');
babelConfig.presets.push('#babel/preset-stage-2');
babelConfig.plugins.push('#babel/plugin-transform-runtime');
})
;
const config = Encore.getWebpackConfig();
config.externals = {
mode: 'development',
// global app config object
config: JSON.stringify({
apiUrl: 'http://localhost:80',
devServer: {
public: 'http://localhost:3000',
disableHostCheck: true,
},
})
};
config.node = {
fs: "empty"
};
module.exports = config;
When I run a server dev, I get an error.
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Duplicate plugin/preset detected.
If you'd like to use two separate instances of a plugin,
they need separate names, e.g.
plugins: [
['some-plugin', {}],
['some-plugin', {}, 'some unique name'],
]
I can not understand what the problem is.
I also created a .babelrc file and wrote the same configuration in it. But unfortunately, this did not help (
Use .babelrc for change babel config like this. This file should be in your project root
{
"plugins": ["#babel/plugin-transform-runtime"],
"presets": [
[
"#babel/preset-env",
...
],
...
]
}
Then remove this from your webpack.config.js
.configureBabel(function(babelConfig) {
babelConfig.presets.push('#babel/preset-env');
babelConfig.presets.push('#babel/preset-stage-2');
babelConfig.plugins.push('#babel/plugin-transform-runtime');
})
I have the following webpack.config.ts:
var webpack = require( 'webpack' );
var path = require( 'path' );
module.exports = {
entry: [
'./api/bin/www.ts'
],
output: {
path: path.resolve( __dirname, './dist/api' ),
filename: 'index.js'
},
module: {
loaders: [
{ test: /\.ts$/, loader: 'awesome-typescript-loader' },
{ test: /\.json$/, loader: 'json-loader' }
]
},
resolve: {
extensions: [ '', '.js', '.ts' ]
},
target: 'node',
node: {
console: true,
fs: 'empty',
net: 'empty',
tls: 'empty'
}
};
When I run webpack I get a warning about a dependency:
WARNING in ./~/express/lib/view.js
Critical dependencies:
78:29-56 the request of a dependency is an expression
# ./~/express/lib/view.js 78:29-56
The express server I start with this is no more than a Hello World example and functions as should but I am concerned about this warning.
My googlefu hasn't revealed any passable solutions. I have seen one particular instance of this problem but the solutions were to bypass the warning by not showing it.
Use webpack-node-externals.
const nodeExternals = require('webpack-node-externals');
{
target: 'node',
externals: [nodeExternals()],
}
https://www.npmjs.com/package/webpack-node-externals
For those that only need to remove the express due to the view lib as mentioned here you can also explicitly target express in externals from your webpack config.
externals: [{ 'express': { commonjs: 'express' } }]
My warning only got fixed with:
module.exports =
{
target: 'node',
externals: {
"express": "require('express')"
}
}
Instead of excluding all of the npm dependencies to be bundled with nodeExternals you can also exclude only express by natively requiring it by replacing
import express from 'express';
// Or
const express = require('express');
To
const express = __non_webpack_require__('express');
That will suppress the warning caused by express
I am not able to import images in my headercomponent.ts.
I suspect it is because of something i am doing wrong while compiling ts(using webpack ts loader) because same thing works with react( where the components are written in es6)
The error location is
//headercomponent.ts
import {Component, View} from "angular2/core";
import {ROUTER_DIRECTIVES, Router} from "angular2/router";
import {AuthService} from "../../services/auth/auth.service";
import logoSource from "../../images/logo.png"; //**THIS CAUSES ERROR** Cannot find module '../../images/logo.png'
#Component({
selector: 'my-header',
//templateUrl:'components/header/header.tmpl.html' ,
template: `<header class="main-header">
<div class="top-bar">
<div class="top-bar-title">
<img src="{{logoSource}}">
</div>
my webpack config is
// webpack.config.js
'use strict';
var path = require('path');
var autoprefixer = require('autoprefixer');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var basePath = path.join(__dirname,'public');
//const TARGET = process.env.npm_lifecycle_event;
console.log("bp " + basePath)
module.exports = {
entry: path.join(basePath,'/components/boot/boot.ts'),
output: {
path: path.join(basePath,"..","/build"), // This is where images AND js will go
publicPath: path.join(basePath,"..","/build/assets"),
// publicPath: path.join(basePath ,'/images'), // This is used to generate URLs to e.g. images
filename: 'bundle.js'
},
plugins: [
new ExtractTextPlugin("bundle.css")
],
module: {
preLoaders: [ { test: /\.tsx$/, loader: "tslint" } ],
//
loaders: [
{ test: /\.(png!jpg)$/, loader: 'file-loader?name=/img/[name].[ext]' }, // inline base64 for <=8k images, direct URLs for the rest
{
test: /\.json/,
loader: 'json-loader',
},
{
test: /\.ts$/,
loader: 'ts-loader',
exclude: [/node_modules/]
},
{
test: /\.js$/,
loader: 'babel-loader'
},
{
test: /\.scss$/,
exclude: [/node_modules/],
loader: ExtractTextPlugin.extract("style", "css!postcss!sass?outputStyle=expanded")
},
// fonts and svg
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream" },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml" }
]
},
resolve: {
// now require('file') instead of require('file.coffee')
extensions: ['', '.ts', '.webpack.js', '.web.js', '.js', '.json', 'es6', 'png']
},
devtool: 'source-map'
};
and my directory structure looks like this
-/
-server/
-build/
-node-modules/
-public/
-components/
-boot/
-boot.component.ts
-header/
-header.component.ts
-images/
-logo.png
-services/
-typings/
-browser/
-main/
-browser.d.ts
-main.d.ts
-tsconfig.json
-typings.json
my tsconfig file is as follows:
//tsconfig.json
{
"compilerOptions": {
"target": "es5",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}
I suspect I am messing some thing in typescript compilation , not sure what
The problem is that you confuse TypeScript level modules and Webpack level modules.
In Webpack any file that you import goes through some build pipeline.
In Typescript only .ts and .js files are relevant and if you try to import x from file.png TypeScript just does not know what to do with it, Webpack config is not used by TypeScript.
In your case you need to separate the concerns, use import from for TypeScript/EcmaScript code and use require for Webpack specifics.
You would need to make TypeScript ignore this special Webpack require syntax with a definition like this in a .d.ts file:
declare function require(string): string;
This will make TypeScript ignore the require statements and Webpack will be able to process it in the build pipeline.
Instead of:
import image from 'pathToImage/image.extension';
Use:
const image = require('pathToImage/image.extension');
I'm using
import * as myImage from 'path/of/my/image.png';
and created a typescript definition with
declare module "*.png" {
const value: any;
export = value;
}
This only works when you have a correct handler like the file-loader in webpack. Because this handler will give you a path to your file.
A small improvement to Christian Stornowski's answer would be to make the export default, i.e.
declare module "*.png" {
const value: string;
export default value;
}
So you can import an image using:
import myImg from 'img/myImg.png';
I also had same issue so I used following approach:
import * as myImage from 'path/of/my/image';
In my component I simply assigned the imported image to a data member;
export class TempComponent{
public tempImage = myImage;
}
and used it in template as:
<img [src]="tempImage" alt="blah blah blah">
If you want to use the ES6 syntax for importing.
First be sure that in your tsconfig.json you have:
target: 'es5',
module: 'es6'
The following should now work:
import MyImage from './images/my-image.png';
To be able to use default import like this:
import grumpyCat from '../assets/grumpy_cat.jpg';
Define jpg module declaration:
declare module "*.jpg" {
const value: string;
export default value;
}
and in your tsconfig use "module": "es6" (see #vedran comment above) or when you use "module": "commonjs" add "esModuleInterop": true,
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"esModuleInterop": true,
...
Source: https://github.com/TypeStrong/ts-loader/issues/344#issuecomment-381398818