‘import’ and ‘export’ may only appear at the top level
I got this error when I was missing a closing bracket. Simplified recreation: const foo = () => { return ( ‘bar’ ); }; <== this bracket was missing export default foo;
webpack
Webpack: Does the order of plugins matter?
Yes, the order matters: plugins are bound to the compiler and applied in the order specified. You can look into webpack/tapable for a clearer idea on how this works. Usually, though, you are not forced to think about ordering when binding compiler and compilation plugins, as plugin authors expose specific events that help you reason … Read more
What is the loader order for webpack?
{ test: /\.css$/, loaders: [‘style’], }, { test: /\.css$/, loaders: [‘css’], }, and { test: /\.css$/, loaders: [‘style’, ‘css’], }, appear to be equal. In function terms, this is the same as style(css(file)) (thanks Miguel). Note that within loaders they are evaluated from right to left.
Webpack: silence output
In my webpack config, Doing this reduced my incremental build time by 8 seconds and silenced output. The main one is chunks: false Play with it to fit your needs module.exports = { devServer: { stats: { colors: true, hash: false, version: false, timings: false, assets: false, chunks: false, modules: false, reasons: false, children: false, … Read more
How to include css files in Vue 2
You can import the css file on App.vue, inside the style tag. <style> @import ‘./assets/styles/yourstyles.css’; </style> Also, make sure you have the right loaders installed, if you need any.
Multiple html files using webpack
See an entrypoint as the root of a tree that references many other assets like javascript modules, images, templates and so on. When you define more than one entrypoint, you basically split your assets into so called chunks to not have all your code and assets in one single bundle. What I think you want … Read more
What is `require.context`?
One of the main features of webpack’s compiler is to recursively parse all the modules, starting from the entries, to build a graph of all the module dependencies by analyzing require(), require.context(), import and import() expressions. The usual interpretation of “context” in webpack, and similarly in Node.js, is some directory that is used as a … Read more
Webpack: “there are multiple modules with names that only differ in casing” but modules referenced are identical
This is usually a result of a minuscule typo. For instance, if you are importing your modules like this: import Vue from ‘vue’ or: import Vuex from ‘vuex’ Go through your files and check where you used phrases like from ‘Vue’ or from ‘Vuex’ and make sure to use the exact same capitals (uppercase letters) … Read more
Webpack – Critical dependency: the request of a dependency is an expression
Solved with npm install request@2.79.0 –save According to the authors of ajv, the issue will likely be resolved in the latest version of request in a few weeks’ time.
Webpack build failing with ERR_OSSL_EVP_UNSUPPORTED [duplicate]
I was able to fix it via: export NODE_OPTIONS=–openssl-legacy-provider sachaw’s comment to Node.js v17.0.0 – Error starting project in development mode #30078 But they say they fixed it: ijjk’s comment to Node.js v17.0.0 – Error starting project in development mode #30078: Hi, this has been updated in v11.1.3-canary.89 of Next.js, please update and give it … Read more