After going through almost all the answers related to this topic I had no luck so have to create a new question.
Problem Statement :
I have a library (module) that I want to import inside my react application which has an export syntax like(working in another app) :
export * from './button'; // this returns jsx component
Now, in my application I am using this as :
import {button} from ./library; // this is the bundled module where button component exists.
When I do this Webpack gives me an error :
(function (exports, require, module, __filename, __dirname) { export * from './button';
^^^^^^
SyntaxError: Unexpected token export
As written, I am using Webpack 4 and babel 7 with these configurations :
webpack.config.js
//this is exports.
module.exports = {
entry: {
client: ['whatwg-fetch', './client/index.js', 'webpack-hot-middleware/client']
},
optimization: {
minimizer: [new OptimizeCSSAssetsPlugin({})]
},
output: {
path: path.resolve(__dirname, `dist/client/${pkg.version}`),
filename: '[name].js',
publicPath: `/myApp/${pkg.version}`
},
devtool: ifProduction('nosources-source-map', 'source-map'),
resolve: {
modules: [path.resolve('./client'), path.resolve('./node_modules')]
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
},
{
test: /\.(ttf|eot|svg|woff|woff2?)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader?name=fonts/[name].[ext]'
},
{
test: /\.(png|jpg|ico|svg|eot|ttf)$/,
loader: 'url-loader'
}
]
},
mode,
plugins: [
new webpack.HotModuleReplacementPlugin(),
new MiniCssExtractPlugin(),
new BundleAnalyzerPlugin({
analyzerMode: 'static',
openAnalyzer: false,
reportFilename: '../report.html'
})
]
};
babel.config.js
// prettier-ignore
module.exports = {
presets: [
'@babel/preset-env',
'@babel/preset-react',
],
plugins: [
'@babel/plugin-transform-spread',
'react-hot-loader/babel',
'@babel/plugin-syntax-dynamic-import',
'@babel/plugin-proposal-class-properties',
['@babel/plugin-transform-runtime',
{
regenerator: true,
},
],
],
env: {
development: {
presets: [
'@babel/preset-env', ['@babel/preset-react', { development: true } ],
],
},
test: {
presets: [['@babel/preset-env'], '@babel/preset-react'],
},
},
};
I am not sure what's going wrong, Any help would be much appreciated.
Thanks.
This is not a valid syntax.
export * from './button';
You need to list what you export.
export {button}
or
export default button
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.