Je crée un bundle avec rollUp en utilisant des composants de style.
Mon rollup.config.js ressemble à:
import resolve from 'rollup-plugin-node-resolve'
import babel from 'rollup-plugin-babel'
import commonjs from 'rollup-plugin-commonjs'
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'cjs'
},
external: [
'react',
'react-proptypes'
],
plugins: [
resolve({
extensions: [ '.js', '.json', '.jsx' ]
}),
commonjs({
include: 'node_modules/**'
}),
babel({
exclude: 'node_modules/**'
})
]
}
Et je reçois
[!] Error: 'isValidElementType' is not exported by node_modules/react-is/index.js
https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module
node_modules/styled-components/dist/styled-components.es.js (7:9)
5: import stream from 'stream';
6: import PropTypes from 'prop-types';
7: import { isValidElementType } from 'react-is';
^
8: import hoistStatics from 'hoist-non-react-statics';
Vérifier sur le node_modules lui-même react-is est un module commonjs car il peut également être vérifié ici .
Le plugin commonjs ne devrait-il pas s'en occuper puisqu'il se trouve à l'intérieur de node_modules/**?
Merci.
J'ai résolu ce problème en utilisant le rollup-plugin-commonjs
et définir l'exportation manuellement dans la configuration de rollup comme ci-dessous
export default {
input: 'src/index.js',
output: [
{
file: pkg.main,
format: 'cjs',
sourcemap: true
},
{
file: pkg.module,
format: 'es',
sourcemap: true
}
],
plugins: [
external(),
postcss({
modules: true
}),
url(),
babel({
exclude: 'node_modules/**'
}),
resolve(),
commonjs({
include: 'node_modules/**',
namedExports: {
'node_modules/react-is/index.js': ['isValidElementType']
}
})
]
}
Après cela, tout a bien fonctionné.
et pour l'info, ma configuration initiale a été effectuée via https://github.com/transitive-bullshit/react-modern-library-boilerplate
J'espère que ça marche pour toi
Le correctif ci-dessus n'a pas fonctionné pour moi. Cependant, l'ajout de styled-components
à la rollup.config.js
la liste des externes et des globaux a fonctionné pour moi.
export default {
...
external: ['styled-components'],
...
globals: { 'styled-components': 'styled' },
};
J'utilise TypeScript create-react-library cli, qui est fourni avec le correctif cumulatif.
https://github.com/styled-components/styled-components/issues/9