aurelia / aurelia/framework

Aurelia with storybook

Open
#905 27 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
11.7k
Forks
608
PR merge metrics
No merged PRs in 30d

Description

Hi,

Im trying to make aurelia work with storybook. I tried to initialize aurelia with webpack, but when storybook triest to load aurelia app i get this message:
```
in D:/SourceCodes/storybook/node_modules/aurelia-bootstrapper-webpack/node_modules/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js
Module not found: Error: Can't resolve 'aurelia-loader-context' in 'D:\SourceCodes\storybook\node_modules\aurelia-bootstrapper-webpack\node_modules\aurelia-loader-webpack\dist\commonjs'
@ D:/SourceCodes/storybook/node_modules/aurelia-bootstrapper-webpack/node_modules/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js 154:23-64
@ D:/SourceCodes/storybook/node_modules/aurelia-bootstrapper-webpack/dist/commonjs/aurelia-bootstrapper-webpack.js
@ D:/SourceCodes/storybook/app/aurelia/dist/client/preview/render.js
@ D:/SourceCodes/storybook/app/aurelia/dist/client/preview/index.js
@ D:/SourceCodes/storybook/app/aurelia/dist/client/index.js
@ ./.storybook/config.js
@ multi D:/SourceCodes/storybook/lib/core/dist/server/config/polyfills.js D:/SourceCodes/storybook/lib/core/dist/server/config/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true
```

Webpack config file:
```javascript
const path = require('path');
const AureliaWebPackPlugin = require('aurelia-webpack-plugin');

module.exports = {
entry: {
app: [],
aurelia: [
'aurelia-bootstrapper-webpack',
'aurelia-polyfills',
'aurelia-pal',
'aurelia-pal-browser',
'aurelia-binding',
'aurelia-dependency-injection',
'aurelia-event-aggregator',
'aurelia-framework',
'aurelia-history',
'aurelia-history-browser',
'aurelia-loader',
'aurelia-loader-webpack',
'aurelia-logging',
'aurelia-logging-console',
'aurelia-metadata',
'aurelia-path',
'aurelia-route-recognizer',
'aurelia-router',
'aurelia-task-queue',
'aurelia-templating',
'aurelia-templating-binding',
'aurelia-templating-router',
'aurelia-templating-resources',
],
},

output: {
// (2)
path: path.resolve(__dirname, 'dist'),
publicPath: 'dist',
filename: '[name].js',
chunkFilename: '[name].js',
},

resolve: {
// (3)
extensions: ['.ts', '.js'],
modules: ['src', 'node_modules'],
},

module: {
// (4)
rules: [
{ test: /\.less$/i, use: ['style-loader', 'css-loader', 'less-loader'] },
{ test: /\.ts$/i, use: 'ts-loader' },
{ test: /\.html$/i, use: 'html-loader' },
],
},

plugins: [
new AureliaWebPackPlugin({ noWebpackLoader: true, aureliaApp: undefined }), // (5)
],
};

```

Full repo source code to clone is at https://github.com/bemon/storybook if anyone wants to take a look and try run.

I dont know how exacly configure webpack to proper load aurelia modules.

Contributor guide

Open the contributing guide

Research direction

Clone the linked bemon/storybook repository and reproduce the failure using the Webpack configuration shown. Trace the missing module from aurelia-loader-webpack.js through aurelia-bootstrapper-webpack.js and the Storybook entry points in .storybook/config.js and app/aurelia/dist/client/preview/render.js. Done means Storybook loads the Aurelia app without the aurelia-loader-context resolution error.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript, webpack
Domain
build-system, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.