Linaria: Bug in new 0.1.* version

Created on 9 Oct 2017 · 9Comments · Source: callstack/linaria

Do you want to request a feature or report a bug?
bug

What is the current behavior?
Can't build project. Version 0.0.2-alpha.0 works fine.

stacktrace:

ERROR in ./components/App.js
Module build failed: TypeError: /home/a/projects/dl/app/src/components/App.js: Cannot read property 'sourceMap' of undefined
    at /home/a/projects/dl/app/node_modules/linaria/src/babel/lib/errorUtils.js:33:40
    at Array.map (<anonymous>)
    at enhanceFrames (/home/a/projects/dl/app/node_modules/linaria/src/babel/lib/errorUtils.js:32:17)
    at Module._compile (/home/a/projects/dl/app/node_modules/linaria/src/babel/lib/moduleSystem.js:127:11)
    at instantiateModule (/home/a/projects/dl/app/node_modules/linaria/src/babel/lib/moduleSystem.js:55:18)
    at exports.default (/home/a/projects/dl/app/node_modules/linaria/src/babel/preval-extract/prevalStyles.js:60:34)
    at PluginPass.TaggedTemplateExpression (/home/a/projects/dl/app/node_modules/linaria/src/babel/preval-extract/index.js:103:11)
    at newFn (/home/a/projects/dl/app/node_modules/babel-traverse/lib/visitors.js:276:21)
    at NodePath._call (/home/a/projects/dl/app/node_modules/babel-traverse/lib/path/context.js:76:18)
    at NodePath.call (/home/a/projects/dl/app/node_modules/babel-traverse/lib/path/context.js:48:17)
    at NodePath.visit (/home/a/projects/dl/app/node_modules/babel-traverse/lib/path/context.js:105:12)
    at TraversalContext.visitQueue (/home/a/projects/dl/app/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitSingle (/home/a/projects/dl/app/node_modules/babel-traverse/lib/context.js:108:19)
    at TraversalContext.visit (/home/a/projects/dl/app/node_modules/babel-traverse/lib/context.js:192:19)
    at Function.traverse.node (/home/a/projects/dl/app/node_modules/babel-traverse/lib/index.js:114:17)
    at NodePath.visit (/home/a/projects/dl/app/node_modules/babel-traverse/lib/path/context.js:115:19)
    at TraversalContext.visitQueue (/home/a/projects/dl/app/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitMultiple (/home/a/projects/dl/app/node_modules/babel-traverse/lib/context.js:103:17)
    at TraversalContext.visit (/home/a/projects/dl/app/node_modules/babel-traverse/lib/context.js:190:19)
    at Function.traverse.node (/home/a/projects/dl/app/node_modules/babel-traverse/lib/index.js:114:17)
    at NodePath.visit (/home/a/projects/dl/app/node_modules/babel-traverse/lib/path/context.js:115:19)
    at TraversalContext.visitQueue (/home/a/projects/dl/app/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitMultiple (/home/a/projects/dl/app/node_modules/babel-traverse/lib/context.js:103:17)
    at TraversalContext.visit (/home/a/projects/dl/app/node_modules/babel-traverse/lib/context.js:190:19)
    at Function.traverse.node (/home/a/projects/dl/app/node_modules/babel-traverse/lib/index.js:114:17)
    at NodePath.visit (/home/a/projects/dl/app/node_modules/babel-traverse/lib/path/context.js:115:19)
    at TraversalContext.visitQueue (/home/a/projects/dl/app/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitSingle (/home/a/projects/dl/app/node_modules/babel-traverse/lib/context.js:108:19)
    at TraversalContext.visit (/home/a/projects/dl/app/node_modules/babel-traverse/lib/context.js:192:19)
    at Function.traverse.node (/home/a/projects/dl/app/node_modules/babel-traverse/lib/index.js:114:17)
 @ ./index.js 11:11-38

Please provide your exact Babel configuration and mention your Linaria, Node, Yarn/npm version and operating system.

linaria 0.1.3
Node 8.6.0
Yarn 1.0.1

.babelrc

{
  "presets": [
    "react-app",
    "flow",
    ["env", {"targets": {"browsers": ["last 2 versions"]}}],
    "linaria/babel"
  ],
  "plugins": [
    ["transform-class-properties", { "spec": true }]
  ]
}

bug 🐛

Source

pronevich

All 9 comments

Do you have any repro of that? I've just bumped the version on our website example and it works just fine.

thymikee on 9 Oct 2017

Hmm. It's private project, can't push open repo. I will try figure out issue

pronevich on 9 Oct 2017

@pronevich maybe you can post your webpack configuration?

satya164 on 9 Oct 2017

I looked at linaria website webpack config, pretty similar to my:

import path from 'path'
import webpack from 'webpack'
import CleanWebpackPlugin from 'clean-webpack-plugin'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import ExtractTextPlugin from 'extract-text-webpack-plugin'
import PreloadWebpackPlugin from 'preload-webpack-plugin'
import CopyWebpackPlugin from 'copy-webpack-plugin'
import OfflinePlugin from 'offline-plugin'
import dotenv from 'dotenv'

dotenv.config()

const FIREBASE_CONFIG = JSON.stringify({
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
})

const ENTRY = './index.js'
const PORT = process.env.PORT || 8080
const PRODUCTION = process.env.NODE_ENV === 'production'
const DEV = !process.env.NODE_ENV || process.env.NODE_ENV === 'development'

export default {
  context: path.join(__dirname, 'src'),
  entry: PRODUCTION
    ? ENTRY
    : [`webpack-dev-server/client?http://localhost:${PORT}`, ENTRY],
  output: {
    path: path.join(__dirname, 'build'),
    filename: PRODUCTION ? '[name].[chunkhash].js' : '[name].js',
    chunkFilename: PRODUCTION ? '[name].[chunkhash].js' : '[name].js',
    publicPath: '/',
  },

  resolve: {
    extensions: ['.js', '.json'],
    modules: ['node_modules', path.resolve(__dirname, 'node_modules')],
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.(woff2?|ttf|eot)(\?.*)?$/,
        use: 'file-loader',
      },
      {
        test: /\.jpe?g$/,
        loader: 'responsive-loader',
        options: {
          placeholder: true,
          placeholderSize: 40,
          name: './assets/[hash].[ext]',
        },
      },
      {
        test: /\.(gif|png|svg)$/,
        use: [
          // {
          //    loader: 'file-loader',
          //    options: {
          //        name: '[path][name].[hash].[ext]'
          //    }
          // },
          // {
          //    loader: 'image-webpack-loader',
          //    query: {
          //        mozjpeg: {
          //            quality: 65,
          //            progressive: false
          //        },
          //        pngquant: {
          //            quality: '65-90',
          //            speed: 4
          //        }
          //    }
          // },
        ],
      },
    ].concat(
      PRODUCTION
        ? {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
              fallback: 'style-loader',
              use: 'css-loader',
            }),
          }
        : {
            test: /\.css$/,
            use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
          },
    ),
  },
  plugins: [
    new CleanWebpackPlugin(['build']),
    new webpack.DefinePlugin({
      FIREBASE_CONFIG,
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
      },
    }),
    new HtmlWebpackPlugin({
      template: 'index.ejs',
      filename: 'index.html',
      hash: false,
      minify: {
        collapseWhitespace: true,
        keepClosingSlash: true,
        removeComments: true,
        removeEmptyAttributes: true,
      },
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'app',
    }),
    new PreloadWebpackPlugin({
      rel: 'preload',
      include: 'asyncChunks',
    }),
    new CopyWebpackPlugin([
      { from: './manifest.json' },
      { from: './favicon.ico' },
    ]),
  ].concat(
    PRODUCTION
      ? [
          new ExtractTextPlugin({
            filename: 'css/[name].css?[hash]',
            disable: false,
            allChunks: true,
          }),
          new OfflinePlugin({
            relativePaths: false,
            AppCache: false,
            excludes: ['_redirects'],
            ServiceWorker: {
              events: true,
            },
            cacheMaps: [
              {
                match: /.*/,
                to: '/',
                requestTypes: ['navigate'],
              },
            ],
            publicPath: '/',
          }),
          new webpack.optimize.UglifyJsPlugin(),
        ]
      : [
          new webpack.HotModuleReplacementPlugin(),
          new webpack.NamedModulesPlugin(),
          new webpack.NoEmitOnErrorsPlugin(),
        ],
  ),
  devtool: 'source-map',
  devServer: {
    port: PORT,
    host: 'localhost',
    publicPath: '/',
    contentBase: './src',
    historyApiFallback: true,
    open: false,
    openPage: '',
    hotOnly: true,
    proxy: {
      // OPTIONAL: proxy configuration:
      // '/optional-prefix/**': { // path pattern to rewrite
      //   target: 'http://target-host.com',
      //   pathRewrite: path => path.replace(/^\/[^\/]+\//, '')   // strip first path segment
      // }
    },
  },
  stats: { colors: true },
}

