Hi I am using Webpack 3 and Angular 4 app. below is my base.config for webpack. I am creating a seperate bundle for a js file in my typescript project.
'entry': {
'main': [
'./src/main.ts'
],
'polyfills': [
'./src/polyfills.ts'
],
'styles': [
'./src/styles/styles.scss'
],
'javascriptlib': [
'./src/javascriptlib.js'
]
},
Also, I am adding that to commonchunks plugin:
new CommonsChunkPlugin({
'name': 'javascriptlib',
'chunks': ['javascriptlib']
}),
In my project folder structure under src I have javascriptlib.js file.
In HTML of my app I am referring that file:
<script type="application/javascript" src="javascriptlib.bundle.js"></script>
After running webpack dev server on app's load time I am getting below error:
VM1261 javascriptlib.bundle.js:2 Uncaught ReferenceError: webpackJsonpac__name_ is not defined
at VM1261 javascriptlib.bundle.js:2
What is wrong here? I don't understand what I am missing here.
My intention here is to use javascriptlib.js in my ts project. javascriptlib.js doesn't have typings and it's very big file to convert to ts due to time constraint. I want to use javascriptlib.js as is. if there is any otherway I can achieve please help me out.
Thanks.
Related
I have a Typescript + Webpack boilerplate from electron-forge.
I store my data with better-sqlite3. And copy the database file with copy-webpack-plugin like this:
plugins: [
new CopyPlugin({
patterns: [
{ from: "src/data/db.db", to: "../data/db.db" }
],
}),
],
I then get my data base in my index.ts file like this:
const dbPath = isDevEnv
? path.join(app.getAppPath(), "src", "data", "db.db")
: path.join("resources", "app", ".webpack", "data", "db.db");
const db = new Database(dbPath, { verbose: console.log });
It is working okay when running locally, and also when running npm run make. But once I install or uninstall the app, it errors:
image: A Javascript error occured in the main process
A Javascript error occured in the main process
Uncaught exception:
TypeError: Cannot open database because the directory does not exist
While it errors like this, it installs the app okay on my desktop. It runs and is fetching data from the database. Anyone knows why it errors when installing and uninstalling?
I'm developing a website with Webpack 5, html-webpack-plugin, and html-loader.
Here's my index.html:
<!DOCTYPE html>
<html>
<head>
<title>test page</title>
</head>
<body>
<p>hello there</p>
<script type="application/javascript" src="../script/index.ts">
</script>
</body>
</html>
Here's my index.ts:
console.log('hi');
document.body.append('this isnt hmr but its not bad for a static site generator');
document.body.append('ree');
Here's the relevant section of my webpack.config.js:
module.exports = async (env) => {
return {
// ...
module: {
rules: [
// ...
{
test: /\.html$/i,
use: ['html-loader'],
},
],
},
plugins: [
// ...
new HtmlPlugin({
template: '../path/to/index.html',
filename: 'index.html',
})
],
// ...
};
};
When I try to compile this, I get the following error:
ERROR in Error: webpack-internal:///608:2
document.body.append('this isnt hmr but its not bad for a static site generator');
^
ReferenceError: document is not defined
- 608:2 eval
webpack-internal:///608:2:1
- index.html:21 Object.608
/home/laptou/website/client/source/page/index.html:21:1
- index.html:71 __webpack_require__
/home/laptou/website/client/source/page/index.html:71:41
- 673:3 eval
webpack-internal:///673:3:34
- index.html:48 Object.673
/home/laptou/website/client/source/page/index.html:48:1
- index.html:71 __webpack_require__
/home/laptou/website/client/source/page/index.html:71:41
- index.html:81
/home/laptou/website/client/source/page/index.html:81:18
- index.html:82
/home/laptou/website/client/source/page/index.html:82:12
- index.js:320 HtmlWebpackPlugin.evaluateCompilationResult
[client]/[html-webpack-plugin]/index.js:320:28
Why is the code in my index.ts being evaluated, instead of just being bundled, and how do I make this stop happening?
Edits:
I have looked at this question, but I feel my question is different because I am getting a different error. I already have a Babel loader in my chain, so all of the code should be perfectly digestible, plain JS.
I have looked at this question and its answer also, but I do not want to use Parcel because I could not get its glob imports to work correctly and consistently, and it does not have all of the features and community support that Webpack has.
I see a couple of issues in your webpack.config.js, and your index.html template.
Your template directly tries to include the index.ts, which is typescript.
But the plugin will inject the bundled script, so you shouldn't specify the script tag
yourself.
You have typescript in your project, but no rule specified with a loader for typescript.
You mention you are using 'html-webpack-plugin',
but the plugin you specify is spelled differently.
A final hint, on the error:
Whenever I've encountered 'docucument is not defined',
it has been because the webpack loader rules were configured inconsistently,
which causes webpack to execute the loaders on the wrong kinds of input,
which leads to weird 'the world is not defined!' kinds of errors.
Otherwise 'document is not defined' happens when clientside typescript/javascript
is erroneously included in a SSR(server-side-rendering) and/or nodeJS/server-side context.
I had a static website and I'm trying to kinda convert it into MEAN stack using Angular 5.
I want to add some scripts and styles for galleries, scrolling etc. to my HTML. The scripts need jQuery and I don't have to access them really they just need to run. I added them in the .angular-cli.json like so:
"styles": [
"styles.css",
"./src/app/assets/css/font-awesome-4.3.0/css/font-awesome.min.css",
"./src/app/assets/css/normalize.css",
"./src/app/assets/css/owl.carousel.css",
"./src/app/assets/css/owl.theme.css",
"./src/app/assets/css/main.css",
"./src/app/assets/css/responsive"
],
"scripts": [
"./src/app/assets/plugins/jquery-1.11.1.min.js",
"./src/app/assets/plugins/jquery.smooth-scroll.min.js",
"./src/app/assets/plugins/imagesloaded.js",
"./src/app/assets/plugins/owl.carousel.min.js",
"https://maps.googleapis.com/maps/api/js",
"./src/app/assets/plugins/jquery.waypoints.min.js",
"./src/app/assets/plugins/main.js"
],
Also added allowJs: true in the tsconfig.app.json
But I get an error when I try to run ng serve or ng build.
Cannot convert undefined or null to object
TypeError: Cannot convert undefined or null to object
at hasOwnProperty ()
at Object.hasProperty (/home/robin/webdevelopment/Guenters-Fahrschulen/node_modules/typescript/lib/typescript.js:2229:31)
at parseConfig (/home/robin/webdevelopment/Guenters-Fahrschulen/node_modules/typescript/lib/typescript.js:71815:16)
at /home/robin/webdevelopment/Guenters-Fahrschulen/node_modules/typescript/lib/typescript.js:71721:22
at Object.parseJsonConfigFileContent (/home/robin/webdevelopment/Guenters-Fahrschulen/node_modules/typescript/lib/typescript.js:71735:11)
at Object.readTsconfig (/home/robin/webdevelopment/Guenters-Fahrschulen/node_modules/#angular/cli/utilities/read-tsconfig.js:8:32)
at new NgCliWebpackConfig (/home/robin/webdevelopment/Guenters-Fahrschulen/node_modules/#angular/cli/models/webpack-config.js:19:42)
at Class.run (/home/robin/webdevelopment/Guenters-Fahrschulen/node_modules/#angular/cli/tasks/serve.js:71:29)
at check_port_1.checkPort.then.port (/home/robin/webdevelopment/Guenters-Fahrschulen/node_modules/#angular/cli/commands/serve.js:123:26)
at
at process._tickCallback (internal/process/next_tick.js:160:7)
My linter also throws an error on $(document).ready(); but how would I replace it?
I am trying to require all the files from xyz directory using webpack, but it throwing me console error saying
Argument 'module' is not a function, got Object
Here is sample code :
export default require('angular')
.module('app', [
require('angular-animate'),
require('angular-resource'),
require.context('../xyz/', true, /.routes$/) // Requiring all the route files from xyz directory
]);
Any help would be really appreciated.
I want to add some JavaScript module to my application made by meanjs-generator for Yeoman, but the modules’ script tags aren't generated to index.html. I just added the modules through bower and I didn’t touch any other files because generated files by the generator seem to look for .js files and add them to index.html automatically.
What is the correct way to add JavaScript module?
After executed bower command, you have to add your .js or .css file paths to config/env/all.js like as follows:
module.exports = {
...
assets: {
lib: {
css: [
'public/lib/bootstrap/dist/css/bootstrap.css',
'public/lib/bootstrap/dist/css/bootstrap-theme.css',
],
js: [
'public/lib/ng-file-upload/angular-file-upload-shim.js',
'public/lib/angular/angular.js',
'public/lib/angular-resource/angular-resource.js',
'public/lib/angular-cookies/angular-cookies.js',
'public/lib/angular-animate/angular-animate.js',
'public/lib/angular-touch/angular-touch.js',
'public/lib/angular-sanitize/angular-sanitize.js',
'public/lib/angular-ui-router/release/angular-ui-router.js',
'public/lib/angular-ui-utils/ui-utils.js',
'public/lib/angular-bootstrap/ui-bootstrap-tpls.js',
'public/lib/ng-file-upload/angular-file-upload.js'
]
},
...
}