I have a Vue3 project made with Vue CLI 5.0.1
My setup has a public folder where I have static assets that I need to serve, but it is very heavy (1GB of assets) so when I launch the npm run serve command I get the build stuck on [92%] sealing (asset processing copy-webpack-plugin).
I need so to exclude the public/resources directory from the copy-webpack-plugin.
I tried with the following config added in my vue.config.js:
chainWebpack: (config) => {
config.plugin("copy").tap(([options]) => {
options[0].ignore.push("resources/**");
return [options];
});
}
But I get this error:
ERROR TypeError: Cannot read property 'ignore' of undefined
This has been answered on Github.
The options format has changed so you need to modify your code as follows:
chainWebpack: (config) => {
config.plugin("copy").tap(([options]) => {
options.patterns[0].globOptions.ignore.push("resources/**");
return [options];
});
}
Related
I have built a library that I want to use in a Next.JS project. Within this library a certain dependency is using an import via a string passed into a require statement within the source code where the import is taking place. This is causing webpack to not recognize the import. I don't want to change code within any node_modules as this is not a preferred approach but how can I ensure that my project using the library I built is able to compile and run?
Within file_using_string_passed_into_require_to_get_import.js:
let importName = "./potential_import_A.js"
if(condition){
importName = "./potential_import_B.js"
}
module.exports = require(importName)
This is the folder structure:
Project/
| node_modules
| my-library
| node_modules
| library-dependency
| file_using_string_passed_into_require_to_get_import.js
| potential_import_A.js
| potential_import_B.js
To create a local (unpublished) library package
Create a 'my-library' folder (outside your current project dir).
Do npm init (Folder must include the 'package.json' )
Include source code (potential_import_A), exporting any desired functions.
In the actual project folder:
cd into the folder of the project that needs to use your library.
Run npm install --save local/path/to/my-library.
The --save will add the package to your dependencies in the project's package.json file, as it does with 3rd party published packages. It will also add a copy of the source code to the node modules folder of the project, as always.
Importing your new library:
import/require the package as you would normally, from any project.
For example
import { myFunction } from "my-library"
I got it to work by excluding node_modules from the webpack build. Since I am using Next.JS this is within my next.config.js
const nodeExternals = require('webpack-node-externals');
module.exports = {
webpack: (
config,
{
buildId, dev, isServer, defaultLoaders, nextRuntime, webpack,
},
) => {
if (isServer) {
config.target = 'node';
config.node = {
__dirname: true,
global: true,
__filename: true,
};
config.externals = [nodeExternals()], // in order to ignore all modules in node_modules folder
config.externalsPresets = {
node: true, // in order to ignore built-in modules like path, fs, etc.
};
}
return config;
},
};
I'm currently working on a project with webpack (version 5.50.0) and Storybook (version 6.3.7). The stories directory in this project is within the storybook directory.
During an update of webpack to version 5.51.1 I came across the following error
when I run npm run storybook:
10% building 0/15 entries 21/55 dependencies 1/17 modules/Users/dsudol/development/projects/ca_projects/Test/node_modules/webpack/lib/FileSystemInfo.js:816
if (entry.resolved !== undefined) return entry.resolved;
^
TypeError: Cannot read property 'resolved' of undefined
at getResolvedTimestamp
Here's my main.js config
'use strict';
const path = require('path');
module.exports = {
stories: [
'./**/*.stories.#(js|jsx|ts|tsx|mdx)'
],
core: {
builder: 'webpack5'
},
addons: [
'#storybook/addon-links',
'#storybook/addon-docs',
'#storybook/addon-contexts/register',
'#storybook/addon-controls',
{
name: '#storybook/addon-essentials',
options: {
backgrounds: true
}
}
]
};
How can I solve this without moving the stories out of the storybook directory or using an explicit path like './stories/**/*.stories.#(js|jsx|ts|tsx|mdx)'.
Tipps to Reproduce
Create a simple app with react (I did it without npm install create-react-app), webpack and Storybook. Move the stories directory inside the .storybook directory. Then change the path in main.js accordingly and run npm run storybook.
This was fixed in Webpack 5.51.2, so you'll need to update.
Further reading:
Bug Report
Bug Fix
I want to do this:
import { pushState } from 'vue-router/src/util/push-state.js'
However, for some reason, the developers of vue-router wrote the push-state.js in TypeScript but left it with a .js extension. So when I first tried to import it, it gave me the following error when I ran vue-cli-service serve:
Module parse failed: Unexpected token (25:30)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> export function pushState (url?: string, replace?: boolean) {
I thus modified my vue.config.js like this:
module.exports = {
...
chainWebpack: config => {
...
config.module
.rule('ts')
.test(/push-state/)
.use('ts-loader')
.loader('ts-loader')
.end();
return config
}
}
and my tsconfig.json is as follows:
{
"include": [
"node_modules/vue-router/src/util/push-state.js",
"./node_modules/vue-router/src/util/push-state.js",
"./buffer.ts",
],
"exclude":[],
}
Now it does not throw any error, but pushState is simply undefined. I tried with require('vue-router/src/util/push-state.js') but it simply returns an empty object. I have ts-loader and typescript in my devDependencies.
I'm usig Snap.svg in Vue project, generated with Vue cli 3.
Snap is added to vue.config.js as follows:
module.exports = {
chainWebpack: config => {
config.module
.rule("i18n")
.resourceQuery(/blockType=i18n/)
.type("javascript/auto")
.use("i18n")
.loader("#kazupon/vue-i18n-loader")
.end();
config.module
.rule("snapsvg")
.test(require.resolve("snapsvg"))
.use("imports-loader?this=>window,fix=>module.exports=0")
.loader("imports-loader")
.end();
}
};
As well as to main.js
const snap = require(`imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js`);
I'm using snap in my components without local import.
var s = Snap(this.paper["svg-wrap"]);
The library works as excepted, svg is generated, however i keep getting Eslint errors.
error: 'Snap' is not defined (no-undef) at src\components\subpageBanner.vue:246:21:
I want to keep using Eslint in all components, but configure it to ingore this kind of errors.
Is it possible?
If its a single file, then you can put the following line at the top of your file.
/*eslint no-undef: "warning"*/
In a static folder I have config.js
module.exports = {
config: {
urls: {
auth: localhost
}
}
}
I run npm run build and send the output (dist folder) to the client to deploy in their production environment. I want the client to be able to edit the value of auth.
config is currently configured as a external file in webpack:
const config = require(path.join(paths.STATIC, 'config.js'))
externals: [{
appsetting: JSON.stringify(config)
}]
How do I make config.js recognize changes post webpack build?
How about something like this, using axios:
function readConfig () {
return axios.get('./static/config.js').then((response) => {
return response.data
});
}
readConfig().then((config) => {
// Do stuff
});
And make sure config.js is copied to the static/ folder.
Create an entry file in webpack.config for config.js and import/require config.js in other files where you consume the config.