I have a package I am making which uses d3. Of course, in my rollup.config.js file I declare d3 as both an external and global package:
let config = {
...,
output: {
external: ['d3'],
globals: {d3:'d3'},
...,
},
...
}
and I might have a function in a file somewhere like:
import * as d3 from 'd3'
...
export function someFunc(arg1, arg2) {
d3.select(arg1)
d3.min(arg2)
}
...
and when I bundle my code with rollup -c I get the nice warning that
src/modules/some-file.js
selection is not exported by node_modules/d3/dist/d3.node.js
so I go back to my rollup.config.js file and add the following:
// inside config
plugins: [
...,
commonjs({
...,
namedExports: {
'node_modules/d3/dist/d3.node.js': [
'selection', 'min',
]
},
...,
})
...,
]
and now my bundle has no warnings or complaints... but when I go to use my bundled code, I get errors like:
TypeError: d3_node_1 is null
TypeError: d3_node_2 is null
where d3_node_1 appears where I have d3.select in my code and d3_node_2 appears where d3.min is.
How do I get around this?
You probably have to use the rollup-plugin-node-resolve to use third party modules from node_modules
adding 'module' to mainFields seemed to solve it
nodeResolve({
mainFields: [
'module',
'main', 'jsnext'
]
}),
Related
I had a published component library (my-components) that had a specific component (Compare) in it, along w/ other components and utilities that were used in a main application. We use rollup and create several different output formats, one of which is UMD (required by one of the teams using my-components).
The component (Compare) was starting to become large, so it was moved out on its own. The rollup build was based off of what was used for my-components. After moving it out to its own repository to be built as its own component, it now had a dependency on my-components. When used in the main application (CRA app), everything works as expected. However, when the team who uses the UMD module tried to use the Compare app, they started to get errors:
Cannot read properties of undefined (reading someService)
The code in Compare is:
import {someService, somethingElse} from 'my-components';
. . .
someService.doSomething();
I saw the following warning during the build:
WARNING: { code: 'MISSING_GLOBAL_NAME', guess: 'myComponents', message: 'No name was provided for external module \'my-components\' in output.globals - guessing \'myComponents\'' }
So I explicitly added a global entry for it.
When I looked at the resulting code in the UMD module, the code looked like:
myComponents.someService.doSomething();
Why doesn't myComponents.someService resolve to the class that is exported from my-components?
My rollup.config.js looks like:
const EXTENSIONS = ['.ts', '.tsx', '.js', '.jsx', '.json'];
const umdGlobals = {
axios: 'axios',
lodash: '_',
react: 'React',
'react-dom': 'ReactDOM',
'my-components': 'myComponents'
};
export default [
{
input: 'src/components/index.js',
output: [
{ file: pkg.module, format: 'esm', sourcemap: true },
{ file: pkg.main, format: 'cjs', sourcemap: true },
{ file: pkg.umd, name: 'Compare', format: 'umd', sourcemap: true, globals: umdGlobals }
],
plugins: [
autoExternal(),
resolve({ extensions: EXTENSIONS, preferBuiltins: false, browser: true}),
commonjs({include: ['node_modules/**']),
babel({
babelHelpers: 'bundled',
babelrc: false,
presets: ['#babel/preset-env', '#babel/preset-react', '#babel/preset-typescript'],
plugins: ['#babel/plugin-transform-arrow-functions', '#babel/plugin-proposal-object-rest-spread', '#babel/plugin-proposal-class-properties],
extensions: EXTENSIONS,
exclude: 'node_modules/**'
}),
json(),
requireContext(),
internal(['classnames', 'pluralize'])
]
}
];
I tried to put my-components inside of internal(), and remove it from the global list, but that started to give other warnings that I think were the result of a dependency inside of it, and would throw errors when the bundle was used anyway.
Any advice on what I may be missing? Is there something wrong w/ the output from the my-components that I should be trying to fix in its rollup config, or is there something I can do in my rollup config for Compare?
Any help is greatly appreciated.
I want to integrate the QR code scanner feature in my react-native-based applications.
so I am installing the react-native-vision-camera package.
According to documentation, I have to add globals __scanQRCodes inside babel.config.js
globals: ['__scanQRCodes']
But after adding globals __scanQRCodes inside babel.config.js.
I got BABEL TRANSFORM ERROR
.globals is not a valid Plugin property
we need to define the array as shown in the image below, you miss the square brackets like this:
plugins: [
[
'react-native-reanimated/plugin',
{ globals: ['__scanQRCodes'] }
]
]
see this image for proper understand
We need to do this 2 modifications:
plugins: [
[
'react-native-reanimated/plugin',
{ globals: ['__scanCodes'] },
],
]
And finally:
npx react-native start --reset-cache
IE11 - ERROR: SCRIPT1004: Expected ';'
Hi! My website works on every browser except IE. My babel.config.js file:
module.exports = {
presets: [
['#vue/app', {
polyfills: [
'es.promise',
'es.symbol',
'es6.array.iterator'
]
}]
],
"plugins": [
"#babel/plugin-transform-shorthand-properties",
"#babel/plugin-proposal-object-rest-spread",
[
'component',
{
libraryName: 'element-ui',
styleLibraryName: 'theme-chalk'
}
]
]
}
---> Console screenshot
---> Debugger screenshot
Your debugger screenshot shows the error is from the native-toast package. That package's GitHub shows an unresolved issue, in which a for ... of loop is used. IE does not know how to interpret it, which is a common cause of the Vue IE SCRIPT1004 error (which is just a missing semicolon).
You can tell Vue CLI to transpile the entire native-toast dependency package, which is something it does not do by default. In your vue.config.js (not Babel):
module.exports = {
transpileDependencies: [
'native-toast'
]
}
(Note: transpileDependencies is an array of package names [or RegExp])
Apparently, in some cases you may also need this in your babel.config.js (try without it first):
module.exports = {
"presets": [
'#babel/preset-env'
],
}
Reference:
Vue CLI transpileDependencies
Vue CLI polyfills guide
Vue Forum transpileDependencies example
Is there a way to change the default minifier that Laravel Mix uses?
By default, it uses 'Terser' (the Webpack default), but I would like it to instead use Closure Compiler (see here).
I have tried various things but have not had any luck yet. This is my latest failed attempt:
mix.webpackConfig({
module: {
rules: [
// ...
]
},
plugins: [
// ...
],
resolve: {
alias: {
// ...
}
},
optimization: {
minimizer: [
new ClosurePlugin({mode: 'STANDARD'}, {})
]
}
});
I would like to specifically achieve this using the webpack.mix.js configuration if possible i.e. I would like to avoid overriding the Laravel mix configuration (this may not be possible)
We have built a Nuxt/VueJS project.
Nuxt has its own config file called nuxt.config.js within which we configure webpack and other build setup.
In our package.json, we have included the lodash package.
In our code, we have been careful to load only import what we require, for example:
import orderBy from 'lodash/orderBy'
In nuxt.config.js, lodash is add to the vendor list.
However when we create the build, webpack always includes the entire lodash library instead of including only what we have used in our code.
I have read numerous tutorials but haven't got the answer. Some of those answers will surely work if it was a webpack only project. But in our case, it is through nuxt config file.
Looking forward to some help.
Below is the partial nuxt.config.js file. Only relevant/important parts are included:
const resolve = require('resolve')
const webpack = require('webpack')
module.exports = {
/*
** Headers of the page
*/
head: {
},
modules: [
['#nuxtjs/component-cache', { maxAge: 1000 * 60 * 10 }]
],
plugins: [
{ src: '~/plugins/intersection', ssr: false },
],
build: {
vendor: ['moment', 'lodash'],
analyze: {
analyzerMode: 'static'
},
postcss: {
plugins: {
'postcss-custom-properties': false
}
},
plugins: [
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
],
/*
** Run ESLINT on save
*/
extend (config, ctx) {
// config.resolve.alias['create-api'] = `./create-api-${ctx.isClient ? 'client' : 'server'}.js`
}
}
}
You can npm install only the required packages
Lodash can be split up per custom builds. You can find a list of already available ones here. You can use them like this: npm i -S lodash.orderby. I didn't check it but you would probably also need to change import orderBy from 'lodash/orderBy' to import orderBy from 'lodash.orderby'.