I'm trying to build an Angular 2 app from scratch with Webpack. After adding all the files and finishing all the configurations, i build the project. while building it didn't give any error. but when i open the index.html the text loads while giving an error in the console as "Uncaught SyntaxError: Unexpected token import in app.bundle.js:47"
this is the place where it results the import error
/***/ function(module, exports) {
import 'core-js'; **//this is line 47**
import 'reflect-metadata';
import 'zone.js/dist/zone';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
/***/ }
/******/ ]);
the repo of my project enter link description here
Any reason why im getting this error?.I've tried almost everyting
You have a typo in your webpack.config.js which caused webpack to not use any loaders and simply concatenate the raw typescript source files into the bundle.
The property is module.loaders not module.loader.
You will need something like
resolve: {
extensions: ['', '.ts', '.js'],
root: path.resolve('src')
}
where path is imported with const path = require('path');
I don't know why it doesn't infer paths from the working directory...
Related
I'm new to the Typescript world and I'm facing an issue.
I'm trying to create a script to access firebase database functions, but when compiling the script I'm running into :
Uncaught ReferenceError: exports is not defined if I use "module": "commonjs" in my tsconfig.json
or
Uncaught SyntaxError: Cannot use import statement outside a module if I use "module": "es6"
In the second case, I can remove those three lines from the generated index.js file and everything is working properly :
import firebase from 'firebase/app';
import "firebase/database";
import "firebase/auth";
My question is, how can I use those external libraries in my typescript code, link them in my html without having those import in the compiled js file ?
Edit : Here's my ts file :
import firebase from 'firebase/app';
import "firebase/database"
import "firebase/auth"
class FbManager {
private static instance: FbManager;
firebaseConfig: object;
private constructor() {
this.firebaseConfig = {
...
};
firebase.initializeApp(this.firebaseConfig);
firebase.auth().onAuthStateChanged(function(user) {
console.log("AUTH STATE CHANGED");
if (user) {
console.log("LOGGED IN USER " + user.uid);
console.log(user);
} else {
console.log("SIGN OUT");
}
});
}
public static getInstance(): FbManager {
if (!FbManager.instance) {
FbManager.instance = new FbManager();
}
return FbManager.instance;
}
}
Thank you in advance !
Once you are in your repo type tsc --init after that TS config file will be generated.
Go to this file and uncomment outDir and after semicolon write e.g. "./build". Whole line will look like this "outDir": "./build"
Next thing you can do is to go to your package.json and in scripts write build: tsc. You'll be able to run npm command which will build your .ts files in build directory.
I need to have multiple configurations of webpack#5.
I wanted to create WebpackBuilder class that will be responsible for creating that webpack configuration.
So I created that file:
export default class WebpackBuilder {
test() {
console.log('Test');
}
}
When I import that file using const WebpackBuilder = require('./webpack.builder'); I got errors:
[webpack-cli] C:\strony\www\polskieszlaki_new\strony\webpack.builder.js:3
export default class WebpackBuilder {
^^^^^^
SyntaxError: Unexpected token 'export'
When using import WebpackBuilder from './webpack.builder';
[webpack-cli] C:\strony\www\polskieszlaki_new\strony\webpack.blog.config.js:2
import WebpackBuilder from './webpack.builder';
^^^^^^
SyntaxError: Cannot use import statement outside a module
My webpack command is webpack --mode=production --config webpack.blog.config.js
Looks like you imported an esm module into your configuration file which is written in cjs style.
You have to turn your esm module to cjs:
class WebpackBuilder {
test() {
console.log('Test');
}
}
module.exports = WebpackBuilder;
NOTE: You can also find out more languages to write the configuration file here: https://webpack.js.org/configuration/configuration-languages/
I have such files:
app.ts and config/config.ts
When from app.ts I try to import or require config:
import './config/config';
config file completely ignored(code inside config/config.ts is not executed) and no error occur (such as no module found), but If I rename config.ts for example to config-loader.ts and try to import config/config-loader - this works perfectly.
Can someone explain why I can't use file same name as parent folder to load this file later?
UPD:
here is content of app.ts file
import {foo} from './config/config';
console.log('from app');
console.log(foo);
./config/config.ts:
console.log('test from config');
export const foo = 'bar';
app is run with
ts-node -r tsconfig-paths/register app.ts
in console after run I see:
from app
undefined
Try to import an exported module from that file.
import {Config} from './config/config';
where Config is your exported module.
You can also use the JS way like
const config = require("./config/config")
but you will lose the typings.
In your case, the below means run a script.
import './config/config';
runs the script 'config'.
After installing vue2-google-maps with npm, I'm trying to import the component to my main.js. But I keep getting an error. I never had problem importing packages to main.js or to other .vue files.
Versions:
vue 2.6.10
vue2-google-maps#0.10.7
vue-cli 2.9.6 but also tried with 3.11.0
import App from "./App.vue";
import store from "./store/store.js";
import * as VueGoogleMaps from "vue2-google-maps";
Vue.use(
VueGoogleMaps,
{
load: {
key: "AIzaSyBYULuuIqKYMJVrEk1PjpUDQQYkGMmP0iM",
libraries: 'places'
}
}
);
I'm getting the error in this line : import * as VueGoogleMaps from "vue2-google-maps";
Error Message: Could not find a declaration file for module 'vue2-google-maps'.
'c:/Users/BotiVegh/vueJS_projects/vue-store-gallery-map/node_modules/vue2-google-maps/dist/main.js'
implicitly has an 'any' type. Try npm install
#types/vue2-google-maps if it exists or add a new declaration (.d.ts)
file containing declare module 'vue2-google-maps';ts(7016)
Do I need to change something in the config file?
You could try adding "noImplicitAny": false to your tsconfig.json file
This disables warnings on expressions and declarations with an implied 'any' type
I am going through the Gatsby.js tutorial and in tutorial two, you have to import some fonts. When I try to import theme lawton I see this error under import lawtonTheme from "typography-theme-lawton";
I first did npm install --save typography-theme-lawton
Could not find a declaration file for module 'typography-theme-lawton'. '/Users/react/tutorial-part-two/node_modules/typography-theme-lawton/dist/index.js' implicitly has an 'any' type.
Try `npm install #types/typography-theme-lawton` if it exists or add a new declaration (.d.ts) file containing `declare module 'typography-theme-lawton';`
This is my typography.js file:
import Typography from "typography";
//import bootstrapTheme from " typography-theme-bootstrap";
import lawtonTheme from "typography-theme-lawton";
const typography = new Typography(lawtonTheme);
//const typography = new Typography({ baseFontSize: "18px" });
//const typography = new Typography(bootstrapTheme);
export default typography;
This is my gatsby-config.js file:
module.exports = {
plugins: [
{
resolve: `gatsby-plugin-typography`,
options: {
pathToConfigModule: `src/utils/typography.js`
}
}
]
};
Also in the gatsby-config file, the word module is underline and this note shows:
[ts] File is a CommonJS module; it may be converted to an ES6 module. [80001]
I also tried npm install #types/typography-theme-lawton but it gave me errors
Based on your your problem，I guess you are using typescript, and the project can't find the ts module.
You need to install ts files.Try this:
npm install —-save #types/.....
Or, you can add a d.ts file in your project somewhere, and add the above in the file.
declare module typography-theme-lawton
[ts] File is a CommonJS module; it may be converted to an ES6 module. [80001]
I assume you are using VSCode.Add this in the setting to enable it:
"javascript.suggestionActions.enabled": false
PS: It's just a suggestion,so you can just ignore this.