Hi all
I’m dipping my toes in Turbo but is facing the mentioned ReferenceError
I followed the instruction from the handbook but I can not build a working js file without adding import '@babel/polyfill
- which take my build file from 69 kb to +1mb
I’m a new comer to webpack, babel stuff and similar - looking for any hint and advice on a working build.
To strip it down to a bare minimum I only add the Turbo import to my js and have the following package.json
{
"devDependencies": {
"autoprefixer": "9.5.1",
"axios": "^0.19.2",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.6.0",
"html-webpack-plugin": "^4.3.0",
"mini-css-extract-plugin": "^0.9.0",
"postcss": "^8.1.13",
"postcss-loader": "^4.1.0",
"reset-css": "^5.0.1",
"sass": "^1.26.10",
"sass-loader": "^9.0.2",
"style-loader": "^1.2.1",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12"
},
"dependencies": {
"@babel/core": "^7.12.10",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/preset-env": "^7.12.11",
"@hotwired/turbo": "^7.0.0-beta.1",
"autocomplete.js": "^0.38.0",
"babel-loader": "^8.0.5",
"file-loader": "^6.2.0",
"lodash": "^4.17.20",
"stimulus": "^2.0.0",
"turbolinks": "^5.2.0",
"url-loader": "^4.1.1"
},
"scripts": {
"watch": "TARGET_ENV=development webpack --watch --progress --colors",
"watch-production": "TARGET_ENV=production webpack --watch --progress --colors --mode production",
"build": "webpack --mode production --progress --hide-modules"
}
}
and the following webpack.config.js
let path = require('path');
let webpack = require('webpack');
let fs = require('fs');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
var plugins = [];
plugins.push(new CleanWebpackPlugin({
cleanStaleWebpackAssets: false
}));
plugins.push(new MiniCssExtractPlugin({filename: '[name].css'}));
module.exports = {
mode: 'development',
entry: {
'Application': ['./Resources/Private/Ui/Styles/scss/application.scss', './Resources/Private/Ui/Scripts/src/application.js']
},
output: {
path: path.resolve('./Resources/Public') + '/Ui/',
publicPath: '/'
},
resolve: {
modules: [
'./node_modules'
],
alias: {
//'@': path.resolve('./Resources/Private/Ui')
},
extensions: ['.js', '.scss', '.css']
},
module: {
rules: [
{
test: /\.js/,
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env'
],
plugins: [
'@babel/plugin-proposal-class-properties'
]
}
}
},
{
test: /\.(scss)$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
ident: 'postcss',
options: {
sourceMap: true,
postcssOptions: {
plugins: [
require('autoprefixer'),
]
}
},
},
{
loader: 'sass-loader',
ident: 'sass',
options: { sourceMap: true }
}
]
},
{
test: /\.(png|jpg|gif|svg)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
},
},
],
}
]
},
plugins: plugins
};
and a application.js like this
import Turbo from '@hotwired/turbo';
Hope for any help
Note I created a issue in the Turbo repository to help add any dependencies in the installation guide - I hope that this thread and solution can lead to a helpful update of that