pronevich on 9 Oct 2017

👍1

@pronevich It would be awesome if you could post styles from src/components/App.js - only css/css.named stuff and relevant imports w/o any actual component code.

zamotany on 10 Oct 2017

This is the whole App.js:

// @flow

import React from 'react'
import { Provider, State } from 'statty'
import { css, styles } from 'linaria'

import Auth from './containers/Auth'
import AuthPage from './pages/AuthPage'
import Layout from './Layout'
import '../lib/styles/global.css'

const html = css`
  height: 100%;
  width: 100%;
  body,
  #root {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
  }
`

if (document.documentElement) {
  document.documentElement.classList.add(html)
}

const initialState = {
  offline: false,
}

export default () => (
  <Provider state={initialState}>
    <Auth
      render={({ isLoggedIn }) => (isLoggedIn ? <Layout /> : <AuthPage />)}
    />
  </Provider>
)

Also when I start in dev mode, here error stack continuation:

ERROR in ./src/components/App.js
Module build failed: Error: Cannot read property 'named' of undefined
   8 |
   9 |
  10 |
  11 |
> 12 | module.exports = css.named('html', '/home/a/projects/dl/app/src/components/App.js')`
     |                     ^
  13 |   height: 100%;
  14 |   width: 100%;
  15 |   body,
at /home/a/projects/dl/app/src/components/App.js:12:21
 @ ./src/index.js 13:11-38

pronevich on 10 Oct 2017

Cannot reproduce the issue using babel-cli, will try it with webpack.

zamotany on 10 Oct 2017

We released a new version 0.1.4 which should fix it.

zamotany on 10 Oct 2017

Yep, all works now )

pronevich on 10 Oct 2017

🎉1

Was this page helpful?

0 / 5 - 0 ratings

Related issues

Nextjs v9: Conflicting order between extract-css-chunks-plugin error

secretlifeof · 6Comments

Problem with babel-plugin-module-resolver ("[linaria] failed to add dependency")

SchlagerKhan · 4Comments

Hot reload not working properly

zaguiini · 5Comments

Add documentation on how to integrate Linaria

jayu · 4Comments

Investigate if we can avoid writing the CSS file to disk

satya164 · 3Comments