I'm having issues using npm packages with rollup (specifically lodash).
I'm getting an unresolved dependencies error. I have installed both rollup-plugin-node-resolve and rollup-plugin-commonjs and configured according to the docs. It's possible I could have missed something obvious.
Error
[~/Projects/rollup] yarn run build
yarn run v1.2.1
$ rollup -c
src/main.js → ./build/app.js...
(!) Unresolved dependencies
https://github.com/rollup/rollup/wiki/Troubleshooting#treating-module-as-external-dependency
loadash (imported by src/main.js)
(!) Missing global variable name
Use options.globals to specify browser global variable names corresponding to external modules
loadash (guessing 'loadash')
created ./build/app.js in 47ms
✨ Done in 0.93s.
src/main.js
import { map } from 'loadash';
console.log('Test');
rollup.config.js
import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
export default {
input: 'src/main.js',
output: {
file: './build/app.js',
format: 'iife'
},
plugins: [
resolve({
jsnext: true,
main: true,
browser: true,
}),
commonjs()
]
};
What am I doing wrong?
It's called lodash, not loadash!
Related
I am migrating some jest tests over to vitest and some of my tests are failing due to an import issue of an external package dependency in node_modules. Specifically: #package/dependency seems to be an ES Module but shipped in a CommonJS package.
vitest suggests this change to my config:
export default {
test: {
deps: {
inline: [
"#package"
]
}
}
}
Unfortunately, this fix does not work. Previously I resolved this issue with moduleNameMapper in jest where "#package/dependency": "#package/dependency/js" mapped to a valid import. I tried setting alias in both test.alias and resolve.alias, but neither works.
I am using Typescript in this project, and the rest of my test config looks like this:
test: {
globals: true,
environment: "jsdom",
setupFiles: "./src/setupTests.js",
}
// setupTests.js
import {configure} from 'enzyme/build';
import Adapter from 'enzyme-adapter-react-16/build';
configure({ adapter: new Adapter() });
What can I do to get around this? Thanks.
// Project Tree View: My idea about using Webpack.
+ Toolkit:
- D:/Toolkit/Webpack/webpack.config.js
+ Project:
- D:/Project/A/build/index.ts
- D:/Project/B/build/index.ts
- D:/Project/C/build/index.ts
// Toolkit: [webpack.config.js] file
const path = require('path');
module.exports = (env) => {
let project_root = env.path;
console.log(env);
console.log(__dirname);
return {
mode: env.mode,
entry: project_root+'/build/index.ts',
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
include: [
path.resolve(project_root, 'build'),
path.resolve('./node_modules'),
]
}, {
test: /\.scss$/,
use: [
"style-loader",
"css-loader",
"sass-loader",
]
}
]
},
output: {
publicPath: 'public',
filename: 'script.js',
path: path.resolve(project_root, 'assets/js')
},
resolve: {
modules: ['node_modules'],
},
}
}
Build command: yarn build --env=path=D:/Project/C
The command works without error, but when importing any library from the node_modules
Ex:
import {lib} from "example_lib";
import {lib} from "~example_lib";
import {lib} from "#example_lib";
import {lib} from "node_modules/example_lib";
import {lib} from "./node_modules/example_lib";
The Error
ERROR in ../A/build/index.ts 1:0-52
Module not found: Error: Can't resolve 'example_lib' in 'D:\Project\A'
resolve 'example_lib' in 'D:\Project\A'
Parsed request is a module
No description file found in D:\Project\A\build or above
resolve as module
D:\Project\A\build\node_modules doesn't exist or is not a directory
...
D:\node_modules doesn't exist or is not a directory
ERROR in D:\Project\A\build\index.ts
../A/build/index.ts 1:20-49
[tsl] ERROR in D:\Project\A\build\index.ts(1,21)
TS2792: Cannot find module 'example_lib'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?
webpack 5.26.2 compiled with 2 errors in 1939 ms
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
The Question is:
How to use ONLY 1 Webpack node_modules for all projects ?
Gulp can resolve this issue but how about Webpack ?
I do not want every project to have 1 node_modules or webpack, package,... inside (it trash my PC !)
The issue has been resolved !
The above code is correct.
Format ".js" works normally; however ".ts" need to add // #ts-ignore above every import external node_modules.
This is the answer !
// #ts-ignore
import {lib} from "example_lib";
NOTE: 7 days researching Webpack
This is my opinions:
Gulp is much more than Webpack even it has lower user
These are the Pros about Gulp that Webpack should have !
Less time for controlling the core.
User-friendly.
Clear and Clean Structure, less bracket.
Easy and Flexible for creating the custom config.
Easy to use, develop through time.
Not just for web field, on the backup data, auto,... as well.
1 node_modules for all external projects (Gulp less bug and coding line than Webpack).
Compile time are the same.
👉🏾 Gulp is the King 👑 !
I'm trying to use rollup for the first time and I can't figure out why I get this error :
TypeError: eslint is not a function
I previously installed rollup (v1.1.0) then eslint npm install rollup-plugin-eslint (v5.0.0)
here is my rollup.config.js
import babel from 'rollup-plugin-babel';
import eslint from 'rollup-plugin-eslint';
export default {
input: 'src/main.js',
output: {
format: 'iife',
file: 'build/js/main.min.js',
name: 'main'
},
plugins: [
eslint({
exclude: [
'src/styles/**',
]
}),
babel({
exclude: 'node_modules/**',
}),
],
}
When I use ./node_modules/.bin/rollup -c I get this error TypeError: eslint is not a function. (NB : rollup is working fine with only babel)
However it works if I use npm run lint adding this code in package.json
"scripts": {
"lint": "eslint src/**"
}
What do I do wrong with the rollup configuration ?
Thanks for your help
Try changing:
- import eslint from 'rollup-plugin-eslint';
+ import { eslint } from 'rollup-plugin-eslint';
Release notes for v5.0.0
with this webpack config:
{ test: /\.tsx?$/,
use:[
{
loader:'babel-loader',
options: {
presets:['#babel/preset-env']
}
},
{
loader:'ts-loader'
}]
},
I get an error message Error: Cannot find module 'babel-preset-es2015'
If I add that module I get two errors
babel-preset-es2015 is deprecated, use babel-preset-env
But when I install babel-preset-env I still get error about not finding babel-preset-es2015
When I install babel-preset-es2015 I get the error
Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/henrikbechmann/Servers/tribalopolis/www/tribalopolis.com/node_modules/babel-preset-es2015/lib/index.js
So it's a complete trap!
Any suggestions?
Answer: Mostly a matter of updating .babelrc
{
"presets": [
"#babel/env",
"#babel/react"
]
}
and of course updating modules
tip: try npx update-babel
Here is code:
postcss: [
require('postcss-cssnext')(), // postcss is working fine if I only write this row.
require('precss')().process({ parser: require('postcss-scss') }) // npm got error when I add this row
]
Here is error log:
Module build failed: Error: PostCSS syntaxes cannot be used as plugins.
Instead, please use one of the syntax/parser/stringifier options as
outlined in your PostCSS runner documentation.
It seems every .vue file got same error?...
You cannot pass a custom parser in as a plugin. Your config should look like this:
postcss: {
options: {
parser: require('postcss-scss')
},
plugins: [
require('postcss-cssnext')(),
require('precss')()
]
}