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/
Related
I am using Jest to run tests on my JS code.
But currently, I am having an error:
Cannot use import statement outside a module
How can i fix this ?
I looked here but it does not what i am looking for: How to resolve "Cannot use import statement outside a module" in jest
This is my module:
class Path {
// code in here
}
export default Path;
This is the test file that exported from it:
import Path from "./Path";
// test() ...
This is my folder structure:
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
Say I have some npm module with
...
exports.abc = abc;
exports.xyz = xyz;
...
I want to generate some lib.js file which allows me to do:
import {abc, xyz} from 'path/to/lib.js';
from a javascript file I'm including in a webpage with <script type="module"></script>
I've tried
node_modules\.bin\webpack .\node_modules\package\lib.js -o .\path\to\lib.js --display-error-details --output-library my_lib
But I can't see to do any imports. I've tried
import defaultExport from "path/to/lib.js";
import my_lib from "path/to/lib.js";
import {xyz} from "path/to/lib.js";
which all give me a variant of: does not provide an export named '...'
and
import "path/to/lib.js"
console.log(my_lib);
which throws a ReferenceError
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.
I got a.js and b.js, both of the file are placed within the same directory.
a.js
export function test() {
return test
}
b.js
import { test } from './a'
I run
babel-node b.js
got unexpected token error, any clue why?
even I just do import path from 'path' in b.js I got this error
babel-node node_modules/.bin/mocha ./scripts/index.spec.js
/Users/Documents/myproject/scripts/index.spec.js:18
import path from 'path'
^^^^^^
SyntaxError: Unexpected token import
I believe you can solve this by creating a file named .babelrc in your project directory and adding the following in it:
{
"presets": ["es2015"]
}
Hope it will help!!